Dynamically Set and Change Buttons in a ControlBar Button-list

Description

You can dynamically set and alter the buttons that appear in a button-list control in a toolbar.

A button to activate is selected from a dropdown and then activated using a 'set' button.

For an explanation on how to dynamically set and change buttons in a control bar follow the guide below, or watch this video.

Create a Button to Dynamically Set Buttons in a ControlBar Button-List

1. In the UX Builder open the UX Controls page. In the toolbar check the 'Mobile' checkbox.

   

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

   

3. Highlight the Panel Card and open the 'Containers' menu. Click on the [Container] option.

   

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

   

5. Highlight the PanelHeader. Open the 'Other Controls' property and click on the [ControlBar] option to add a control-bar to the PanelHeader.

   

6. Highlight the ControlBar. In the properties list on the right click the button next to the 'ControlBar properties' property to open the ControlBar Builder.

   

7. On the ControlBar Builder's 'Items' pane click the 'Add ControlBar Item' button.

   

8. From the 'Item Type' choices select 'button-list' and click OK.

   

9. In the ControlBar Item Properties click the button next to the 'Button-list Settings' property, in the Button-List Settings section.

   

10. Click the 'Add Button' button.

    

11. In the 'HTML' textbox type 'Button 1'. Set the 'Value' to be 'b1' and click OK.

    

12. Click the 'Add Button' button.

    

13. In the 'HTML' textbox type 'Button 2'. Set the 'Value' to be 'b2' and click OK.

    

14. Click the 'Add Button' button.

    

15. In the 'HTML' textbox type 'Button 3'. Set the 'Value' to be 'b3' and click OK.

    

16. In the Button-List Builder's 'Optional' menu set the Variable name to be 'mybuttonlist'. Click OK to close the Button-List Builder.

    

17. In the ControlBar Item Properties list's Button-List Settings section check the 'Fill width' checkbox.

    
    This will cause the buttons that were just added to fill the width of the entire panel header once the ControlBar Layout is defined.

18. Open the 'ControlBar Layout' pane and click the 'Add Layout' button. Use the default name, 'Layout1'.

    

19. Click the Add Line button.

    

20. In the 'Edit Layout Line' dialog click the 'Add' button under the 'Middle' section, select 'Buttonlist1', and click OK.

    

21. Click OK to Close the ControlBar Builder and highlight [PanelHeader End: PANELHEADER_1]. Open the 'Other Controls' menu and click on [Button] to add a button control underneath the Panel Header.

    

22. In the properties list's Button Properties' section set the 'Button text' property to read 'Set Button-list Selection'.

    

23. Scroll down to the 'Javascript - (Touch, Mouse, Pointer Events) section. Click the button next to the 'click' property.

    

24. From the Editing mode options check the 'Text mode' radio button. Add the following javascript and click Save:

    var cb = {dialog.object}.getControl('CONTROLBAR_1')
    
    var path = 'mybuttonlist.value'
    var val = [{dialog.object}.getValue('dd1')];
    
    cb.update(path,val);

    

25. Open the Data Controls menu and select the [DropdownBox] option to add a dropdown box control to the component. Name the dropdown box 'dd1'.

    

26. Highlight the dropdown box. In the properties list click the button next to the 'Choices' property in the DropDownBox Properties section.

    

27. In the 'Choices are:' menu check the 'Static' option. Add the following choices, each separated by a line.

    b1
    b2
    b3

    

28. Run the component in Live Preview. Click the dropdown box and select one of the values.

    

29. Now click the 'Set Button-list Selection' button. The value in the dropdown should determine which button is active.

    

Add a Button to Change the Buttons in the ControlBar Button List.

1. Highlight the dropdown control. Open the Other Controls menu and click on [Button] to add a button to the component.

   

2. In the properties list under 'Button Properties', change the 'Button text' to read "Change the Button-list".

   

3. Scroll down to the Javascript - (Touch, Mouse, Pointer Events) section. Click the button next to the 'click' event.

   

4. Select the 'Text mode' option and add the following javascript function call to the click event and hit 'Save'.

   setButtonListData();

   

5. In the Main menu open the Code Javascript Page.

   

6. Define the setButtonListData() function by adding the following code to the Javascript Functions page:

   function setButtonListData() {
   
       var newData = [
           {
               "html": "NewButton1",
               "icon": "",
               "value": "nbl"
           },
           {
               "html": "NewButton2",
               "icon": "",
               "value": "nb2"
           
           }
       ];
   
       var cb = {dialog.object}.getControl('CONTROLBAR_1');
       cb.update('mybuttonlist.data',newData);
   
   }

   

7. Run the component in Live Preview.

   

8. Click the "Change the Button-list" button. The buttons in the control bar's button list should change.

   

Add a Button to return to the Original Button values.

1. On the UX Controls page and highlight the 'Change the Button-list' button.

   

2. Open the 'Other Controls' menu and click the [Button] option to add another button to the component.

   

3. In the properties list set the button's 'Button text' property to read 'Original Button-list'.

   

4. Scroll down the properties list to the 'Javascript - (Touch, Mouse, Pointer Events) section. Click the button next to the 'click' property.

   

5. Select the 'Text mode' option, add the following javascript function call, and click Save.

   originalButtonList();

   

6. In the Main menu open the Code Javascript functions page. Under the existing setButtonListData() function that you defined add the following code to define originalButtonList():

   function originalButtonList() {
   
       var newData = [
           {
               "html": "Button 1",
               "icon": "",
               "value": "b1"
           },
           {
               "html": "Button 2",
               "icon": "",
               "value": "b2"
           },
           {
               "html": "Button 3",
               "icon": "",
               "value": "b3"
           }
       ];
   
       var cb = {dialog.object}.getControl('CONTROLBAR_1');
       cb.update('mybuttonlist.data',newData);
   
   }

   

7. Run the component in Live Preview. Click the "Change the Button-list" button to alter the button-list.

   

8. Now click the "Original Button-list" button to show the original state of the button-list.

   

Videos

Setting the Selected Button in a Button List using Javascript

The selected button(s) in a ControlBar Button List can be set programmatically using Javascript. It is also possible to completely change the buttons shown in a Button List programmatically.

In this video we show how this is done.

• Watch Video

Download Component