Event Action
Use the Event Action block to take an action when the user interacts with elements on a page or form.
This block can be considered a more generic version of the Mouse/Keyboard Action block, where you can handle and take an action on any event, not just the Clicked, Double-Clicked, Right-Clicked and Key Pressed events.
Refer to the Event Action in Data Design block for dynamically generated content.
The block comes in two modes which are discussed below.
Mode 1
The Mode 1 version of the Event Action block consists of the following (from left to right, top to bottom):
Event Name: Value Parameter that accepts a text value representing the name of the event you want to handle and take an action on. See the Event names section for more details.
Element: Selectable Input to choose the element.
Tasks: a Flow Parameter where you connect blocks that specify what you want done when the event occurs. Use the Action/Event Info block to get more information about the event.
Mode 2
The Mode 2 version of the Event Action block consists of the following (from left to right, top to bottom):
Event Name: Value Parameter that accepts a text value representing the name of the event you want to handle and take an action on. See the Event names section for more details.
Element: Value Parameter that accepts either a text value in the form of a CSS Selector or an element value. The Element block comes pre-attached for your convenience but can be removed and customized.
Tasks: a Flow Parameter where you connect blocks that specify what you want done when the event occurs. Use the Action/Event Info block to get more information about the event.
Event names
Some of the common event names are given below:
| Event Name | Description |
|---|---|
click | Mouse click on the selected element |
contextmenu | Mouse right-click on the selected element |
dblclk | Mouse double-click on the selected element |
change | Changes to the selection of a Dropdown element |
keypress | Key press when the selected element is in focus |
blur | Selected element looses focus |
focus | Selected element gains focus |
For a more comprehensive list of event names please refer to:
NOTE: In general, the Event Action block can be used to handle any event not just the ones mentioned above or in the reference links.
Usage Examples
The image below shows an example of the Event Action block (Mode 1) where the Show Information Popup block is used to show a message when the selected button is clicked. This is an exact equivalent of the example shown in the Mouse/Keyboard action block.
The next image (below) shows an example of the Event Action block (Mode 2). Here the click event is handled and the button's state is set to disabled along with the appending of a status spinner to show that the app is processing some task.
NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:
Last updated
