Select Form field
This is a select element that allows a user to select from a predefined list.
A select list has multiple values that are defined by two parameters, a Label that will be displayed in the dropdown and a code that will be saved. For example, you can have a Female label with an F value and Male with the M value. This means that when you will select Female on the process instance, F value will be available for the Select key.
The available configuration options for this form element are:
Select Settings
General
- Key - creates the biding between form element and process data, so it can be later used in decisions, business rules or integrations
Flowx props
- Placeholder - placeholder when the field has no value
- Label - the label of the input
- Type - default or custom where the second one will allow the user to search between the options
- Empty message - text displayed for custom type when no results are found
Validators - multiple validators can be added to a select (more details here)
Datasource
- Default Value - autofill the select with this value. Going back to the example with Woman label with F value and Man with M to have a default value of Woman we need to configure here F
- Source Type - it can be Static, Enumeration, or Process Data
Options - label - value pairs can be defined here (values from CMS and defined options together are not possible)
Expressions
- Hide - JavaScript expressions used to hide components when they're truthy
- Disabled expressions - JavaScript expressions that should be evaluated as true or false. It's important to make sure that hidden fields also have the same expression configured under expressions → hide
Select styling
- valid CSS properties (more details here)
A FORM with a layout direction of row warp and some inputs and a select element will look like this:
Example - Dynamic dropdowns
As mentioned previously, you can create dropdowns including static data, enumerations, or process data. Let's create an example using process data to create a process that contains dynamic dropdowns.
To create this kind of process, we need the following elements:
- a start node and an end node
- a start milestone UI element to it and an end milestone node
- a task node (this will be used to set which data will be displayed on the dropdowns)
- a user task node (here we have the client forms and here we add the SELECT elements)
Creating the process
Follow the next steps to create the process from scratch:
- Open FLOWX.AI Admin and from the Processes tab select Definitions.
- Click on the breadcrumbs (top-right corner) then click New process (the Process Designer will now open).
- Now add all the necessary nodes (as mentioned above).
Configuring the nodes
- On the start milestone node, add a page UI element.
- On the task node, add a new Action (this will set the data for the dropdowns) with the following properties:
- Action type - Business Rule
- Automatic
- Mandatory
- Language (we used an MVEL script to create a list of objects)
On the user task node, add a new Action (submit action, this will validate the forms and save the date) with the following properties:
- Action type - Save Data
- Manual
- Mandatory
- Data to send (the key where the data will be sent) -
application
Below you can find the MVEL script used in the above example:
output.put("application",
{
"client": {
"identity": [
{
"value": "001",
"label": "Eddard Stark"
},
{
"value": "002",
"label": "Sansa Stark"
},
{
"value": "003",
"label": "Catelyn Stark"
}
]},
"contracts": {
"001": [
{
"value": "c001",
"label": "Eddard Contract 1"
},
{
"value": "c007",
"label": "Eddard Contract 2"
}
],
"003": [
{
"value": "c002",
"label": "Catelyn Contract 1",
},
{
"value": "c003",
"label": "Catelyn Contract 2 ",
},
{
"value": "c004",
"label": "Catelyn Contract 3"
}
],
"002": [
{
"value": "c005",
"label": "Sansa Contract 1",
}
]
}
});
Configuring the UI
Follow the next steps to configure the UI needed:
- Select the user task node and click the brush icon to open UI Designer.
- Add a card element as a root component (this will group the other elements inside it) with the following properties:
- Key -
form
- Message -
{"application": ${application}}
- Title - Customer Contract
- Key -
- Inside the card, add a form element.
- Inside the form add two select elements, first will represent, for example, the Customer Name and the second the Contract ID.
- For first select element (Customer Name) set the following properties:
- Key -
application.client.selectedClient
- Placeholder - Customer Name
- Label - Customer Name
- Type - default
- Source type - Process Data (to extract the data added in the task node)
- Name -
application.client.identity
- Key -
- For the second select element (Contract ID) set the following properties:
- Key -
application.client.selectedContract
- Placeholder - Contract ID
- Label - Contract ID
- Type - default
- Source Type - Process Data
- Name -
application.contracts
- Parent Name -
application.client.selectedClient
- Key -
- Add a button under the form that contains the select elements with the following properties:
- Label - Submit
- Type - fill
- Add UI action - add the submit action attached earlier to the user task node
- Test and run the process by clicking Start process.