Enable or Disable a Button

IN THIS PAGE

Javascript
Enable/Disable Button
Create a Button that Loads an Image
Create Buttons to Enable or Disable a Button

Description

Set a button's state to either enabled, or disabled.

The 'Enable or Disable a Button' action is used with the UX component. The action requires that you specify two properties. These properties specify which button you want to alter the state of and whether that button should be enabled or disabled.

Javascript

For example, the Javascript for disabling a button named BUTTON_1 looks like this:

var btn = {dialog.object}.getControl('BUTTON_1');
btn.setDisabled(true);

To enable the same button the javascript looks like this.

var btn = {dialog.object}.getControl('BUTTON_1');
btn.setDisabled(false);

Enable/Disable Button

Button: Specify the id of the Button to enable or disable.
Mode: Specify if you want to enable or disable the button

Create a Button that Loads an Image

In order to demonstrate whether a button is enabled or disabled, we will first create a button that does something.

In the UX Builder on the UX Controls page open the 'Other Controls' menu. Click on the [Static Text] option.
Highlight the Static Text control in the controls tree. In the properties list on the right set the 'Static text' property to be the following image tag:
```
<img id="myid"/>
```
Open the 'Other Controls' menu and click on [Button] to add a button control to the component.
Highlight the button. In the properties list on the right set the 'Button text' property to read 'Set Image'.
Click the [...] button next to the 'click' property in the 'Javascript - (Touch, Mouse, Pointer Events)' section.
In the Edit Click Event dialog select the 'Action Javascript' radio button and click the 'Add New Action' button.
Type 'image' into the Filter list and select the 'Image Capture - Camera/Photo Library' option. Click OK.
In the Image Capture Properties dialog click the [...] button next to ththe 'Javascript to execute when image has been captured' property.
Add the following code to the onImageCapture definition. Click OK, OK, and Save.
```
$('myid').src = e.data;
```

Create Buttons to Enable or Disable a Button

Open the 'Other Controls' menu and click on the [Button] control option.
Highlight the new button in the controls list. Set the 'Button text' property to read 'Disable'.
In the 'Javascript - (Touch, Mouse, Pointer Events)' section click the [...] button next to the 'click' property.
Select the 'Action Javascript' radio button and click the 'Add New Action' button.
Type 'button' into the 'Filter list'. Highlight the 'Enable or Disable a Button' and click OK.
In the Enable/Disable Button dialog set the 'Button' property to be the button that was defined in the section above, 'BUTTON_1'.
Set the Mode property to 'Disable' and click OK.
Click the [Button] control option in the 'Other Controls' menu again.
Highlight the new button control. Set the 'Button text' property to read 'Enable'.
Click the [...] button next to the 'click' property in the 'Javascript -(Touch, Mouse, Pointer Events)' section.
Select the 'Action Javascript' radio button and click the 'Add New Action' button.
Type 'button' into the 'Filter list', highlight the 'Enable or Disable a Button' action in the action list, and click OK.
In the Enable/Disable Button dialog again set the 'Button' property to be the button defined in the first section, 'BUTTON_1'
Set the 'Mode' property to be 'Enable'. Click OK and Save.
Run the component in Live Preview. Click on the 'Set Image' button. Choose an image to display.
Click the 'Disable' button. The Set Image button should now be disabled preventing you from clicking on it and changing the image.
Click the 'Enable' button. The Set Image button should now be enabled, allowing you to select a new image.