Please note that this tutorial works with ConfiForms version 2.0.15 and onwards
You can see a discussion on Atlassian community and more details on how to setup this to work with other tabs add-ons here https://community.atlassian.com/t5/Confluence-questions/Confiforms-Tabbed-View-in-Dialog-Mode/qaq-p/975906
Often, the forms you develop become very long and complex and using tabbed view, and grouping fields together in logical sections might be a good idea.
The reason is - all the mentioned plugins work on page load and initialize own components when the page loads. With ConfiForms a lot of contents is loaded dynamically and on demand. Including the forms in dialog mode.
This tutorial demonstrates how you can setup a form in dialog mode with Refined Toolkit app.
We will setup a form with just 2 fields, showing each field in a different tab and we will also add support for "Edit Controls" to use the same layout as in default Registrations Control (FormView) macro. Meaning, we will have the same tabbed view of the form when editing the records
Form with just 2 fields
- text field
- text area field
Form configuration view in Confluence editor
We define 2 fields and we also define default Registrations Control macro with tabs around each field
Registrations Control (FormView) macro uses default mode and renders the form in dialog mode when a user clicks on "Register" button
This is how the form looks in view mode after user clicks on "Register" button
Forcing tabs to re-initialize
So, what is the trick? The trick is to use post-initialization function of ConfiForms Registration Control
We call the function initTabs and set it up like this in the macro parameters
Here is how the function (initTabs in our case) looks like and what it does (you will need to put it on the page with HTML macro, for example)
Basically, it forces UI Toolkit to re-initialize some tabs again in our loaded form
This is a code taken from UI Toolkit initializer and modified to fulfil the needs of ConfiForms. Sorry for the variables names, we only had a minified version of this code.
Using tabbed view in Edit Controls
To have your edit controls to use the tabbed view you can do a very simple trick. You just need to tell ConfiForms Edit Controls to use the layout of the Registrations Control (FormView) macro
In macro parameter for Edit Controls macro this looks like this