Skip to Content

Group collapse/expand, accordion, tabs in Jitterbit App Builder

App Builder supports the ability to configure Groups to collapse and expand when the title of the Group is clicked. Accordion and Tab are two types of Groups that can have information reside inside them, and are useful for presenting logical groupings of information. By default, App Builder will present the first Control as expanded (or open), and the rest as collapsed (or closed).

You can customize the image being displayed on the Accordion control, which is used to indicate the open/closed state. If you don't choose an "off state" for the Accordion, App Builder will use the ON state image and rotate it 90 degrees.

How to configure a group with accordions

accordion.png

Example of Groups configured with Accordions

  1. Navigate to the panel where you want to configure the Group.
  2. Go to the Action Drawer > Live Designer.
  3. Locate (or add) the panel where you want to add a Group and click the corresponding Controls button.
  4. Click + Control to open the Add a Control wizard.
  5. Set the Control Type to Accordion.
  6. Assign a Name. For example: Parcel.
  7. Control Subtype determines how the accordion behaves when a set is opened. It is Single by default. Click to change it to Multiple.
  8. Click Next.
  9. Check or change the control name, then click Finish.
  10. Continue to create remaining Group containers. For example: Notes, Special Districts.
  11. Set the Parent value of any remaining Groups to the Accordion Group.
  12. Assign all appropriate Controls to Groups using the Parent value in the Controls panel.
  13. To further configure a group control, click its Open record icon.
  14. Navigate to the application UI view, refresh the web browser and confirm results.

How to configure a group with tabs

tabs.png

Example of Groups configured with Tabs

  1. Navigate to the panel where you want to configure the Group.
  2. Go to the Action Drawer > Live Designer.
  3. Locate (or add) the panel where you want to add a Group and click the corresponding Controls button.
  4. Click + Control.
  5. Set the Control Type to Tab.
  6. Assign a Name. For example: Parcel.
  7. Assign the Parent as the Panel container the Group resides in. For example: Parcel Information (SRP).
  8. Save and exit.
  9. Continue to create remaining Group containers. For example: Notes, Special Districts.
  10. Set the Parent value of any other Groups to the Tab Group.
  11. Assign all appropriate Controls to Groups using the Parent value in the Controls panel.
  12. Navigate to the application UI view, refresh the web browser and confirm results.