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 

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 Action Method:
   1. Actionflow: 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 Actionflows
   2. Table Action: Choose a table action from the dropdown or select the

      Insert excerpt
      _tables _tables 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? 
   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 

          Insert excerpt
          _layers _layers nopanel true

           or 

          Insert excerpt
          _repository _repository nopanel true

Adding Action Settings

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

   Insert excerpt
   _view_show_config _view_show_config nopanel true

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

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.

1. On the screen where the Actionflow will be initiated from, Orders Management, click on the area, ClickableArea (use the 

   Insert excerpt
   _layers _layers nopanel true

   ) to open its properties

2. 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: On Click
   2. Action Method: Actionflow
   3. Click 

      Insert excerpt
      _save _save nopanel true

   4. Click the 

      Insert excerpt
      _addIcon _addIcon nopanel true

       icon to create a new Actionflow
   5. Create an Open Screen

1. 1. Actionflow that opens

1. On thescreen where the Act
   1. the Staff Management screen
      1. See 1.07 Open Screen Action Configuration

   2. Insert excerpt
      _finish _finish nopanel true

       the new event handler properties

2. Insert excerpt
   _finish _finish nopanel true

    the area properties

3. Insert excerpt
   _lock _lock nopanel true

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

Example 2: Configuring an On Blur Event

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

1. On thescreen where the Act

Example 3: Configuring an Double Click Event

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

1. On thescreen where the Act