Collapsible form functionality in a vFlow application

When user comes to the page then the first module on the dashboard stays in open state but the other modules below it will be collapsed, they will expend only if user click on the expand button.
Is this functionality available in vFlow? If yes, how do we implement it?

5 Likes

Yes, this functionality is available in vFlow, it is acheived by element called Accordion.

For implementation of Accordion we have to follow the follwing steps-

  1. Open component section in vFlow and configure a FV for the required accordion.
  2. Go to the element section of FV and from the drop down select Accordion.

  1. Enter basic details.

  1. In the properties section mark the checkboc for is Visible and isEnable, You can also add tooltip for less and more icon seperately.
  2. In the UI properties, set the percentage of size according to your need.

  1. Then submit the element configuration.
  2. Set the position of accordion before the elements you want to hide in the element list of FV.
28 Likes

Some of the reference screenshots are attached below-

29 Likes

Additionally, Custom CSS will be added to make the Accordion more Representative.

26 Likes

Thanks for the details along with snapshots. Will help big time

4 Likes

The solution mentioned by @Nikhil.Dhanda is for FV component in which list of data is shown.
To achieve the same functionality for Forms refer the following steps.

  1. To create an accordion, navigate to the components section and add/ edit the Fieldset component.

  2. Go to the properties section and check the ‘Is Accordion’ checkbox. This step is to be followed for all the fieldsets that are to be shown as accordion.

  3. Bind all the fieldsets in the components section of Form layout (all the fieldsets must be in the same column to be shown as accordion).
    Form > Layout > Column > Add Components

  4. By default, the fieldset will expand when the user clicks on the accordion icon. Multiple fieldsets can be visible at a time.


  5. To expand only one fieldset at a time, check the ‘Expand Only One Fieldset’ checkbox in the Form properties. This will show the 1st fieldset open whenever the form loads.


19 Likes