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.
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
or Insert excerpt _action _action nopanel true
. Insert excerpt _actionflow _actionflow nopanel true
The types of event handler are:
Set event handlersMultiple 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 Type | Description | Supported ComponentsComponent | Supported Data FieldsField |
---|---|---|---|
On Click | The 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 Enter | The user presses the Enter key in a data field. | - | |
On Blur | The user mouse-clicks out of a data field. TheNote: 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 Type | Description | Component | Data Field |
---|---|---|---|
Double Click | The user double clicks in a grid. | View | |
Auto Save | The user changes data in a grid, then clicks out of the cell. | View | |
Drag Types & Drop Targets | User drags an item from one part of a screen, and dropping on another part. | View Kanban | |
Task Plan | The user starts a task plan or a task plan auto-starts according to its schedule. | ||
On Startup | The user loads the application. |
Adding an Event Handler
- From the a screen, click on a component or field to open its properties.In
Insert excerpt _property_tabs _property_tabs nopanel true - Click on the
and in the Event Handler section, click click theInsert excerpt _property_tabs _property_tabs name action nopanel true
to create a new event handler.PhixFlow opens icon to create a new properties tab for the event handler.Insert excerpt _AddaddIcon _AddaddIcon nopanel true - Select
In the
Event Type, Action Method and specific table-action or actionflow you require; see the properties below.
New Event Handler
Insert excerpt _property_settings _property_settings nopanel true
Basic Settings
, select an Event Type
Select the type of event that will trigger an action:
- OnClick
- OnEnter
- OnBlur
- OnChange.
Tip Only events available for this type of component will show - see Event Types table above.
- Select an Action Method
Available when Event Type is selected.
Select the type of action- :
- Actionflow
Available when Action Method is Table-Action.
- : Click the
Insert excerpt _
- : Click the
add_
icon _
add_
icon nopanel true
Available when Action Method is Actionflow.
To select an actionflow, do one of the following:
- icon to create a new Actionflow or click the
Insert excerpt _actionflow_icon _actionflow_icon nopanel true
- icon to create a new Actionflow or click the
icon to display a list of available ActionflowsTable Action: Choose a table action from the dropdown or select theInsert excerpt _
tables _
tables nopanel true
Available when Action Method is Other.
Selecticon to find table-actions belonging to a specific table:Click the chevron to expand the table in the RepositoryDrag a table-action from the list into the Table Action box.ZB remove completely?
- 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
orInsert excerpt _layers _layers nopanel true Insert excerpt _repository _repository nopanel true
- The required component must be dragged and dropped into the Screenshot Component box from the
Adding Action Settings
- 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 templateA 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 |
---|
|
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.
On thescreen where the Act
Example 2: Configuring an On Blur Event
Create an Open Screen Action that opens an empty input form.
On thescreen where the Act
Example 3: Configuring an Double Click Event
Create an Open Screen Action that opens an empty input form.
On thescreen where the Act