Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
nameactionflow
nopaneltrue

What is an Event Handler?

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.Event handlers can be configured to respond to events by , such as running a 

Insert excerpt
_action
_action
nopaneltrue
 or
Insert excerpt
_actionflow
_actionflow
nopaneltrue
.

The types of event handler are:

Set event handlers

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.


Set Event Handlers on:
Event TypeDescriptionSupported ComponentsComponentSupported Data FieldsField
On ClickThe 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 This event is not triggered by the user typing into a field.

Area

-

Boolean

Date

Datetime

Number

String

On EnterThe user presses the Enter key in a data field.-
On Blur

The user mouse-clicks out of a data field.

The

Note: This event is triggered whether or not the data in the field has been changed.

-


Tip

You do not have to configure OnClick events for button components, because button actions are always triggered when the user mouse-clicks on themOn Click events are automatically set on button components. 

Event Types and Action Settings


Set Action Settings on:
Event TypeDescriptionComponentData Field
Double Click

The user double clicks in a grid.

View
Auto SaveThe user changes data in a grid, then clicks out of the cell.View
Drag Types & Drop TargetsUser drags an item from one part of a screen, and dropping on another part.

View

Kanban


Task PlanThe user starts a task plan or a task plan auto-starts according to its schedule.

On StartupThe user loads the application.

Adding an Event Handler

  1. From the a screen, click on a component or field to open its properties.In
    Insert excerpt
    _property_tabs
    _property_tabs
    nopaneltrue
  2. Click on the
    Insert excerpt
    _property_tabs
    _property_tabs
    nameaction
    nopaneltrue
     and i
    n the Event Handler section, click click the 
    Insert excerpt
    _AddaddIcon
    _AddaddIcon
    nopaneltrue
     to create a new event handler.
    PhixFlow opens  icon to create a new properties tab for the event handler.
  3. Select

    In the

    Event Type, Action Method and specific table-action or actionflow you require; see the properties below.
Event Handler
  1. New Event Handler 

    Insert excerpt
    _property_settings
    _property_settings
    nopaneltrue

Basic Settings

FieldDescriptionThe list shows only the
  1. , select an Event Type

Select the type of event that will trigger an action:

  • OnClick
  • OnEnter
  • OnBlur
  • OnChange.
  1. Tip

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


  2. Select an Action Method

Available when Event Type is selected.

Select the type of action
  1. :
    1. Table-Action
    2. No action
        1. Actionflow
    3. Other
    4. Action

      Available when Action Method is Table-Action.

    5. Either, select a table-action from the drop-down list
    6. Or, to find table-actions belonging to a specific table:Click 
        1. Click the 
          Insert excerpt
          _
      table
        1. add_
      list
        1. icon
          _
      table
        1. add_
      list
        1. icon
          nopaneltrue
       to show tables in the repository
    7. Expand the table.
    8. Drag a table-action from the list into this box.
    9. Actionflow

      Available when Action Method is Actionflow.

      To select an actionflow, do one of the following:

    10. Select an actionflow from the drop-down list.
    11. Click 
        1.  icon to create a new Actionflow or click the 
          Insert excerpt
          _actionflow_icon
          _actionflow_icon
          nopaneltrue
       to show actionflows in the repositoryClick 
        1.  icon to display a list of available Actionflows
        2. Table Action: Choose a table action from the dropdown or select the
          Insert excerpt
          _
      add
        1. tables
          _
      add
        1. tables
          nopaneltrue
       to create a new actionflow; see Creating ActionflowsOther

      Available when Action Method is Other.

      Select
        1.  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:
          • 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
          •  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
              nopaneltrue
               or 
              Insert excerpt
              _repository
              _repository
              nopaneltrue

      Adding Action Settings

      1. From a screen, right-click on a grid and press 
        Insert excerpt
        _view_show_config
        _view_show_config
        nopaneltrue

      Worked Examples

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

      In this example, we are using:

      • Course Management screen containing a grid of the School Courses data - this screen was created using the Tile with Buttons template
      • 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
      Tip

      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

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

      1. On thescreen where the Act

      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

      1.02 Actionflow Principles