Making Screen Content Collapsible

Enable users to expand and collapse screen elements.

By default, content in a Collapsible control is initially hidden. The application user can expand the control and show the content by clicking the plus sign icon beside it. To hide the content again, the user clicks the same icon (now changed to a minus sign). Collapsible controls can be useful for simplifying the initial screen, while giving the user control over what content to show.

An Accordion control enables you to associate two or more Collapsible controls. By default, only one Collapsible control in the group is expanded at a time: if the user expands one Collapsible control, all the others in the Accordion control are collapsed.

Note: Accordion and Collapsible controls are not supported in Windows Mobile devices: their content is static, not collapsible.
  1. In the Designer, open the Travel Request screen.

    Travel Request initial screen design
  2. In the Screen Design Palette, click Accordion. Then click in a blank area of the Travel Request screen to add the control.

    Travel Request added accordion control
  3. Add a Collapsible control to the Accordion:
    1. In the Screen Design Palette, click Collapsible.
    2. Click in the Accordion control.
    3. In Collapsible properties, enter Basic Information as the Label.

      Travel Request collapsible label property
  4. Repeat the previous step to add a second Collapsible control below the first one, specifying the label More Information.
    Because both Collapsible controls are in the same Accordion control, the application user can expand either one, but not both at the same time.
    Travel Request screen collapsibles
  5. Move the Trvl Date, Trvl Loc, and Est Cost controls from the main part of the screen to the Basic Information control.
    For example, select the three controls and press Ctrl+X to cut them, then select the Basic Information control and press Ctrl+V to paste them.
  6. Repeat the previous step to move the Purpose, Status, and Comment controls to the More Information Collapsible.

    Travel Request screen collapsibles
  7. Press Ctrl+S to save the screen design.
Related tasks
Creating a New Screenflow
Customizing the Module Display Name and Client Icon
Adding the Travel Request Screen
Modifying Menu Text and Adding a Key