Dynamically Hide or Show and Enable or Disable Buttons in a Button-list
Description
You can use Javascript to dynamically hide or show and enable or disable buttons in a Button List control. You can also dynamically add and remove buttons from the Button List.
This process is described in this video, as well as the guide below. You can also download the component here.
Create a Button List Control and a Drop-down Control
In the UX Builder, on the UX Controls page, open the 'Data Controls' menu. Click on the [Button List] option to add a button list control to the component. Give the control the name 'b1' and leave the label blank.
Highlight the control in the controls tree. In the 'Button List Properties' section, on the right, click the dropdown button next to the 'Method for defining buttons' property and select the 'StaticJSON' option.
This is not the only way to define buttons that can be manipulated dynamically, just the method choosen for this example.Click the [...] button next to the 'Static JSON' property.
In the 'Button List - JSON Data' dialog add the following JSON and click OK.
[ {html: 'Button 1', value: 'b1', tip: 'Help for button 1'}, {html: 'Button 2', value: 'b2', tip: 'Help for button 2'}, {html: 'Button 3', value: 'b3', tip: 'Help for button 3'}, {html: 'Button 4', value: 'b4', tip: 'Help for button 4'}, {html: 'Button 5', value: 'b5', tip: 'Help for button 5'}, {html: 'Button 6', value: 'b6', tip: 'Help for button 6'} ]
Return to the 'Data Controls' menu, on the left, and click on the [DropdownBox] option. Give the drop-down box the name and label 'buttonValue'
Highlight the drop-down box control in the controls tree. Scroll down the properties list to the 'DropDownBox Properties' section and click the [...] button next to the 'Choices' property.
Check the 'Static' option in the 'Choices are' menu. Add the following choices to the static choices definition area. Click OK.
b1 b2 b3 b4 b5 b6
Open the 'Other Controls' menu and click on the [Button] option to add a button control to the component.
Highlight the button control in the controls tree. In the properties list set the 'Button text' property to be 'Hide button'.
Scroll down the properties list to the 'Javascript - (Touch, Mouse. Pointer Events) section. Click the [...] button next to the 'click' property.
In the Edit Click Event dialog select the 'Text mode' radio button in the 'Editing mode' menu. Add the following code to the event definition and click 'Save'.
var bId = {dialog.object}.getValue('buttonValue'); var bEle = {dialog.object}.getControl('b1'); bEle.setDisplay(bId,false);
Return to the 'Other Controls' menu and click on the [Button] option again to add a second button.
Highlight the new button in the controls tree. In the properties list set the 'Static text' property of the button to read 'Show button'.
Scroll down to the 'Javascript - (Touch, Mouse. Pointer Events)' section and click the [...] button next to the 'click' property.
Select the 'Text mode' radio button and add the following javascript to the event definition. Click 'Save'.
var bId = {dialog.object}.getValue('buttonValue'); var bEle = {dialog.object}.getControl('b1'); bEle.setDisplay(bId,true);
Run the component in Live Preview. Select a button value from the dropdown list and click the 'Hide button' button
The button with the corresponding value in the button list control should disappear. Set the dropdown to the hidden button's value and click the 'Show button' button to make the hidden button reappear.
Disable and Enable Buttons
On the UX Controls page open the [Other Controls] menu and click on the [Button] option to add another button control to the bottom of the controls tree.
In the properties list set the button's 'Static text' property to read 'Disable button'.
Scroll down to the Javascript - (Touch, Mouse. Pointer Events)' section and click the [...] button next to the 'click' property.
In the 'Edit Click Event' dialog select the 'Text mode' radio button option and add the following javascript to the 'Edit Click Event' definition. Click 'Save'.
var bId = {dialog.object}.getValue('buttonValue'); var bEle = {dialog.object}.getControl('b1'); bEle.setDisabled(bId,true);
Return to the 'Other Controls' section and click on the [Button] option again to add a forth button to the component.
Change the 'Static text' property for the button to 'Enable button'.
Scroll down to the Javascript - (Touch, Mouse. Pointer Events)' section and click the [...] button next to the 'click' property.
Select the 'Text mode' radio button and add the following javascript to the event definition. Click 'Save'.
var bId = {dialog.object}.getValue('buttonValue'); var bEle = {dialog.object}.getControl('b1'); bEle.setDisabled(bId,false);
Run the component in Live Preview. Select a button value from the dropdown list and click the 'Disable button' button.
The button with the corresponding value in the button-list should appear disabled. Use the same value setting in the dropdown and click on the 'Enable button' button to re-enable it.
Add Buttons
On the UX Controls page open the 'Other Controls' menu and click on the [Button] option a button to the component.
Highlight the button and change its 'Static text' property to be 'Add buttons'.
Scroll down to the 'Javascript - (Touch, Mouse, Pointer Events)' section and click the [...] button next to the 'click' property.
In the 'Edit Click Event' dialog select the 'Text mode' radio button option. Add the following code to the event definition and click 'Save'.
var _new = [ {html: 'New Button 1', value: 'nb1', tip: 'Help for new button 1'}, {html: 'New Button 2', value: 'nb2', tip: 'Help for new button 2'}, ] var bEle = {dialog.object}.getControl('b1'); bEle.appendButtons(_new);
Run the component in Live Preview. Click on the 'Add buttons' option and the new buttons should be added to the end of the button list control.
