Making Page Sections Collapsible and Expandable

Last Updated: 08/16/2016 Introduced in Verision: 2.0

Page controls can be hidden and displayed in collapsible sections by placing them within collapsible Container components.

Example

Our example form will contain four vertically-stacked sections each of which can be expanded or collapsed using the Expand / Collapse link at the bottom of the section.
 expand
 

We’ll begin in our Designer Folder, by clicking the Create Page button at the bottom of the screen.

createPage

 

In the New Page pop-up, we’ll name our new form and click OK to open it in the Page Designer.

namePage

Remember, by default the Page Designer contains two columns. For this example we will use one column. To delete the second column click on the Explorer tab to the right of the screen. Expand Surface and click on Root Container.  Next click on the Properties tab and delete the first column attribute. 
 
Page Sections 1
 
In the Page Designer, we will begin creating our form by going to the Toolbox panel, expanding the Containers category and dragging a Vertical Stack component to the workspace. Components placed within this component will be organized from top to bottom and fill the width of the Vertical Stack.
 Page Sections 2
 

Next, we’ll place our first Header Container component in the workspace.

In the Properties panel, under the Settings section, select the Is collapsed checkbox to make this section collapsed by default.
 

headerComponents 

Next, we’ll place three more Header Container components in the workspace.

This completes our form, so we will save it and close the Form Designer.

Back in the portal, we will test our example flow by selecting the Form Containers thumbnail and clicking the Action link. In the Action menu, we will select Preview Page.

previewPage

 

In the resulting pop-up, we’re presented with our form.

When we hover our cursor over the sections, a tab containing a Expand link will appear under the bottom-right corner. To Expand this section, we will click the Expand link.
 expand
 

When we hover our cursor over the header of the fourth (collapsed) section, a tab containing an Expand link will appear under the bottom-right corner. To expand this section, we will click the Expand link.

This expands or Collapses the section, revealing or hides whatever components were added in the Form Designer.

Additional Resources