Displaying Form Sections with Side Menus

Overview 

Functioning similarly to Tab Containers, Side Menu Containers provide another method of organizing and displaying other Forms components for complex Forms.

Designers create list capable of containing more selection choices than Tab Containers while maintaining equal visual clarity. Furthermore, side menus incorporate columns which a Designer may find more aesthetically pleasing to their build. Icons may be selected for each menu item for further personal flair. 

Forms intending to house large sets of data may benefit from utilizing this component. 

Configuration

The Side Menu Container configuration mirrors a Tab Container. In fact, the default name of a Side Menu Container is 'TabContainer'. For best organization practices, always ensure to rename this and any other Form components.

Under the Layout section, a Designer may create, edit, delete, or rearrange tabs listed the Side Menu. Furthermore, the Designer may choose an icon for the tab appearing before the text as demonstrated below. A Designer may choose an icon from several images from the built-in library or upload an image via URL or direct file upload.

Checking the Default Tab From Data Name checkbox allows the Designer to configure the default displayed tab based on the chosen Data Name. A Default Tab Data Name textbox will appear prompting the Designer to enter the Data Name to become the default tab.

Leaving this unchecked will otherwise allow the Designer to select the default tab via a dropdown list populated by existing tabs. 

The Headers Placement dropdown list configures where the side menu's orientation on the Form. By default this is set to 'Left' to present the component into two columns, but selecting 'Top' changes the look to resemble that of a Header Container. 

Finally, if the Designer wishes to edit the text formatting of the Tabs themselves, they must navigate to Properties > View. CSS offers the most flexibility of customization while basic text changes and resizing may be done by unchecking the Use Form Font checkbox and selecting the pencil icon.

Example

This following example Form demonstrates a Side Menu Container containing a list of Form sections such as Personal, Shipping, and Company Information as well as an Items To Order section containing a Data Repeater.

1. Create a new Form, name it, and open it in the Form Designer.
2. Click Select Input Data above the workspace and configure it to match the screenshot below. These data members will be used in the Data Repeater.
   
3. For this example, select the center Grid and ensure there is only one column and row set to Resize marked by an asterisk.
   
   
4. Search for the Side Menu Container in the Toolbox or locate it under the Layouts category. Drag it into the center Grid workspace and select it to open its Properties.
5. Edit the tabs so there are four tabs named Personal Information, Shipping Information, Company Information, and Items To Order. Select appropriate icons for the tabs.
6. Set the default tab to Personal Information.
7. Configure the Personal, Shipping, and Company Information tabs to match the below GIF.
   
   
8. Finally, open the Items to Order tab. Add a Data Repeater Add and Remove Buttons and then add the Data Repeater itself.
   
   
   The following Data Repeater configuration is highly condensed for the sake of the Side Menu example.

   If wishing to learn more about Data Repeaters, please refer to our Creating Data Repeaters and other related articles.
   
   
9. Select the Data Repeater to open its Properties. Select Pick or Create Source and select CREATE > Repeater Control and name the Repeater before clicking CREATE again.
10. The Data Repeater will automatically open in the Form Designer. Configure the Data Repeater to mirror the screenshot below with Label, Textbox, Number Spinner, and Currency Box components.
     
11. Save and exit the Data Repeater Form Designer to return to main Form.
12. Back in the Data Repeater's Properties, ensure the Add and Remove buttons are mapped under Input Data. Forgetting this will not allow the end user to use the Data Repeater.
13. Save and exit the Form.
14. Create and name a new Flow. Open it in the Flow Designer.
15. Add a Show Form step and select PICK OR CREATE FORM in its Properties. Pick the Form containing the Side Menu Container.
16. Connect the Form to the Start and End Steps.
17. Save the Flow.

Debugging

1. From the Flow Designer, select Debug from the orange Action Bar. 
2. Select START DEBUGGING.
3. In the debugger, the Form will appear with the designated Side Menu tabs available for navigation.