Example 3: Using Combobox Controls

Using a Value to Show or Hide Additional Options

Using a Value to Enable or Disable Additional Options

Using a Value to Set the Value of Another Option

Using a Value to Show or Hide Additional Options

In the Advanced task if you select the Show/Hide Options radio button, the values in the combobox control are determined by these lines of code:

<Option name="comboShowChange" defaultValue="valueShowColor" inputType="combobox"
   width="100%">Combobox:</Option>
<Option name="valueShowColor" inputType="string">Show a color selector</Option>
<Option name="valueShowDate inputType="string">Show a date picker</Option>
<Option name="valueShowSlider" inputType="string">Show a slider control</Option>

Here is how these options appear in the user interface:

If you select Show a color selector from the combobox control, the conditions for this dependency are met:

<Dependency condition="$comboShowChange == 'valueShowColor'">
   <Target action="show" conditionResult="true" option="colorControl"/>
   <Target action="hide" conditionResult"="true" option="dateControl"/>
   <Target action="hide" conditionResult="true" option="sliderControl"/>
</Dependency>

As a result, the Color control (named colorControl in the XML code) appears in the user interface. (According to the conditions defined in the dependency, the date picker and slider controls are hidden.) Here is the XML code for the colorControl. The defaultValue attribute specifies that red is selected in the color control by default.

<Option name="colorControl" defaultValue="red" inputType="color">
   Choose a color</Option>

If you select Show a date picker from the combobox control, the conditions for this dependency are met:

<Dependency condition="$comboShowChange == 'valueShowDate'">
   <Target action="hide" conditionResult="true" option="colorControl"/>
   <Target action="show" conditionResult"="true" option="dateControl"/>
   <Target action="hide" conditionResult="true" option="sliderControl"/>
</Dependency>

The date picker control appears in the user interface.

<Option name="dateControl" inputType="datepicker" format="monyy7.">
   Choose a date:</Option>

Date Picker Control in the User Interface

Using a Value to Enable or Disable Additional Options

This example is similar to using a value to show or hide options. However, in this case, the options are already visible in the user interface. Selecting a value from the combobox control enables these additional options, so the user can set these options.

In the Advanced task if you select the Enable/Disable Options radio button, the values in the combobox are determined by these lines of code:

<Option name="comboEnableChange" defaultValue="valueEnableColor"
   inputType="combobox" width="100%">Combobox:</Option>
<Option name="valueEnableColor" inputType="string">Enable the color
   selector</Option>
<Option name="valueEnableDate" inputType="string">Enable the date picker</Option>
<Option name="valueEnableSlider" inputType="string">Enable the slider
   control</Option>

The dependency code for the Enable/Disable Options radio button (referred to as radioEnableDisable in the XML) shows that when this radio button is selected, five options (labelEnableChange, comboEnableChange, colorControl, dateControl, and sliderControl) appear in the user interface:

Here is the dependency code:

<Dependency condition="$radioChoice == 'radioEnableDisable'">
   <Target action="show" conditionResult="true" option="labelEnableChange"/>
   <Target action="show" conditionResult="true" option="comboEnableChange"/>
   <Target action="hide" conditionResult="true" option="labelShowChange"/>
   <Target action="hide" conditionResult="true" option="comboShowChange"/>
   <Target action="show" conditionResult="true" option="colorControl"/>
   <Target action="show" conditionResult="true" option="dateControl"/>
   <Target action="show" conditionResult="true" option="sliderControl"/>

   <Target action="hide" conditionResult="true" option="labelShowSet"/>
   <Target action="hide" conditionResult="true" option="comboSetChange"/>
   <Target action="hide" conditionResult="true" option="checkboxCheckUncheck"/>
</Dependency>

Here is the resulting user interface:

Example of Disabled Options in the User Interface

The user interface shows the colorControl (labeled Choose a color), the dateControl (labeled Choose a date), and the sliderControl (labeled Slider with buttons) options. However, only the Choose a color option is enabled because Enable the color selector option is selected in the Combobox control, which means this dependency code is met:

<Dependency condition="$comboEnableChange == 'valueEnableColor'">
   <Target sction="enable" conditionResult="true" option="colorControl"/>
   <Target action="disable" conditionResult="true" option="dateControl"/>
   <Target action="disable" conditionResult="true" option="sliderControl"/>
</Dependency>

If you select Enable the date picker from the combobox control, the conditions for this dependency are met:

<Dependency condition="$comboShowChange == 'valueShowDate'">
   <Target action="disabel" conditionResult="true" option="colorControl"/>
   <Target action="enable" conditionResult"="true" option="dateControl"/>
   <Target action="disable" conditionResult="true" option="sliderControl"/>
</Dependency>

The date picker control is enabled in the user interface.

<Option name="dateControl" inputType="datepicker" format="monyy7.">
   Choose a date:</Option>

The color and slider controls are still visible in the user interface, but they are disabled.

Using a Value to Set the Value of Another Option

In the Advanced task if you select the Set Value radio button, the values in the combobox are determined by these lines of code:

<Option name="comboSetChange" defaultValue="valueSetCheck" inputType="combobox"
   width="100%">Combobox:</Option>
<Option name="valueSetCheck" inputType="string">Check the checkbox</Option>
<Option name="valueSetUncheck" inputType="string">Uncheck the checkbox</Option>

The code also defines the Checkbox check box. Because the defaultValue attribute is set to 1 for the checkboxCheckUncheck control, this check box is selected by default.

<Option name="checkboxCheckUncheck" inputType="checkbox" defaultValue="1">
   Checkbox</Option>

When the Check the checkbox option is selected for the combobox control, this dependency is met:

<Dependency condition="$comboSetChange == 'valueSetCheck'">
   <Target action="set" conditionResult="true" option="checkboxCheckUncheck"
      property="value" value="1"/>
   <Target action="set" conditionResult="false" option="checkboxCheckUncheck"
      property="value" value="0"/>
</Dependency>

As a result, the Checkbox option is selected in the user interface. If you select the Uncheck the checkbox option from the combobox control, the conditionResult is false, and the Checkbox option is not selected.