Using Disclosures

Description

Disclosures are popup windows that come with their own ControlBar layout. They can be used to create ControlBars that cascade, where pressing one button will bring up an new layout with additional buttons. All of this can be easily accomplished within one ControlBar control.

A disclosure button, top right, that opens a layout with four icon buttons

For further instruction on how to use disclosures in a ControlBar follow the guide below or watch this video:

Showing a Disclosure

A disclosure can be some explicitly defined HTML, or it can be another Layout. In the video, we first show how a disclosure, defined as a ControlBar layout, is shown.

One of the more unusual disclosure types is Outside-After (and Outside-Before) which display the disclosure perpendicular to the parent Layout. In the second half of the video, we show how the disclosure is rendered when the Outside-After type is selected.

• Watch Video

Download Component

Add a ControlBar to a Component

1. In the UX Builder open the Properties page. Click on the [...] button next to the 'Style name' property in the UX Properties section.

   

2. From the Location menu select 'System' and from the list of avialable styles select 'Alpha'. Click OK.

   
   This step is not absolutely necessary but it will give you access to the built-in SVG icons used later in the guide.

3. Open the UX Controls page. In the Controls page toolbar check the 'Mobile' checkbox.

   

4. Open the 'Panels' menu and select the [Panel Card] option to add a Panel Card to the component.

   

5. Highlight the Panel Card. Open the 'Containers' menu and click on [Container]

   

6. From the Container Type list select the PanelHeader option and click the 'Insert After' button.

   

7. Highlight the PanelHeader. Open the 'Other Controls' menu and click on [ControlBar] to add a ControlBar to the panel header.

   

8. The component tree should now look like this:

   

Add a Disclosure to the ControlBar

1. Highlight the ControlBar control. In the properties list on the right click on the [...] button next to the 'ControlBar properties' property to open the ControlBar Builder.

   

2. Open the ControlBar Builder's 'Items' pane and click the 'Add ControlBar Item' button.

   

3. From the Item Type choices select the 'disclosure-button' option and click OK.

   

4. Scroll down the ControlBar Item Properties section on the right to the Button Settings section. For the 'Button layout' property select 'Image only'.

   

5. Click the [...] button next to the 'Icon' property.

   

6. In the 'Specify Image' dialog select the 'SVG Icon' option and click 'Select'.

   

7. Select the 'bars' icon and click OK and OK again.

   

8. Click the 'Add ControlBar Item' button again.

   

9. Select 'button' from the Item Type choices.

   

10. Scroll down the ControlBar Item Properties for the button item to the Button Settings section. Set the 'Button layout' property for the button to 'Image only'.

    

11. Again click the [...] button next to the 'Icon' property. Select the SVG Icon option and click 'Select'.

    

12. Select an icon and click OK and OK again. This example uses the lockOpen icon.

    

13. Click the 'Add ControlBar Item' button again and add a second button.

    

14. Set the 'Button layout' property for the second button to 'Image only' and click the [...] button next to the 'Icon' property.

    

15. Choose the 'SVG Icon' option again and click 'Select'. Choose an icon to use with this button. Click OK and OK again.

    

16. Click the 'Add ControlBar Item' button and add a third button item to the 'Items' pane.

    

17. Again select 'Image only' for the 'Button layout' property and add a third SVG Icon for the 'Icon' property.

    

18. Finally, add a forth 'button' item to the list.

    

19. Give this button a SVG icon using the 'Button layout' and 'Icon' properties.

    

20. Open the 'ControlBar Layout' pane and click the 'Add Layout' button. Give this layout the name 'Main'.

    

21. Highlight the layout and click the 'Add Line' button.

    

22. Click the 'Add' button in the 'After' section of the Edit Layout Line dialog. Select the 'Disclosurebutton1' Item.

    

23. Click the 'Add Layout' button again to add a second layout. Name this layout 'Submenu'.

    

24. Highlight the 'Submenu' layout and click the 'Add Line' button.

    

25. In the Edit Layout Line dialog click the 'Add' button under the 'Before' section. Highlight the 'Button1' item and click OK.

    

26. Click the 'Add' button under the 'Before' section again and add 'Button2' to the section.

    

27. Click the 'Add' button under the 'Before' section again and add 'Button3' to the section.

    

28. Click the 'Add' button under the 'Before' section again and add 'Button4' to the section.

    

29. Open the 'Items' menu and highlight the 'Disclosurebutton1' item.

    

30. In the 'ControlBar Item Properties' list under 'Disclosure Settings' click the [...] button next to the 'Disclosure name' property.

    

31. Select the 'layout:Submenu' option.

    

32. Click the [...] button next to the 'Display' type property. Select the 'extend' option and click OK and OK again to close the ControlBar Builder.

    
    This property specifies where the 'Sublayout' will appear on the screen.

33. Run the Component in Live Preview.

    

34. Click on the 'bars' icon, i.e. hamburger, and the Sublayout should appear underneath the disclosure button.