Back Forward Harness forms — Adding an Accordion

About Harnesses

Using the Accordion control, you can add containers that comprise multiple sections; each section is configured with an accordion header. At runtime, when the user clicks one header within an accordion group, that section becomes visible and the other open section closes.

To add an accordion container to a harness, do the following:

  1. Click the down-arrow Arrowat the right end of the Layout control group Layout group and select the Accordion control (Layout.
  2. Drag and drop the control onto the form. As you move the pointer over existing frames, a yellow line indicates where the accordion will be dropped.

    The accordion container appears in a wireframe on the form.

    Alternatively, you can add an accordion container by selecting an existing one and clicking the Insert Row Above New Row Before or Insert Row Below New Row After icon.

To add accordions to a container, do the following:

  1. Select the Accordion control and drag it onto a top or bottom accordion border.

  2. Release the pointer. A new accordion appears on the below (or above) the existing accordion.

  3. Add a section to an accordion by dragging and dropping a section from the Application Explorer, or using the Section control (Section) . See Harness, Section and Flow Action forms — Adding a section.

Tip Make the desired accordion within a container front-most when you save the harness, as your choice determines which accordion is front-most in the initial runtime presentation. You can change the order by dragging and dropping individual accordions.

To delete an accordion, select it and click the Delete Row icon delete row. Do not use the Delete Cell icon . If this is the only accordion in a group, the container is deleted.

Each accordion within a container has its own properties panel. To access it, select the accordion header to make it active, and click at the top-level header of the wireframe. Each accordion is numbered — the value appears in the header and in the panel. When you select an accordion header, the number changes to match the accordion. For a description of the properties, see Harness form — Adding an accordion.

Note the following:

Up About Flow Actions

Up About Harnesses

Up About Sections