Summary

n addition to Bar and Collapsible headers, V5.4 SP2 introduces the ability to format layouts and containers in an accordion style. At runtime, clicking to open a closed layout will close the one already open.

Example

Accordion-style user interface elements provide the ability to selectively hide or show groups of fields on a form. Multiple accordion elements can exist on a single form and in the case of an accordion-style container, can contain additional nested tab or accordion elements.

Accordion section rule:

Accordion container element (which contains a tabbed section):

Suggested Approach

Complete the following steps to add an accordion-style layout to a section rule, container, or flow action rule:

1. Open or create the section or flow action rule to which you would like to add an accordion layout.
2. Select an existing layout in the section rule, or add a new one by selecting and dragging an Accordion element from the Layout group of controls onto the section rule.
3. If you are converting an existing layout into an accordion layout:
   1. With the Layout selected, click the magnifying glass icon to open the layout properties panel.
   2. In the layout properties panel, on the Layout tab, select either Header > Standard or Sub Header > Standard as the header type.
   3. In the Layout properties panel, on theHeader tab, select Accordion as the Layout. Selecting Defer Load? causes a delay in the loading of contents in a specific layout until you select that layout at runtime. This is beneficial to performance. Notice the title of the Layout changes from Layout to Accordion.

   

4. Selecting and dragging subsequent Grid or Accordion elements adds additional accordion bars to the layout. Complete the layout properties for each accordion bar. Note: The orange line indicates the placement of the new layout is directly under the last accordion bar in the layout. This ensures that the new layout will be added to the group.

   

5. Because each accordion bar represents a new layout, the properties panel for each bar is accessed by clicking the magnifying glass at the top level of the wireframe. This value changes to match the number of the currently selected accordion bar. Layout properties can be set for each accordion bar in the group.
6. Selecting New Layout? on the properties panel of an accordion bar causes that accordion bar, and any placed after it, to be inserted as a new group directly below the original group. Deselecting this property causes the separated accordion bars to merge back into the original group.

   

Harness Rules

Complete the following steps to add an accordion element to a harness rule:

1. Open or create a harness rule.
2. Select an existing container or drag an Accordion element from the Layout group of controls on to the harness.
3. If you are converting an existing container into an accordion container:
1. With the container selected, click the magnifying glass icon to open the container properties panel.
2. In the container properties panel, on the Layout tab, select either Header > Standard or Sub Header > Standard as the header type.
3. In the container properties panel, on theHeader tab, select Accordion as the Layout. Selecting Defer Load? causes a delay in the loading of contents in a specific tab until that tab is selected. This is beneficial to performance. Notice the title of the container changes from Container to Accordion.
4. Because each accordion bar represents a new container, the properties panel for each tab is accessed by clicking the magnifying glass at the top level of the This value changes to match the number of the currently selected accordion bar. Layout properties can be set for each accordion bar in the group.
5. Selecting New Layout? on the properties panel of an accordion bar causes that accordion bar, and any placed after it, to be inserted as a new group directly below the original group. Deselecting this checkbox causes the separated accordion bars to merge back into the original group.