• Use an Injectible Content Container with a ControlBar

Use an Injectible Content Container with a ControlBar

Description

The Injectible Content container allows you to use a list control inside a disclosure that has been displayed inside a control-bar control.

A disclosure containing a list control as injectible content

Disclosures are pop-up windows that contain their own control-bar layout and that can be opened from a control-bar. For example, a user might click on a settings button, in a control-bar, that would open an variety of additional settings buttons and controls. The settings menu that contained all of these options could be built using a disclosure.

Disclosures are in no way limited to simply button controls. Using the Injectible Content container you can add a wide variety on controls to a disclosure; list controls, maps, ink controls, etc. For a visual guide on defining Injectible Content watch this video or follow the guide below.

Define a List Control that Displays CSS Icons

1. In the UX Builder, on the UX Controls page, check the 'Mobile' checkbox on the pages main toolbar.

   

2. Open the 'Data Controls' menu. Click on the [List] option to add a list control to the component. Give the list control the name 'listMenu'.

   

3. Set the 'Width' property to be '100%'.

   
   The 'Fill container' property should NOT be checked. Leaving this unchecked will allow the displayed injectible content to scroll.

4. Click the [...] button next to the 'List Properties' property. The List Builder will open.

   

5. In the List Builder's 'Data Source' pane set the 'Data Source Type' to 'Static'.

   

6. Click the [...] button next to the 'Static data' property in the 'Static Data' section.

   

7. Click the 'Sample data' hyperlink in the lower left-hand corner of the 'Static Choices' dialog.

   

8. Select the 'Sample menu system (uses Font-Awesome Icon Fonts)' option in the 'Sample Data' dialogs menu. Click OK.

   

9. In the 'Static Choices' dialog, highlight the message at the end of the 'Sample menu system (uses Font-Awesome Icon Fonts)' data set. Delete the message, leaving just the data, and click OK.

   

10. Open the 'Fields' pane of the List Builder. Highlight the 'Image' field from the three fields listed in the top left corner of the pane.

    

11. In the 'Client-side' section of the 'Image' field's properties, click the [...] button next to the 'Control type' property and select the 'CSSIcon' option.

    

12. Open the 'List Properties' pane. Scroll down to the 'Layout Properties' section and click the dropdown next to the 'Layout type' property. Select 'Freeform'. This will allow you to define a template in the List Layout.

    

13. Open the List Layout pane. The pane should be displayed as a freeform layout editor.

    

14. Click the 'Pre-defined Templates' hyperlink, to the left of the other hyperlinks displayed at the bottom of the pane.

    

15. Select the [[Level1]] template option from the list of pre-defined templates. Click OK.

    

16. Delete the '[[Level1]]' text that appears inside the template's second <div></div> tag.

    

17. With text cursor still blinking inside the <div></div> tag move the mouse over to the 'Placeholders' menu on the left. Double click on the {Image} placeholder to place it inside the <div> tags.

    

18. Press the space-bar to add a space after the {Image} placeholder.

    

19. Leaving the 'text cursor' on the template, return to the 'Placeholders' list and double click on the {MenuName} placeholder to add it to the template.

    

20. The template should now look like the following. Click OK to exit the List Builder.

    <div style="display: table; width: 100%;">
    	<div style="display: table-cell; vertical-align: middle;">{Image} {MenuName}</div>
    	<div style="display: table-cell; width: 40px; text-align: right; vertical-align: middle;">
    		<img src="{images.dialog.listNav}" />
    	</div>
    </div>

    

21. View the list control in Live Preview.

    

Define the List Control as Injectible Content

1. On the UX Controls page highlight the list control in the controls tree. Open the 'Containers' menu on the left and click on the '[Container]' option.

   

2. From the Container Type list select the 'Injectible Content' option and click 'Insert Around'.

   

3. There should now be an Injectible Content container named 'INJECTIBLE_1' surrounding the list control.

   

Create a Control Bar That Uses the Defined Injectible Content

1. On the UX Controls page highlight the closing injectible content tag, [Injectible Content End:INJECTIBLE_1]]. Open the 'Panels' menu and click on the [Panel Card] option to add a panel card to the component. Click 'Insert After'. This should cause a temporary layout error.

   

