Overview

When creating an application, you can configure Actionflows to respond to different events, such as a mouse click, double click or enter key press.

Event Types and Event Handlers

An Event Handler is an action that responds to a specific event, such as a mouse click, double click or enter key press. The Event Handler defines how the application behaves when the event is triggered, such as running a Table-action or Actionflow.

Multiple event handlers can be set on the same component or field. For example, you may wish for a validation Actionflow to be triggered On Enter and On Blur.

Event Type	Description	Component	Data Field
		Set Event Handlers on:
On Click	The user mouse clicks in an area.	Area	-
On Change	A toggle field changes state or the user mouse-clicks out of a data field in which they have changed data. Note: This event is not triggered by the user typing into a field.	-	Boolean Date Datetime Number String
On Enter	The user presses the Enter key in a data field.	-
On Blur	The user mouse-clicks out of a data field. Note: This event is triggered whether or not the data in the field has been changed.	-

On Click events are automatically set on button components.

Event Types and Action Settings

Event Type	Description	Component
		Set Action Settings on:
Double Click	The user double clicks in a grid.	View
Auto Save	The user changes data in a grid, then clicks out of the cell.	View
Drag Types & Drop Targets	User drags an item from one part of a screen, and dropping on another part.	View Kanban Area
Task Plan	The user starts a task plan or a task plan auto-starts according to its schedule.
On Startup	The user loads the application.

Adding an Event Handler

From a screen, click on a component or field to open its Properties tab
Click on the Actions tab and in the Event Handler section, click the icon to create a new event handler
In the New Event Handler Properties, select an Event Type

Only events available for this type of component will show - see Event Types table above.
Select an Action Method:
1. Actionflow: Click the icon to create a new Actionflow or click the icon to display a list of available Actionflows
2. Table Action: Choose a table action from the dropdown or select the Table icon to find table-actions belonging to a specific table:
  1. ~~Click the chevron to expand the table in the Repository~~
  2. ~~Drag a table-action from the list into the Table Action box.~~ ZB remove completely?
3. Other: Choose an option from the drop down:
  - None
  - Clear All Fields: clears content from all form fields on the parent form
  - Close Screen: closes the parent screen
  - Maximise/Minimise Screen: toggles the screen between minimised and its default size
  - Screenshot: copies an image of the selected component to the clipboard
    - The required component must be dragged and dropped into the Screenshot Component box from the Layers or Repository

Adding Action Settings

From a screen, right-click on a grid and press Show the View Configuration

Worked Examples

Here's a worked example using the School Data (available from the Learning Centre).

~~In this example, we are using:~~

~~A Course Management screen containing a grid of the School Courses data - this screen was created using the Tile with Buttons template~~
~~A Course Form screen containing form fields and associated with School Courses data by a background filter - this screen was created using the Edit Form template~~

If you are completing this chapter as part of the Actionflow course and using a training instance, the data and screens have already been pre-loaded into the Actionflow Intermediate Application. For this example, we'll be working on configuring buttons on the Course Management screen to open the Course Form screen.

We want to be able to add and edit courses on a Course Management screen. The first step to doing this is by creating two Open Screen Actionflows. Both will open the same screen containing form fields, but when we are adding a new course we want empty form fields, and when we are editing an existing course, we want the form fields to contain course data.

GIF/SCREENSHOT OF FINISHED RESULT

Example 1: Configuring an On Click Event

Configure an area to open a screen on clicking.

On the screen where the Actionflow will be initiated from, Orders Management, click on the area, ClickableArea (use the Layers) to open its properties
On the Actions tab, in the Event Handler section, click the to create a new event handler:
1. Event Type: On Click
2. Action Method: Actionflow
3. Click Apply
4. Click the icon to create a new Actionflow
5. Create an Open Screen Actionflow that opens the Staff Management screen
  1. See 1.07 Open Screen Action Configuration
6. Apply and Close the new event handler properties
Apply and Close the area properties
Lock the screen and click the area to see the Actionflow in action