Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
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 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
Event Handlers & Action SettingsAn 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 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.
|
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 itsTip |
---|
Only events available for this type of component will show - see Event Types table above. |
Adding Action Settings
From a screen, right-click on a grid and pressWorked Examples
Here are worked examples using the Retail 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
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:
|
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.
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 Click on the area to open its properties
- On the
, in the Event Handler section, click theInsert excerpt _property_tabs _property_tabs name action nopanel true
to create a new event handler:Insert excerpt _addIcon _addIcon nopanel true - Event Type: select On Click
- Action Method: choose Actionflow
- Click
Insert excerpt _save _save nopanel true - Click the
icon to create a new ActionflowInsert excerpt _addIcon _addIcon nopanel true - Name:
Open Shop Stock Statistics
- Name:
- Click
on the Split Area Top area propertiesInsert excerpt _save _save nopanel true - On the Actionflow, select Click to Connect and choose an input of On Click
- Create an Open Screen Actionflow that opens the Shop Stock Statistics screen
See 1.07 Open Screen Action Configuration/wiki/spaces/HELP12/pages/9615626407
Expand title Checkpoint
- Close the Actionflow and
the new event handler propertiesInsert excerpt _finish _finish nopanel true
- On the Split Area Top area properties, click the
Insert excerpt _property_tabs _property_tabs name style nopanel true - In the Style Settings section, tick Cursor and set this to Pointer (hand pointing)
- This indicates to your application users that this area is clickable
the area propertiesInsert excerpt _finish _finish nopanel true
the screen and click the area to see the Actionflow in actionInsert excerpt _lock _lock nopanel true
HTML Comment | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Example 2: Configuring a Double-Click EventConfigure a double-click action on a grid to open a screen where the selected record can be edited.
|
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).
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 Click the field to open its properties
- On the
, in the Event Handler section, click theInsert excerpt _property_tabs _property_tabs name action nopanel true
to create a new event handler:Insert excerpt _addIcon _addIcon nopanel true - Event Type: select On Change
- Action Method: choose Actionflow
- Click
Insert excerpt _save _save nopanel true - Click the
icon to create a new ActionflowInsert excerpt _addIcon _addIcon nopanel true
- On the Actionflow, select Click to Connect and choose an input of On Change
Using a
Action, create an Output Attribute containing the following string:Insert excerpt _action_calculate _action_calculate nopanel true Code Block theme Emacs "Inform the customer that they will receive weekly emails with news and offers."
See 1.11 Calculate Action Configuration/wiki/spaces/HELP12/pages/9615626393
- Create an Output Connection Point back to the Shop Customer Form screen
- Drag the
node onto the Calculate actionInsert excerpt _input _input nopanel true - Drag the
node onto the Calculate actionInsert excerpt _output _output nopanel true - Map your new Output Attribute onto the dynamic text component, checkEmailText
Remember to map this both on the output connector on the canvas, and on the output connection point under Connections
Expand title Checkpoint
- Close the Actionflow and
the new event handler propertiesInsert excerpt _finish _finish nopanel true
the True/False Field propertiesInsert excerpt _finish _finish nopanel true - To test the Actionflow, close and reopen the screen, ensuring it is
edInsert excerpt _lock _lock nopanel true - Populate the First Name and Last Name fields as these are mandatory fields and will show an error message if not populated
- Click the 'Would the customer like to join the mailing list?' toggle to see the Actionflow in action