2. Highlight both tags in the panel card and click on the blue double 'up' arrow in the UX Controls page's toolbar to move the panel card to the top of the controls tree.

   

3. Highlight the opening panel card tag, [Panel Card:PANELCARD_1].

   

4. With the tag highlighted, open the 'Containers' menu and click on the [Container] option.

   

5. In the 'Container Type' list select the 'PanelHeader' option and then click 'Insert After'. The layout error should dissappear.

   

6. The opening panel header tag should now be highlighted in the controls tree. Open the 'Other Controls' menu and click on the [ControlBar] option to add a control-bar control to the panel header.

   

7. Highlight the control-bar control in the controls tree.

   

8. In the properties list on the right click the [...] button next to the 'ControlBar properties' property. The ControlBar Builder will open.

   

9. In the ControlBar Builder open the 'Disclosures' pane. Click the 'Add Disclosure' button in the lower left-hand corner of the pane. Leave the new disclosure's name as 'Disclosure1' and click OK.

   

10. Click the [...] button next to the 'HTML' property in the 'Disclosure Properties' section on the right,

    

11. In the 'Disclosure' dialog that opens, click the "Insert content from an 'Injectible Container'" hyperlink.

    
    You can add any html that you want to add to the disclosure here. This example, however, will only add a placeholder for the injectible container that contains our list control.

12. Select the 'INJECTIBLE_1' container and click OK. Click OK again to close the disclosure dialog.

    

13. Back in the 'Disclosures' pane go to the 'Events' section for 'Disclosure1' and click the [...] button next to the 'onSize' event.

    

14. Add the following code to the 'onSize' event's definition and click OK.

    var lObj = {dialog.object}.getControl('listMenu');
    $(lObj.contId).style.height = ele.offsetHeight+'px';
    lObj.resize()

    
    The onSize event fires when the disclosure is shown. This code sets the height of the list to the same size as the height of the disclosure.

15. Open the 'ControlBar' builder's 'Items' pane and click the 'Add ControlBar Item' button in the lower left-hand corner.

    

16. Select the 'disclosure-button' radio button option from the 'Item Type' list. Click OK. A disclosure button called 'Disclosurebutton1' should be added to the 'ControlBar Item Name' menu.

    

17. Highlight 'Disclosurebutton1' and go to the 'Disclosure Settings' section on the right of the 'Items' pane. Click the [...] button next to the 'Disclosure name' property.

    

18. Select 'Disclosure1', this is the disclosure that was defined on the 'Disclosures' pane. Click OK.

    

19. Click the [...] button next to the 'Display type' property.

    

20. In the 'Select Disclosure Position' dialog select the 'outside-before' option. Click OK.

    

21. Set the 'Size' property to be '200px'

    

22. Scroll down the ControlBar Item Properties list to the 'Button Settings (Show Disclosure)' section. Click the dropdown next to the 'Button layout' property and select 'Image only'.

    

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

    

24. Select the 'SVG Icon' radio button option and click the 'Select' button.

    

25. Click on the 'alpha-icon-bars' icon in the 'SVG Icon' dialog and click OK and OK again.

    

26. Open the ControlBar Builder's 'ControlBar Layout' pane. Click the 'Add Layout' button. Use the default layout name, 'Layout1', and click OK.

    

27. With 'Layout1' highlighted in the 'Layouts' menu, click the 'Add Line' button in the 'Layout Definition' section on the right.

    

28. In the 'Edit Layout Line' dialog click the 'Add' button under the 'Before' section.

    

29. Select 'Disclosurebutton1' and click OK. Click OK again to close the 'Edit Layout Line' dialog.

    

Allow Clicks on Items in the List to Close the Disclosure

1. Highlight the list control in the controls tree.

   

2. Click on the 'List Properties' property to open the list builder again.

   

3. Open the List Properties pane scroll down to the 'Javascript - Run Time' section. Click the [...] button next to the 'onSelect' event.

   

4. Add the following code to the onSelect definition and click OK.

   var cbObj = {dialog.object}.getControl('CONTROLBAR_1');
   cbObj.hideDisclosure();

   
   This code will close the disclosure when a button in the list is clicked on.

Run the Component

Close the ControlBar Builder and run the component in Live Preview. When you click on the bar icon the disclosure, 'Disclosure1', that contains the injectible content should be displayed.

See Also

• Control Bar