UI actions

UI actions create a link between an action and a UI component or custom component.

The UI action informs the UI element to execute the given action when triggered. Other options are available for configuration when setting an action to a UI component and are detailed below.

There are two main types of UI Actions:

• Process UI Actions
• External UI Actions

​

Process UI actions

This is a UI action that describes how a UI Component (generated or custom) should interact with a process Manual action.

First, we need to configure the manual action that will be referred from the UI Action. For more information on how to add an action to a node, and how to configure it, check the following section:

​

Manual action configuration example - Save Data

1. Add an action to a node.
2. Select the action type - for example Save Data.
3. The action type should be manual.
4. Keys - it has two important implications:
   • First, this is a prefix of the keys that will sent back by the UI Action linked to this action. For example, if we have a big form with a lot of elements, but we need an action that just sends the email back (maybe creating email validation functionality) we will add just the key of that field: application.client.email; if we need a button that will send back all the form elements that have keys that start with application.client we can add just this part
   • Second, a backend validation will be run to accept and persist just the data that start with this prefix. If we have three explicit keys, application.client.email, application.client.phone, application.client.address and we send application.client.agethis key will not be persisted

When this prerequisite is ready we can define the UI Action.

​

UI action configuration example

Multiple configurations are available - ACTION type example:

• Event
• Type
• Node Action Name - dropdown with available actions for this node. If the dropdown is empty please add a manual action that is required before we create the UI Action
• Use a different name for UI action
• UI action name - this becomes important when the action is used in a Custom component as it will be used to trigger the action. For UI actions added on a generated UI component, this name is just descriptive
• Custom body - this is the default response in JSON format that will be merged with any extra parameters added explicitly when executing the action, by a web application (from a custom component)
• Forms to validate - select from the dropdown what element will be validated (you can also select the children)
• Hide Subprocess Navigation - if the UI Action is added on a subprocess and this parameter is true, triggering this UI action will dismiss the subprocess view (useful for modals subprocess)
• Show loader - a loader will be displayed if this option is true until a web-socket event will be received (new screen or data)

​

UI actions elements

​

Events

You can add an event depending on the element that you select. There are two events types available: CLICK and CHANGE.

​

Action types

The action type dropdown will be pre-filled with the following UI action types:

• DISMISS - used to dismiss a modal after action execution
• ACTION - used to link an action to a UI action
• START_PROCESS_INHERIT - used to inherit data from another process
• UPLOAD - used to create an un upload action
• EXTERNAL - used to create an action that will open a link in a new tab

​

External UI actions

Used to create an action that will open a link in a new tab.

If we toggle the EXTERNAL type, a few new options are available:

1. URL - web URL that will be used for the external action
2. Open in new tab - this option will be available to decide if we want to run the action in the current tab or open a new one

For more information on how to add actions and how to configure a UI, check the following section:

Managing a process flow