Versions Compared

Key

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

Insert excerpt
_Banners
_Banners
nameactionflow
nopaneltrue

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. 


Excerpt
nameEventActions

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 an 

Insert excerpt
_actionflow
_actionflow
nopaneltrue
.

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 Events/Actions on:
Event/ActionDescriptionComponentData Field
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 event is not triggered by the user typing into a field.

-

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.

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

-
Double ClickThe 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

Area


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

On StartupThe user loads the application.

ActionflowSet a double click action that will override any default double-click action set on the View.View Component
Tip

On Click events are automatically set on button components. 

Adding an Event Handler

From a screen, click on a component or field to open its Insert excerpt_property_tabs_property_tabsnopaneltrueClick on the Insert excerpt_property_tabs_property_tabsnameactionnopaneltrue and in the Event Handler section, click the  Insert excerpt_addIcon_addIconnopaneltrue icon to create a new event handlerIn the New Event Handler excerpt-include
_property_settings_property_settingsnopaneltrue, select an Event Type
Tip

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


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

Adding Action Settings

From a screen, right-click on a grid and press  Insert excerpt_view_show_config_view_show_confignopaneltrueOn the View's Insert excerpt_property_settings_property_settingsnopaneltrue, click on the Insert excerpt_property_tabs_property_tabsnameactionnopaneltrue
  • In the Action Settings section, under Double Click Action, select Actionflow
  • Click the  Insert excerpt_add_icon_add_iconnopaneltrue icon to create a new Actionflow or click the  Insert excerpt_actionflow_icon_actionflow_iconnopaneltrue icon to display a list of available Actionflows

    Worked Examples

    Here are worked examples using the Retail Data (available from the Learning Centre).

    In this example, we are using:

    • 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
    • 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
    • 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
    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 events on:

    • the Shop Stock screen to open the Shop Statistics screen
    • the Shop Customer Form to display a specified text string

    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. 


    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
      nopaneltrue
      )

    2. Click on the area to open its properties

    3. On the 
      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue
      , in the Event Handler section, click the 
      Insert excerpt
      _addIcon
      _addIcon
      nopaneltrue
       to create a new event handler:
      1. Event Type: select On Click
      2. Action Method: choose Actionflow
      3. Click 
        Insert excerpt
        _save
        _save
        nopaneltrue
      4. Click the 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         icon to create a new Actionflow
        1. Name: Open Shop Stock Statistics
      5. Click 
        Insert excerpt
        _save
        _save
        nopaneltrue
         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/wiki/spaces/HELP12/pages/9615626407

          Expand
          titleCheckpoint


      8. Close the Actionflow and 
        Insert excerpt
        _finish
        _finish
        nopaneltrue
         the new event handler properties
    4. On the Split Area Top area properties, click the 
      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
    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
      nopaneltrue
       the area properties
    7. Insert excerpt
      _lock
      _lock
      nopaneltrue
       the screen and click the area to see the Actionflow in action 
    HTML Comment
    hiddentrue

    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

      Insert excerpt
      _view_show_config
      _view_show_config
      nopaneltrue

    2. On the View's

      Insert excerpt
      _property_settings
      _property_settings
      nopaneltrue
      , click on the
      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue

    3. In the Action Settings section, under Double Click Action, select Actionflow
    4. Click the 
      Insert excerpt
      _addIcon
      _addIcon
      nopaneltrue
       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/wiki/spaces/HELP12/pages/9615626407

        2. Expand
          titleHint

          Remember to map across the customerID.


      3. Close the Actionflow and 
        Insert excerpt
        _finish
        _finish
        nopaneltrue
         the view properties
      4. Insert excerpt
        _lock
        _lock
        nopaneltrue
         the screen and double-click a record in the grid 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).

    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
      nopaneltrue
      )

    2. Click the field to open its properties

    3. On the 
      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue
      , in the Event Handler section, click the 
      Insert excerpt
      _addIcon
      _addIcon
      nopaneltrue
       to create a new event handler:
      1. Event Type: select On Change
      2. Action Method: choose Actionflow
      3. Click 
        Insert excerpt
        _save
        _save
        nopaneltrue
      4. Click the 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         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
      nopaneltrue
       Action, create an Output Attribute containing the following string:

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

      See 1.11 Calculate Action Configuration/wiki/spaces/HELP12/pages/9615626393

    6. Create an Output Connection Point back to the Shop Customer Form screen
    7. Drag the 
      Insert excerpt
      _input
      _input
      nopaneltrue
       node onto the Calculate action
    8. Drag the 
      Insert excerpt
      _output
      _output
      nopaneltrue
       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
        titleCheckpoint


    10. Close the Actionflow and 
      Insert excerpt
      _finish
      _finish
      nopaneltrue
       the new event handler properties
    11. Insert excerpt
      _finish
      _finish
      nopaneltrue
       the True/False Field properties
    12. To test the Actionflow, close and reopen the screen, ensuring it is 
      Insert excerpt
      _lock
      _lock
      nopaneltrue
      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 Removed/wiki/spaces/HELP12/pages/9615606365