Graphic Options

The Graphic options panel changes its layout and switches from the list of graphic options to displaying the corresponding customizable options, and also the name of the panel switches to Graphic option inspector. The customization is possible when a graphic element belonging to the Graphic options list is selected and highlighted in the Mask stage.

Below you’ll find the list of all the options that can be customized organized for each graphic widget.


Checkbox

After dragging and selecting a Checkbox into the Mask stage, users can define the following options:

  • Label: enter in this field the label name to display.

  • Label width: define in this area the width of the Label.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Combobox

After dragging and selecting a Combobox into the Mask stage, users can define the following options:

  • Label: enter in this field the label name to display.

  • Label width: define in this area the width of the Label.

  • Combobox width: define in this area the width of the Combobox.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Value: allows setting a label and a corresponding value which will be displayed in the slide. To define a new value, click on the plus icon next to Add new row.

  • Default (with code None):

  • Add undefined value: if selected when a value has been defined, the drop-down menu as a default displays an empty row with no selection.

  • Add null values: if selected, null values are displayed when opening the drop-down menu.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Text field

After dragging and selecting a Text field into the Mask stage, users can define the following options:

  • Label: enter in this field the label name to display.

  • Label position: defines the position of the label within the text field. Possible values are: Start, Top, Bottom, End.

  • Label width: define in this area the width of the Label.

  • Option width: define in this area the width of the option.

  • Value: allows setting a label and a corresponding value which will be displayed in the slide. To define a new value, click on the plus icon next to Add new row.

  • Default (with code None):

  • Multiline: if selected, users are allowed to type on multiple line.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Format:

  • Use format to check the string:

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Number field

After dragging and selecting a Number field into the Mask stage, users can define the following options:

  • Label: enter in this field the label name to display.

  • Label position: defines the position of the label within the field. Possible values are: Start, Top, Bottom, End.

  • Label width: define in this area the width of the Label.

  • Option width: define in this area the width of the option.

  • Min value: define the minimum accettable value to insert in the field.

  • Max value: define the maximum accettable value to insert in the field.

  • Default (with code None):

  • Floating number (3-digits): if selected, clicking on the side arrows displays 3 digits after the comma.

  • Floating number (6-digits): if selected, clicking on the side arrows displays 6 digits after the comma.

  • Percentage value: if selected, the inserted values are displayed as percentage.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Password

After dragging and selecting a Password into the Mask stage, users can define the following options:

  • Label: enter in this field the label name to display.

  • Label position: defines the position of the label within the field. Possible values are: Start, Top, Bottom, End.

  • Label width: define in this area the width of the Label.

  • Option width: define in this area the width of the option.

  • Default (with code None):

  • Multiline: if selected, users are allowed to type on multiple line.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Format:

  • Use format to check the string:

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Radio button

After dragging and selecting a Radio button into the Mask stage, users can define the following options:

  • Label: enter in this field the label name to display.

  • Label position: defines the position of the label within the field. Possible values are: Start, Top, Bottom, End.

  • Label width: define in this area the width of the Label.

  • Group direction: it defines how to display the options of the Radio button, either as Row or Column.

  • Option width: define in this area the width of the option.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Value: allows setting a label and a corresponding value which will be displayed in the slide. To define a new value, click on the plus icon next to Add new row.

  • Add other: if selected, a blank text field option is added.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Char list

  • Label: enter in this field the label name to display.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.


Color Picker

  • Label: enter in this field the label name to display.

  • Label width: define in this area the width of the Label.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.


General Items List

  • Label: enter in this field the label name to display.

  • Option width: define in this area the width of the Label.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Items: defines the list of items to display, that the user will select.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Code Field

  • Label: enter in this field the label name to display.

  • Label position: defines the position of the label within the field. Possible values are: Start, Top, Bottom, End.

  • Label width: define in this area the width of the Label.

  • Option width: define in this area the width of the option.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Language: defines here the programming language that will be used.

  • Automatic Preview: if selected, automaticaly a preview of the inserted code is displayed.

  • Show Preview: if selected, the user can display a preview of the inserted code, when needed.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Values Autocomplete

  • Label: enter in this field the label name to display.

  • Label width: define in this area the width of the Label.

  • Combobox width: define in this area the width of the combobox.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Values: allows setting a label and a corresponding value which will be displayed in the slide. To define a new value, click on the plus icon next to Add new row.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.


Calendar Field

  • Label: enter in this field the label name to display.

  • Label position: defines the position of the label within the field. Possible values are: Start, Top, Bottom, End.

  • Label width: define in this area the width of the Label.

  • Option width: define in this area the width of the option.

  • Css: enter in this field the CSS code to modify your graphic widget.

  • Order: defines the order of other Graphic options. If displayed in rows, insert 0 to display the Graphic option to the rightmost side, and insert higher values to display the Graphic option to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.

  • Date type: defines the format in which the date should be inserted. Possible values are: date, month, week, quarter, datetime, timee.

  • Connection name: to know more about this option click here.

  • Connection value: to know more about this option click here.

  • Use connection: to know more about this option click here.

  • To set value: to know more about this option click here.