Select

Click to copy

Select component to select predefined options.


Initial settings

Mode - choose Multiple for being able to select multiple options from the dropdown. Otherwise, Single mode should be used.


Look and Feel Settings

Label (not mantory) to be used to show the component's label.

Placeholder (not mandatory) to be used to show the component's placeholder.

Name (mandatory) - name of the component.

Size (mandatory) - size of the component. Is set to Default when component is created.

Search (mandatory) - to be able to search within available dropdown options. Is turned off by default. 

Clear icon (mandatory) - shows clear options icon if enabled. Is turned off by default.

Disabled (mandatory) - makes the component disabled if turned on. Is turned off by default.

Visible (mandatory) - makes the component visible if turned on. Enabled by default.


Options

Select Options can be predefined in the component settings.


Workflow triggers

  • onChange - fires when the dropdown option is changed.
  • onFocus - fires when the Select component is being focused on.
  • onBlur - fires when the Select component is blurred.
  • onCreate - fires when the component is created.
  • onDestroy - fires when the component is shown.

Component Actions

Select Get Properties

Gets the component's properties.

Input parameters:

  • Component Id [string] - Select component's identifier;

Output parameters:

  • Label [string] - component's label;
  • Placeholder [string] - component's placeholder;
  • Allow Clear [boolean] - allows clear the selection if true;
  • Disable [boolean] - disables component if true;
  • Tooltip [string] - tooltip string;
  • Required Mark [boolean] - shows required mark if true;
  • Debounce (ms) [integer] - delay to validate the value;
  • Options [Select Option array] - an array of predefined select options;
  • Selected [Select Option array] - an array of selected options or just an array with single element in case of Single Mode;
  • Validate Icon [boolean] - icon to be shown on validate the value;
  • Validate Status [Status type] - status to be shown on validate the value;
  • Validate Message [string] - message to be shown on validate the value;

Select Get Properties

Select Set Properties

Sets the component's properties.

Input parameters:

  • Component Id [string] - Select component's identifier;
  • Label [string]- component's label;
  • Placeholder [string] - component's placeholder;
  • Allow Clear [boolean] - allows clear the selection if true;
  • Disable [boolean] - disables component if true;
  • Tooltip [string] - tooltip string;
  • Required Mark [boolean] - shows required mark if true;
  • Debounce (ms) [integer] - delay to validate the value;
  • Options [Select Option array] - an array of predefined select options;
  • Validate Icon [boolean] - icon to be shown on validate the value;
  • Validate Status [Status type] - status to be shown on validate the value;
  • Validate Message [string] - message to be shown on validate the value;

Select Set Properties

Select Update Properties

Updates component's properties.

Input parameters:

  • Component Id [string] - Select component's identifier;
  • Label [string]- component's label;
  • Placeholder [string] - component's placeholder;
  • Allow Clear [boolean] - allows clear the selection if true;
  • Disable [boolean] - disables component if true;
  • Tooltip [string] - tooltip string;
  • Required Mark [boolean] - shows required mark if true;
  • Debounce (ms) [integer] - delay to validate the value;
  • Options [Select Option array] - an array of predefined select options;
  • Validate Icon [boolean] - icon to be shown on validate the value;
  • Validate Status [Status type] - status to be shown on validate the value;
  • Validate Message [string] - message to be shown on validate the value;

Select Update Properties

Make Select Option

Composes Select Option model with the given fields.

Input parameters:

  • ID [integer] - Select Option ID;
  • Label [string] - Select Option's label;
  • Value [integer] - Select Option's order value in the dropdown list;
  • Icon [string] - icon to be used in the Select Option item;
  • Disabled [boolean] - disables the Select Option if true;

Output parameters:

  • Select Option [Select Option] - Select Option model;

Make Select Option

Expand Select Option

Expands Select Option model.

Input parameters:

  • Select Option [Select Option] - Select Option model;

Output parameters:

  • ID [integer] - Select Option ID;
  • Label [string] - Select Option's label;
  • Value [integer] - Select Option's order value in the dropdown list;
  • Icon [string] - icon to be used in the Select Option item;
  • Disabled [boolean] - disables the Select Option if true;

Expand Select Option


Usage example

It is possible to compose and add new Select Option items into the dropdown list via frontend business processes. 

The logic should be following:

  • Compose a new Select Option item with specified fields (Make Select Option)

  • Get the existing Select Option items array (Select Get Properties) and merge it with the Select Option item created earlier (Append Array)

  • Update Select Option items array (Select Update Properties) for the specified Select component