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 & Action Settings

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  Insert excerpt_action_actionnopaneltrue or an 

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 Types and Action Settings

Adding an Event Handler

1. From a screen, click on a component or field to open its

   Insert excerpt
   _property_tabs _property_tabs nopanel true

2. Click on the

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

    and in the Event Handler section, click the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    icon to create a new event handler

3. In the New Event Handler 

   Insert excerpt
   _property_settings _property_settings nopanel true

   , select an Event Type
   

   Tip
   Only events available for this type of component will show - see Event Types table above.

   
   

4. Select an For Action Method:Actionflow: Click , select Actionflow, then click the 

   Insert excerpt
   _add_icon _add_icon nopanel true

    icon to create a new Actionflow or click the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    icon to display a list of available ActionflowsTable Action: Choose a table action from the dropdown or select the

Adding Action Settings

1. From a screen, right-click on a grid and press 

   Insert excerpt
   _view_show_

   tables

   config _view_show_

   tables

   config nopanel true

    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? 
2. Other: Choose an option from the drop down:
3. None
4. Clear All Fields: clears content from all form fields on the parent form
5. Close Screen: closes the parent screen
6. Maximise/Minimise Screen: toggles the screen between minimised and its default size
Screenshot: copies an image of the selected component to the clipboardThe required component must be dragged and dropped into the Screenshot Component box from the 

On the View's

Insert excerpt
_property_settings _property_settings nopanel true

, click on the

Insert excerpt
_property_

layers

tabs _

layers

property_tabs name action nopanel true

 or 
7. In the Action Settings section, under Double Click Action, select Actionflow
8. Click the 

   Insert excerpt
   _add_

   repository

   icon _

   repository

   add_icon nopanel true

Adding Action Settings

1. From a screen, right-click on a grid and press  icon to create a new Actionflow or click the 

   Insert excerpt
   _

   view

   actionflow_

   show_config

   icon _

   view

   actionflow_

   show_config

   icon nopanel true

    icon to display a list of available Actionflows

Worked Examples

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

In this example, we are using:

• A Course Management Shop Stock screen containing a grid of the School Courses data 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 Course Shop Customer Form screen containing form fields and associated with School Courses Shop Customers data by a background filter - this screen was created using the Edit Form template

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

Create an Open Screen Action that opens an empty input form.

Example 2: Configuring an On Blur Event

Create an Open Screen Action that opens an empty input form.

Example 3: Configuring an Double Click Event

Create an Open Screen Action that opens an empty input form.

Example 1: Configuring an On Click Event

In this example, we'll set up an Actionflow to open a screen when an area is clicked. 

Image Added

1. On the screen where the Actionflow will be initiated from, Shop Stock, find the area, Split Area Top (use the search in the 

   Insert excerpt
   _layers _layers nopanel true

   )

2. Click on the area to open its properties

3. On the 

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

   , in the Event Handler section, click the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    to create a new event handler:
   1. Event Type: select On Click
   2. Action Method: choose Actionflow
   3. Click 

      Insert excerpt
      _save _save nopanel true

   4. Click the 

      Insert excerpt
      _addIcon _addIcon nopanel true

       icon to create a new Actionflow
      1. Name: Open Shop Stock Statistics
   5. Click 

      Insert excerpt
      _save _save nopanel true

       on the Split Area Top area properties
   6. On the Actionflow, select Click to Connect and choose an input of On Click
   7. Create an Open Screen Actionflow that opens the Shop Stock Statistics screen

      1. See 1.07 Open Screen Action Configuration

         Expand
         title Checkpoint
         Image Added

         
         

   8. Close the Actionflow and 

      Insert excerpt
      _finish _finish nopanel true

       the new event handler properties
4. On the Split Area Top area properties, click the 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

5. In the Style Settings section, tick Cursor and set this to Pointer (hand pointing)
   1. This indicates to your application users that this area is clickable 

6. Insert excerpt
   _finish _finish nopanel true

    the area properties

7. Insert excerpt
   _lock _lock nopanel true

    the screen and click the area to see the Actionflow in action 

Example 2: Configuring an On Change Event

In this example, we'll set up an Actionflow to display a dynamic text string when a boolean field's state is changed (from false to true).

Image Added

1. On the screen where the Actionflow will be initiated from, Shop Customer Form, find the True/False Field, mailingList (use the 

   Insert excerpt
   _layers _layers nopanel true

   )

2. Click the field to open its properties

3. On the 

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

   , in the Event Handler section, click the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    to create a new event handler:
   1. Event Type: select On Change
   2. Action Method: choose Actionflow
   3. Click 

      Insert excerpt
      _save _save nopanel true

   4. Click the 

      Insert excerpt
      _addIcon _addIcon nopanel true

       icon to create a new Actionflow
4. On the Actionflow, select Click to Connect and choose an input of On Change

5. Using a

   Insert excerpt
   _action_calculate _action_calculate nopanel true

    Action, create an Output Attribute containing the following string:

   Code Block
   theme Emacs
   "Inform the customer that they will receive weekly emails with news and offers."

   See 1.11 Calculate Action Configuration

6. Create an Output Connection Point back to the Shop Customer Form screen
7. Drag the 

   Insert excerpt
   _input _input nopanel true

    node onto the Calculate action
8. Drag the 

   Insert excerpt
   _output _output nopanel true

    node onto the Calculate action
9. Map your new Output Attribute onto the dynamic text component, checkEmailText

   1. Remember to map this both on the output connector on the canvas, and on the output connection point under Connections
      

      Expand
      title Checkpoint
      Image Added

      
      

10. Close the Actionflow and 

    Insert excerpt
    _finish _finish nopanel true

     the new event handler properties

11. Insert excerpt
    _finish _finish nopanel true

     the True/False Field properties
12. To test the Actionflow, close and reopen the screen, ensuring it is 

    Insert excerpt
    _lock _lock nopanel true

    ed
    1. Populate the First Name and Last Name fields as these are mandatory fields and will show an error message if not populated
13. Click the 'Would the customer like to join the mailing list?' toggle to see the Actionflow in action 

Image Modified