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.

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

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

    images/ic2.png
  3. Set the 'Width' property to be '100%'.

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

    images/ic5.png
  5. In the List Builder's 'Data Source' pane set the 'Data Source Type' to 'Static'.

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

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

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

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

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

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

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

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

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

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

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

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

    images/ic18.png
  18. Press the space-bar to add a space after the {Image} placeholder.

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

    images/ic20.png
  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>
    images/ic21.png
  21. View the list control in Live Preview.

    images/ic22.png

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.

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

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

    images/ic25.png

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.

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

    images/ic27.png
  3. Highlight the opening panel card tag, [Panel Card:PANELCARD_1].

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

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

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

    images/ic31.png
  7. Highlight the control-bar control in the controls tree.

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

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

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

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

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

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

    images/ic38.png
  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()
    images/ic39.png
    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.

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

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

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

    images/ic43.png
  19. Click the [...] button next to the 'Display type' property.

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

    images/ic45.png
  21. Set the 'Size' property to be '200px'

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

    images/ic47.png
  23. Click the [...] button next to the 'Icon' property.

    images/ic48.png
  24. Select the 'SVG Icon' radio button option and click the 'Select' button.

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

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

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

    images/ic52.png
  28. In the 'Edit Layout Line' dialog click the 'Add' button under the 'Before' section.

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

    images/ic54.png

Allow Clicks on Items in the List to Close the Disclosure

  1. Highlight the list control in the controls tree.

    images/ic55.png
  2. Click on the 'List Properties' property to open the list builder again.

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

    images/ic57.png
  4. Add the following code to the onSelect definition and click OK.

    var cbObj = {dialog.object}.getControl('CONTROLBAR_1');
    cbObj.hideDisclosure();
    images/ic58.png
    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.

images/ic59.png

See Also