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.


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.

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



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


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.


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.



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.

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