Select

​

Configuring the Select element

​

Select generic settings

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

​

Process data key

​

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

​

Hide/disable 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

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

​

Select settings overrides

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

Overrides can always be imported/pushed from one platform to another:

​

Select styling

• Web
• iOS
• Android

• Icons
• Sizing

• Left Icon: You can include an icon on the left side of the Select element. This icon can serve as a visual cue or symbol associated with the select element purpose or content.

​

Icons properties

• Icon Key: The key associated in the Media library, select the icon from the Media Library.

​

Select style overrides options

You can import or push the overrides from one platform to another without having to configure them multiple times.

​

Example - dynamic dropdowns

• 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

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)

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

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.