# Relselect

## Initial settings

**Data source** - data model to be used to show dropdown options from.

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

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FyajbWveg59ZUzAopYxNe%2FInitialSettings.jpg?alt=media\&token=8101f0e4-04ad-45d9-bae5-4cfc44caca58)

## Look\&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.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FCz2O9Ue2HkRnu0E7Ljiy%2Flooknfeel.jpg?alt=media\&token=4798ac40-5e9a-4244-9a7a-ce8cd05424be)

## Data

**Data source** - *Data Model* in use. Configurable only on component's creation.

**Label** - *Data Model* fields to be showed in a single dropdown option.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F2bVzJ4K1bfiMzkEKjnQO%2Fdata.jpg?alt=media\&token=54247353-98cd-4970-a1d4-c8fd0cbc66ac)

## Workflow triggers

* **onChange** - fires when the dropdown option changed.
* **onFocus** - fires when Relselect component is being focused.
* **onBlur** - fires when Relselect component is blurred.
* **onCreate -** fires when the component is created.
* **onShow** - fires when the component is shown.
* **onHide** - fires when the component is hidden.
* **onSearch** - fires when user searches withing available options.
* **onOpen** - fires on the dropdown.
* **onLoadAll** - fires when all dropdown options are downloaded.

## Component Actions

### RelSelect Get Properties

Gets the component's properties.

**Input** parameters:

* **Component Id** \[string] *-* RelSelect component's identifier;

**Output** parameters:

* **Selected** \[*Data Model type*/ *Data Model Array type*] - selected option(s). To be shown in the business process when **Component ID** is specified only.
* **Data** \[*Data Model Array type*] - array of Data Model elements to be used. Available in the business process when **Component ID** is specified only.
* **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;
* **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.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F9NDsBBoWPdBH0nJeHbMM%2FrelSelect_getProperties.jpg?alt=media\&token=8cc36ff4-6ad0-46a3-a830-e28930210623)

### RelSelect Set Properties

Sets the component's properties.

**Input** parameters:

* **Selected** \[*Data Model type*/ *Data Model Array type*] - selected option(s). To be shown in the business process when **Component ID** is specified only.
* **Data** \[*Data Model Array type*] - array of Data Model elements to be used. Available in the business process when **Component ID** is specified only.
* **Component Id** \[string] *-* RelSelect 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;
* **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.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FS11HTI4aVdabbTzi0YIn%2FrelSelect_setProperties.jpg?alt=media\&token=497d039e-3b1d-4377-b522-c1922429f2d8)

### RelSelect Update Properties

Updates component's properties.

**Input** parameters:

* **Selected** \[*Data Model type*/ *Data Model Array type*] - selected option(s). To be shown in the business process when **Component ID** is specified only.
* **Data** \[*Data Model Array type*] - array of Data Model elements to be used. Available in the business process when **Component ID** is specified only.
* **Component Id** \[string] *-* RelSelect 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;
* **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.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F0pjvpftshJ1R0blgHtTu%2FrelSelect_updateProperties.jpg?alt=media\&token=a6dee91b-9b2a-4f62-ad31-5d00b3056994)

## Usage example

It is required to download the dropdown options from the server in order to see them. 

The logic should be following:

1. Get the *Data Model* Array (*Server request GET*) on *RelSelect* component's creation (*onCreate*).
2. Update the dropdown data (*RelSelect Update Properties*)

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FL4srjAlTayWYLhTvFjgj%2Fexample.jpg?alt=media\&token=4358c04e-221d-41d3-ad52-c1430ebf5a2d)