Controllers¶
The Controllers family is one of available components’ families you can use to populate a Mask.
It contains commands that enable specific interactions, allowing the master user to build guided procedures and the end user to interact with the custom interface.
What makes the Controllers family unique among all the other components is the fact that the Options available in the Options tab can be linked to them, assigning a default value.
When a Controller is dragged onto the mask stage, or when an Option is not linked to it, its border is highlighted in yellow.
Once an Option is assigned to a controller, its border is highlighted in green.
Moreover, as Controllers can manage values, they are the only Origin allowed to make Connections work.
To make it easier to locate them, Controllers have been divided into two groups:
Base controllers, which manage one option at a time, of a specific type. Each controller generates a specific value type, so the controller itself decides whether a number, string, password for example will be managed by it or not.
Multiple controllers, which manage one or more options at a time, depending on the graphical interaction.
Base¶
The Base group contains the following controllers:
Checkbox
Text field
Number field
Password field
Color picker
Calendar field
Code field
The layout of Base controllers can be customized in the components layout menu, it can be accessed by right-clicking onto the component and clicking Open components layout or when first dragging the component onto the stage.
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the checkbox. |
Layout |
Label |
The label of the checkbox. |
Label width |
The width (in pixels) of the label. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the checkbox. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the text field. |
Layout |
Label |
The label of the text field. |
Label position |
The position of the label. The possible values are: Start (default), Top, Bottom, End. |
|
Label width |
The width (in pixels) of the label. |
|
Option width |
The width (in pixels) of the field where the values will be inserted. |
|
Default (with code None) |
If the option associated with the text field has no value, here users can specify a default value for the component. |
|
Multiline |
If selected, the text field will contain multiple lines. |
|
Format |
It checks the data type which will be inserted in the text field. For example, a Regex checking whether an email has been written correctly in the format |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the text field. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the number field. |
Layout |
Label |
The label of the number field. |
Label position |
The position of the label. The possible values are: Start (default), Top, Bottom, End. |
|
Label width |
The width (in pixels) of the label. |
|
Option width |
The width (in pixels) of the field where the values will be inserted. |
|
Min value |
The allowed minimum value of the number field. |
|
Max value |
The allowed maximum value of the number field. |
|
Default (with code None) |
If the Option associated with the number field has no value, here users can specify a default value for the component. |
|
Floating number (3-digits) |
If selected, continuous numbers with up to 3 digits after the comma will be accepted. |
|
Floating number (6-digits) |
If selected, continuous numbers with up to 6 digits after the comma will be accepted. |
|
Percentage value |
If selected, the considered number will be a percentage. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the number field. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the password field. |
Layout |
Label |
The label of the number field. |
Label position |
The position of the label. The possible values are: Start (default), Top, Bottom, End. |
|
Label width |
The width (in pixels) of the label. |
|
Option width |
The width (in pixels) of the field where the values will be inserted. |
|
Default (with code None) |
If the option associated to the password field has no value, here users can specify a default value for the component. |
|
Multiline |
If selected, the password field will contain multiple lines. |
|
Format |
It checks the data type which will be inserted in the password field. For example, a Regex checking whether an email has been written correctly in the format |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the password field. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the color picker. |
Layout |
Label |
The label of the color picker. |
Label width |
The width (in pixels) of the label. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the color picker. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the calendar field. |
Layout |
Label |
The label of the calendar field. |
Label position |
The position of the label. The possible values are: Start (default), Top, Bottom, End. |
|
Label width |
The width (in pixels) of the label. |
|
Option width |
The width (in pixels) of the field where the values will be inserted. |
|
Date type |
The allowed date format. Possible values are Date (default), Month, Week, Quarter, Datetime, Time. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the calendar field. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the code field. |
Layout |
Label |
The label of the code field. |
Label position |
The position of the label. The possible values are: Start, Top (default), Bottom, End. |
|
Label width |
The width (in pixels) of the label. |
|
Option width |
The width (in pixels) of the field where the values will be inserted. |
|
Language |
The supported language in the code field. |
|
Show Preview |
||
Automatic Preview |
||
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the code field. |
Multiple¶
The Multiple group contains the following controllers:
Combobox
Values autocomplete
Radio buttons
General item list
Their layout can be customized by right-clicking onto the component and clicking Open widget layout. Browse the tabs below to know more about the available options for each Multiple controller.
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the combobox. |
Layout |
Label |
The label of the combobox. |
Label width |
The width (in pixels) of the label. |
|
Combobox width |
The width (in pixels) of the combobox in the form. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the combobox. |
|
Add undefined value |
If selected, the combobox will have a blank value field, which will assign the undefined value to the option. If both the Add undefined value and the Add null value fields are selected, only the undefined value will be assigned to the option. |
|
Add null value |
If selected, the combobox will have a blank value field, which will assign the null value to the option. If both the Add undefined value and the Add null value fields are selected, only the undefined value will be assigned to the option. |
|
Values |
In this table, users can choose two different value modes: the Table or the Metadata mode. * If Table has been chosen, users write the Label (the name displayed on the controller, to which a field is associated) and its Value (the value associated with the linked Option). More label-value pairs can be added by clicking on the plus button. * If Metadata has been chosen, users select from the drop-down list the Type and the Subtype of metadata which will be used to define the values. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the values autocomplete. |
Layout |
Label |
The label of the values autocomplete controller. |
Label width |
The width (in pixels) of the label. |
|
Combobox width |
The width (in pixels) of the values autocomplete. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the values autocomplete. |
|
Values |
In this table, users can choose two different value modes: the Table or the Metadata mode. * If Table has been chosen, users write the Label (the name displayed on the controller, to which a field is associated) and its Value (the value associated with the linked Option). More label-value pairs can be added by clicking on the plus button. * If Metadata has been chosen, users select from the drop-down list the Type and the Subtype of metadata which will be used to define the values. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the radio button. |
Layout |
Label |
The label of the radio button. |
Label position |
The position of the label. The possible values are: Start (default), Top, Bottom, End. |
|
Label width |
The width (in pixels) of the label. |
|
Group direction |
The direction of the options in the radio button. The possible values are: Row (default), Column. |
|
Option width |
The width (in pixels) of the values of the radio button displayed on the stage. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the radio button. |
|
Add other |
If selected, the Other field, where users can specify a custom value, is added to the form. |
|
Values |
In this table, users can choose two different value modes: the Table or the Metadata mode. * If Table has been chosen, users write the Label (the name displayed on the controller, to which a field is associated) and its Value (the value associated with the linked Option). More label-value pairs can be added by clicking on the plus button. * If Metadata has been chosen, users select from the drop-down list the Type and the Subtype of metadata which will be used to define the values. |
Sub-section |
Option |
Description |
|---|---|---|
Option |
Option |
Select from the drop-down list the option, among those which have been previously set in the Options tab, which will be linked to the list. |
Layout |
Label |
The label of the list. |
Option width |
The width (in percentage) of the list. |
|
Order |
The position of the controller in the form. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to their Order value. |
|
Css |
Additional CSS code used to customize the list. |
|
Items |
In this table, users can choose two different value modes: the Table or the Metadata mode. * If Table has been chosen, users write the Label (the name displayed on the controller, to which a field is associated) and its Value (the value associated with the linked Option). More label-value pairs can be added by clicking on the plus button. * If Metadata has been chosen, users select from the drop-down list the Type and the Subtype of metadata which will be used to define the values. |