Applies to: GUI Design Studio Professional edition, all versions
I would like to make an element change its enabled state according to the state of one or more other control elements in the interface.
Many elements now allow their enabled state to be set according to some expression or condition. We use the Enabled Condition property to enable and disable controls based on the value of variables assigned to other control elements.
To illustrate the concept, this simple example enables a group of controls based on the state of a single Check Box:
Here's how to create this simple design. In this design, our aim is to enable all elements within a group when a Group Check Box is selected, and disable the elements when it is not selected. To do this, follow the simple steps below:
1. Add a Dialog element onto your workspace from the "Windows and Dialogs" category on the Elements panel.
2. Drag and drop a Group Box element inside the Dialog
3. Double-click the Group Box to edit the Group Box Properties. Replace the default "Group Box" text with spaces to allow space for the Check Box we will add next.
4. Next, select the "Options" category on the Elements Panel and drag and drop a Checked Box
5. Double-click the Check Box to open its Check Box Properties. On the Check Box tab, change the Label to "Group" (without the quotations). On the Prototype tab, for Variable Name type "GroupEnabled" without the quotations. This is the control variable we will use later in a conditional expression. Click "OK".
6. Add other elements like an Edit Box, Unchecked Box, and Button inside the Group Box making sure they do not leak outside the Group Box area:
The next steps depend on what version of GUI Design Studio Professional you are using.
Note: GUI Design Studio Professional v4 users can get a free upgrade to the latest v4.x version.
GUI Design Studio Professional v4.1 and lower
For these versions of GUI Design Studio Professional, we will add an Enabled Condition to every control we want to affect.
1. Double-click the Edit Box to open the Edit Box Properties. Go to the Prototype tab and type "GroupEnabled" in the Enabled Condition field. This will enable the control when the value of "GroupEnabled" is true, in other words, when the "Group" Check Box is checked. Click "OK" to close the property editor.
2. Do the same for the Unchecked Box and the Button elements.
3. Run the prototype and test your design.
GUI Design Studio Professional v4.2 and higher
In version 4.2, the Enabled and Visible conditions are automatically applied to all contained (child) elements so there's no need to set up the conditions for every element.
1. Double-click on Group Box element to open its Group Box Properties. In the Prototype tab, type "GroupEnabled" in the Enabled Condition field. Click "OK" to close the property editor.
2. Your design should now look as simple as the image below. Run the prototype and test your design.