Select

​

Configuring the Select element

​

Select generic settings

These allow you to customize the generic settings for the Select element:

• Process data key
• Properties
• Datasource
• Validators
• Expressions
• UI actions
• Select styling

​

Process data key

Process data key establishes the binding between the select element and process data, enabling its later use in decisions, business rules or integrations.

​

Properties

• Label: The visible label for the select element.
• Placeholder: Text that appears within the select element when it is empty.
• Empty message: Text displayed for custom type when no results are found.
• Search for options: Displays a search to filter options.
• Has Clear: Option to include a content clear mechanism.
• Helpertext: Additional information about the select element, which can be optionally hidden within an infopoint.

​

Datasource configuration

• Default value: Autofill the select field with this value. You need to specify the value from the value/label pairs defined in the Datasource tab.

• Source Type: The source can be Static, Enumeration, or Process Data.
• Add option : Define label and value pairs here.

​

Validators

You can add multiple validators to a select field. For more details, refer to Validators.

​

Hide/disable expressions

The select field’s behavior can be defined using JavaScript expressions for hiding or disabling the element. The following properties can be configured for expressions:

• Hide condition: A JavaScript expression that hides the Select field when it returns a truthy value.
• Disabled condition: A JavaScript expression that disables the Select field when it returns a truthy value.

​

UI actions

UI actions can be added to the select element to define its behavior and interactions.

• Event: Possible value - CHANGE.
• Action Type: Select the type of the action to be performed.

​

Select settings overrides

There are instances where you may need to tailor settings configured in the Generic settings tab. This proves especially beneficial when you wish to adjust these settings to appear differently across various platforms such as Web, Android, or iOS.

Available override settings:

• Properties:
  • Label: Override the select label.
  • Helper: Override helper text/info point.
  • Placeholder: Override the placeholder.
• Expressions:
  • Hide: Override the hide expression.

​

Select styling

• Web
• iOS
• Android

​

Select style overrides options

Theme overrides refer to the ability to modify or customize the appearance and behavior of UI components by overriding default theme settings. This can be applied at various levels, such as specific elements or entire sections, and can be platform-specific (Web, iOS, Android).

Style options:

​

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 task node (this will be used to set which data will be displayed on the dropdowns - by adding a business rule on the node)

• 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:

1. Open FlowX Designer and from the Processes tab select Definitions.
2. Click on the breadcrumbs (top-right corner) then click New process (the Process Designer will now open).
3. Now add all the necessary nodes (as mentioned above).

​

Configuring the nodes

1. 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)

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",
            }
        ]
    }
});

2. 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 on which we added client details and contracts as objects in the business rule) - application

​

Configuring the UI

Follow the next steps to configure the UI needed:

1. Select the user task node and click the brush icon to open UI Designer.
2. Add a Card UI element as a root component (this will group the other elements inside it) with the following properties:

• Generic:
  • Custom UI payload - {"application": ${application}} - so the frontend will know which data to display dynamically when selecting values from the SELECT element
  • Title - Customer Contract

3. Inside the card, add a form element.
4. Inside the form add two select elements, first will represent, for example, the Customer Name and the second the Contract ID.
5. For first select element (Customer Name) set the following properties:
   • Process data key - application.client.selectedClient
   • Label - Customer Name
   • Placeholder - Customer Name
   • Source type - Process Data (to extract the data added in the task node)
   • Name - application.client.identity

6. For the second select element (Contract ID) set the following properties:
   • Process data key - application.client.selectedContract
   • Label - Contract ID
   • Placeholder - Contract ID
   • Source Type - Process Data
   • Name - application.contracts
   • Parent - SELECT (choose from the dropdown list)

7. Add a button under the form that contains the select elements with the following properties:
   • Label - Submit
   • Add UI action - add the submit action attached earlier to the user task node

8. Test and run the process by clicking Start process.