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.

images/dis43.png
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.

Download Component

2016-09-14

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.

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

    images/dis2.png
    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.

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

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

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

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

    images/dis7.png
  8. The component tree should now look like this:

    images/dis8.png

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.

    images/dis9.png
  2. Open the ControlBar Builder's 'Items' pane and click the 'Add ControlBar Item' button.

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

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

    images/dis13.png
  5. Click the [...] button next to the 'Icon' property.

    images/dis14.png
  6. In the 'Specify Image' dialog select the 'SVG Icon' option and click 'Select'.

    images/dis15.png
  7. Select the 'bars' icon and click OK and OK again.

    images/dis16.png
  8. Click the 'Add ControlBar Item' button again.

    images/dis17.png
  9. Select 'button' from the Item Type choices.

    images/dis18.png
  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'.

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

    images/dis20.png
  12. Select an icon and click OK and OK again. This example uses the lockOpen icon.

    images/dis21.png
  13. Click the 'Add ControlBar Item' button again and add a second button.

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

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

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

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

    images/dis26.png
  18. Finally, add a forth 'button' item to the list.

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

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

    images/dis29.png
  21. Highlight the layout and click the 'Add Line' button.

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

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

    images/dis32.png
  24. Highlight the 'Submenu' layout and click the 'Add Line' button.

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

    images/dis34.png
  26. Click the 'Add' button under the 'Before' section again and add 'Button2' to the section.

    images/dis35.png
  27. Click the 'Add' button under the 'Before' section again and add 'Button3' to the section.

    images/dis36.png
  28. Click the 'Add' button under the 'Before' section again and add 'Button4' to the section.

    images/dis37.png
  29. Open the 'Items' menu and highlight the 'Disclosurebutton1' item.

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

    images/dis39.png
  31. Select the 'layout:Submenu' option.

    images/dis40.png
  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.

    images/dis41.png
    This property specifies where the 'Sublayout' will appear on the screen.
  33. Run the Component in Live Preview.

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

    images/dis43.png