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

Action Settings

Adding an Event Handler

1. From a screen, click on a component or field to open its  Properties tab
2. Click on the  Actions tab and in the Event Handler section, click the  icon to create a new event handler

3. 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.

4. For Action Method, select Actionflow, then click the  icon to create a new Actionflow or click the  icon to display a list of available Actionflows

Adding Action Settings

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

2. On the View's  Properties, click on the  Actions tab

3. In the Action Settings section, under Double Click Action, select Actionflow
4. Click the  icon to create a new Actionflow or click the  icon to display a list of available Actionflows

Worked Examples

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

In this example, we are using:

• A Shop Stock screen containing a grid of the Shop Stock data, a pie chart of the Shop Stock data and a grid of the Shop Departments data  - this screen was created using the Multi-Tile template
• A Shop Statistics screen containing 4 tiles with charts and graphs of the Shop Stock data - this screen was created using the Tile no Buttons template
• A Shop Customer Form screen containing form fields and associated with Shop Customers data by a background filter - this screen was created using the Edit Form template

GIF/SCREENSHOT OF FINISHED RESULT

Example 1: Configuring an On Click Event

Configure an area to open a screen on clicking.

1. On the screen where the Actionflow will be initiated from, Shop Stock, find the area, Split Area Top (use the  Layers) to open its properties

2. On the  Actions tab, in the Event Handler section, click the  to create a new event handler:
   1. Event Type: select On Click
   2. Action Method: choose Actionflow
   3. Click  Apply
   4. Click the  icon to create a new Actionflow
   5. On the Actionflow, select Click to Connect and choose an input of On Click
   6. Create an Open Screen Actionflow that opens the Shop Statistics screen
      1. See 1.07 Open Screen Action Configuration
   7. Close the Actionflow and  Apply and Close the new event handler properties
3. On the area properties, click the  Styles tab
4. Tick Cursor and set this to Pointer (hand pointing)
   1. This indicates to your application users that this area is clickable 
5.  Apply and Close the area properties
6.  Lock the screen and click the area to see the Actionflow in action 

Example 2: Configuring a Double-Click Event

Configure a double-click action on a grid to open a screen where the selected record can be edited.

1. On the screen where the Actionflow will be initiated from, Shop Customers, right-click on the grid and choose  Show the View Configuration

2. On the View's  Properties, click on the  Actions tab

3. In the Action Settings section, under Double Click Action, select Actionflow
4. Click the  icon to create a new Actionflow
   1. On the Actionflow, select Click to Connect and choose the Shop Customers data source 
      1. This is because we want the Shop Customers Form to open with the selected customer's details on
   2. Create an Open Screen Actionflow that opens the Shop Customer Form
      1. See 1.07 Open Screen Action Configuration
      2.  Hint

         Remember to map across the customerID.

   3. Close the Actionflow and  Apply and Close the view properties
   4.  Lock the screen and double-click a record in the grid to see the Actionflow in action 

Example 3: Configuring an On Change Event

Configure a boolean field to show a message when it changes state (from false to true).

1. On the screen where the Actionflow will be initiated from, Shop Customer Form, find the True/False Field, mailingList (use the  Layers) to open its properties

2. On the  Actions tab, in the Event Handler section, click the  to create a new event handler:
   1. Event Type: select On Change
   2. Action Method: choose Actionflow
   3. Click  Apply
   4. Click the  icon to create a new Actionflow
3. On the Actionflow, select Click to Connect and choose an input of On Change

4. Using a Calculate Action, create an Output Attribute containing the following string:

   "Inform the customer that they will receive weekly emails with news and offers." 

   See 1.11 Calculate Action Configuration

5. Create an Output Connection Point back to the Shop Customer Form screen
6. Map your new Output Attribute onto the dynamic text component, InformEmailText
7. Close the Actionflow and  Apply and Close the new event handler properties
8.  Apply and Close the True/False Field properties
9. Close and reopen the screen, ensuring it is  Locked, and click the 'Would the customer like to join the mailing list?' toggle to see the Actionflow in action