Logic events and actions

To define the logic of your app you must define the actions and events you want the app to perform when the user launches the app or when they interact with certain components.

Event nodes have one output port that must be connected to one or more actions. Action nodes can have zero, one or two output ports. See actions for more details.

Events and action's logic must be configured in:

Events

The following events are available:

Event Tab Description Actions Components
On launch Logic flow Defines what happens when your app is launched. Change screen, Dialog, Field Validation, HTTP request, Reset, Toast, Trigger flow.
On finish Logic map Defines what happens when the user selects the Finish button in the last step of the Panel with stepper component. Dialog, HTTP request, Reset, Toast, Trigger Flow. Panel with stepper
On click Logic map Defines what happens when the component is clicked. Change screen, Dialog, Field Validation, HTTP request, Reset, Toast, Trigger flow. Button
On update Logic map Defines what happens when the user edits the component and tabs out of it. If the user does not change the value and/or does not tab out of it, the event does not trigger. Dialog, HTTP request, Toast, Trigger flow Checkbox, Combobox, Dropdown, File uploader, Radio, Switch and Text input.

Actions

The following actions are available:

Action Events Components
HTTP Request On launch, On click, On update and On finish Button, Checkbox, Combobox, Dropdown, File uploader, Panel with stepper, Radio, Switch, and Text input.
Trigger flow On launch, On click, On update and On finish Button, Checkbox, Combobox, Dropdown, File uploader, Panel with stepper, Radio, Switch and Text input.
Reset On launch, On click and On Finish Button and Panel with stepper.
Field validation On launch and On click Button
Toast On launch, On click, On update and On finish Button, Checkbox, Combobox, Dropdown, File uploader, Panel with stepper, Radio, Switch and Text input.
Dialog On launch, On click, On update and On finish Button, Checkbox, Combobox, Dropdown, File uploader, Panel with stepper, Radio, Switch and Text input.
Change screen On launch and On click Button

HTTP Request

The HTTP Request action links a REST API operation (GET, POST, PUT, PATCH, DELETE) that is defined in the Resources section to the selected event.

HTTP Request nodes have one input port and two output ports: Green check handle for success output and Red cross handle for error output.

Note: GET requests linked to an event are triggered only when the event occurs.

The HTTP Request action has the following properties:

Property Description Required
Description Enter an optional description of your action. No
HTTP Select one of all the available HTTP resources defined in the Resources section. Yes
Unlock screen while loading Turn on to allow the user to continue to use the app while the API calls are being made in the background. A spinner will appear to let the user know that something is happening in the background. By default, the loading spinner blocks the screen during data loading. No
Download file Turn on to allow a file to be downloaded to the user's local device. Only available when the HTTP resource has Response type: File.
Note: You do not need to turn on the switch to use the retrieved file for another purpose. See How to use a downloaded file in an API request for more details.		 No
File content Select the file using the Plus (+) button or enter its path between {{}}. Only available when using the ERPx API resource or the HTTP resource Response type: JSON.
Note: R&D Unit4 developers can also use the Unit4 service resource.		 No
File name Enter the name for the downloaded file. If the API does not provide a file name in the Content-Disposition header, and the File name property is empty, the file will be named download. No

In the example below we can see how to upload multiple data sets. Three HTTP Request actions are linked to the On launch event to load Customers, Countries, and Customer groups when the app starts. Three resources are created in the Resources section with the necessary REST API operations defined.

HTTP Request on launch example

In the example below we can see how to upload a file. An HTTP Request action is linked to the On click event for a Button component. When the button is selected, the HTTP request is triggered for a POST operation to upload a document. There is one resource created in the Resource section with the necessary REST API operations defined.

HTTP Request upload example

In the example below we can see how to allow the user to download a file. An HTTP Request action is linked to the On click event for a Button component. When the button is selected, the file is downloaded. The Download file is enabled and File name is empty so when the request is successful, the file is downloaded with 'download' as a name. There is one resource created in the Resource section with the necessary REST API operations defined.

HTTP Request download file example

Trigger flow

The Trigger flow action allows you to trigger an Extension Kit flow at a certain point in the app's logic. See Flow resource for more details.

The Trigger flow action has the following properties:

Property Description Required
Description Enter an optional description of your action. No
Flow Select the configured flow to use. See Flow resource for more details. Yes
Unlock screen while loading Turn on to allow the user to continue to use the app while the flow is running in the background. A spinner will appear to let the user know that something is happening in the background. By default, the loading spinner blocks the screen during data loading. No

Reset

