Selection widgets

Selection widgets display a list of text values among which the user needs to select one (single selection) or more (multiselection). The values displayed by these widgets can be changed and may come from different data sources:

When a Selection widget is created it shows a list of fixed values. To change the data source of a Selection widget, select the widget on the page and click on 'Edit values' below 'Value' in the Properties panel. Select the data source Fixed Values, Data Master Field or Data Master in the dialog. Notice that you need first to create a Data Master in order to use it (or its fields) as data source.

Editing fixed values

  1. Select the widget and click on 'Edit value' in the Properties panel, below the 'Value' attribute. A dialog will appear.

  2. Click on the radio button Fixed Values.

  3. Edit the fixed values through the editor on the right.

Getting values from a Data Master Field

  1. Select the widget and click on 'Edit values' in the Properties panel, below the 'Value' attribute. A dialog will appear.

  2. Click on the radio button Data Master Field. Notice that this option will be only enabled if there is any Data Master with Category or Multicategory fields.

  3. Select the field you want to use on the list.

Getting values from a Data Master

  1. Select the widget and click on 'Edit values' in the Properties panel, below the 'Value' attribute. A dialog will appear.

  2. Click on the radio button Data Master. Notice that this option will only be enabled if there is any Data Master created.

  3. Select the Data Master you want to use on the list.

List Box

A multiple text line widget that displays a list of ordered values. This single selection widget has the particularity that when one of its values is selected all the others remain unselected.

Setting default selection

To set one of its values selected by default, double-click on the desired value on the widget. You can also change the default selected value through the attribute 'Value' in the Properties panel.

Selecting values in simulation

Select a value of a List Box while simulating by clicking once on the desired value.

Selection List

A basic drop-down that can contain a list of ordered values. This drop-down menu widget will display depending on the system where it is being viewed in simulation. So if in an iPad, it will be shaped as the select lists in iPad. Or in an Andoird, as the real drop-downs in Android. This single selection widget has the particularity that when one of its values is selected all the others remain unselected and hidden. Only the selected value is displayed in a single line.

Custom Selection List

Like a select list but with all the style configuration properties you have in other widgets. This widget will display always the same no matter the device is used to see the prototype.

Setting default selection

To set one of its values selected by default:

  1. Click on the Selection List widget.

  2. Click again to open the drop-down and select the desired value.

Selecting values in simulation

Select a value of a Selection List while simulating by clicking once on the widget to open the drop-down. Then select the desired value or write another one like a common text input.

Multi-selection List

A multiple text line widget that displays a list of ordered values like a List Box widget. This multi-selection widget has the particularity that it can have more than one of its values selected at the same time.

Setting default selection

To set one of its values selected by default, double-click on the desired value on the widget. Select as many values as you need. Double-click again on an already selected value to deselect it. You can also change the default selection through the attribute 'Value' in the Properties panel.

Selecting values in simulation

Select a value of a Multi-selection List while simulating by clicking once on the desired value. Click on an already selected value to deselect it.

Radio Button List

A selection widget that displays a list of ordered values together with a radio button for each value. This single selection widget behaves like a List Box but has the particularity that the values must be selected through radio buttons. Radio Button Lists have two different styles to display their values:

Change the orientation of this widget in the attribute 'Orientation' in the Properties panel.

Setting default selection

To set one of its values selected by default, double-click on the desired value on the widget. Double-click again on an already selected value to deselect it. You can also change the default selection through the attribute 'Value' in the Properties panel.

Selecting values in simulation

Select a value of a Radio Button List while simulating by clicking once on the desired value.

Check Box List

A selection widget that displays a list of ordered values together with a check box for each value. This multi-selection widget behaves like a Multi-selection List but has the particularity that the values must be selected through check boxes. Check Box Lists also have two different styles to display their values: Vertical and Horizontal (See Radio Button List).

Setting default selection

To set one of its values selected by default, double-click on the desired value on the widget. Select as many values as you need. Double-click again on an already selected value to deselect it. You can also change the default selection through the attribute 'Value' in the Properties panel.

Selecting values in simulation

Select a value of a Check Box List while simulating by clicking once on the desired value. Click again on an already selected value to deselect it.