The Reset action is used to reset the status of the form to when it was loaded, meaning that it clears all the information the user has added but still displays the information that was set to be shown as default.

The Reset action has the following properties:

Property Description Required
Description Enter an optional description of your action. No

Field validation

The Field validation action allows you to define when and where you want to perform a validation in the app's logic. The validation rules for the field are defined using the Validation properties of the component you have selected in the Fields drop-down. See Validation for more details.

Validation action

Validation nodes have one input port and two output ports: Green check handle for success output and Red cross handle for error output.

The Field validation action has the following properties:

Property Description Required
Description Enter an optional description of your action. No
Fields Select the Component ID from the drop-down list of the field where you want to perform the validation. Yes

Toast

The Toast action allows you to display information in a toast message. Toast messages are at the top-right corner of the window and are intended to be an unobtrusive way to display information to the user.

Only one toast message can be displayed at a time (see Rules for actions). Toasts must be manually dismissed unless a new toast is displayed in the window and then, the new one will replace the previous one.

Toast nodes have only one input port and no output port.

The Toast action has the following properties:

Property Description Required
Description Enter an optional description of your action. No
Variant Select the kind of message you want to show. The types of messages are Positive, Negative, Notice, Neutral Yes
Title Enter the title text displayed in the toast. You can reference using Liquid. If the text of the Title is too long, only the first three lines are shown in the toast and the text is truncated with an ellipsis (...). Hovering over the text shows the rest of the title. Yes
Message Enter the body of the toast. You can reference using Liquid. If the text of the message is too long, only the first two of lines are shown in the toast and the text is truncated with an ellipsis (...). A Read more / Read less button appears to display and hide the complete text. No
Show action button Sets if the toast shows a button to perform an action. You then link which action to perform in the Logic map. When selected, the property Button text is available to configure the name of the button. No
Close Button Sets if a Close button is presented in the Toast message. If a Close button is present then the toast message remains visible until closed, and if not present then the toast message closes after a six second delay. No

Dialog

The Dialog action allows you to include a modal in the app's logic when you need to provide critical information to the user or in cases that require a response from the user, such as a confirmation before the logic continues.

Dialog nodes have only one input port and can have zero, one or two output ports depending on the number of buttons of the dialog.

The Dialog action has the following properties:

Dialog

Property Description Required
Description Enter an optional description of your action. No
Number of buttons Select the number of buttons from the drop-down. See How to configure the buttons section for more details. Yes
Type of dialog Select the kind of message you want to show. The types of messages are Success, Error, Information, Warning. Yes
Heading Enter the text displayed in the dialog. You can reference content using Liquid. Yes
Body Enter the body of the dialog. You can reference content using Liquid. Yes

Primary button / Secondary button

Property Description Required
Close button Turn on to use this button to close the dialog window. No
Type Sets if the button is Highlight or Negative. This sets the button placement with the Highlight button placed to the left of the Negative button. Yes
Button text Mandatory text to be displayed in the button. Yes

How to configure the buttons for the Dialog action:

To configure the Dialog window with one button:

  1. Choose One button from the Number of buttons drop-down.
  2. The Primary button menu becomes available. Open and configure:
    • By default, the Close button switch is turned on and the Type and Button text are set to read only with the Highlight Type and 'Dismiss' in the Button text.
    • Turn off the Close button switch to change the functionality of the button, the properties become editable and one output port appears to connect any actions you want the end-user to perform when selecting the button. A cross appears in the top-right corner of the dialog to allow the user to close it.

Dialog one button

To configure the Dialog window with two buttons:

  1. Choose Two button from the Number of buttons drop-down.
  2. The Primary button menu becomes available. The Close button switch is disabled and all fields are editable.
  3. The Secondary button menu becomes available. Open and configure:
    • By default, the Close button switch is turned on, the dialog node presents one output port to connect an action for the Primary button and all fields are editable.
    • Turn off the Close button switch to change the functionality of the button, two output ports appear to connect any actions you want the end-user to perform when selecting the button. A cross appears in the top-right corner of the dialog to allow the user to close it.

Dialog two buttons

Note: When you change from one button and one output port to two buttons and two output ports, the existing link is kept as the Primary button. When you change from two to one, the primary link is kept and the secondary removed.

Change Screen

The Change Screen action allows you to define the navigation between screens in an app that has more than one screen.

The Change Screen action has the following properties:

Property Description Required
Description Enter an optional description of your action. No
Screen Select the screen that the component opens. Yes

Rules for actions

The following rules apply to actions:

Actions in parallel