Zingy Docs
Visit our websiteTry a DemoPricingContact
  • Introduction
  • 🎛️Dashboard
    • Overview
    • Apps
    • Account Profile
    • Billing - View Invoices
    • Billing - Payment Methods
    • Billing - Subscription
  • 💻App Editor
    • App Components
    • App Editor Tour
    • App Settings
    • App Users
    • App User Groups
    • Publishing your App
    • Pages and Forms
      • Create a Page
      • Create a Structured Page
      • What is a Structured Page ?
      • Create a Form
      • Page Editor
      • Working with Forms
    • Page Editor
      • Page Editor Tour
      • Adding Page Content
      • Adding Content to Structured Pages
      • Working with Page Elements
      • Page Element Settings
      • Responsive Design
      • Padding and Margin
      • Editing Text
      • Using AI Wiz in the Page Editor
      • Built-in elements
        • Link
        • Image
        • Spacer
        • Flexible Area
        • Layout Container
        • Layout Row
        • Layout Column
        • 1 Column
        • 2 Columns
        • 3 Columns
        • Add Column
        • Table
        • Table Row
        • Table Column Cell
        • Table Heading Cell
        • Table (3 cols)
        • Table (4 cols)
        • Input
        • Checkbox
        • Toggle Switch
        • Dropdown
        • Multi-line
        • Label
        • Button
        • Button Group
        • Input Group
        • Button Toolbar
        • Menubar Holder
        • Menubar Collapsible
        • Menubar
        • Menubar Item
        • Menubar Item Link
        • Menubar Style1
        • Menubar Style2
        • Menu Item
        • Popup Menu
        • Popup Menu Item
        • Menubar Popup Menu
        • Popup Menu Style1
        • Popup Menu Style2
        • Popup Menu Separator
        • Card
        • Card Group
        • Card Style1
        • Card Style2
        • Card Style3
        • Alert
        • Badged Text
        • Collapsible Area
        • Data Table
        • Stripe Payment
        • Form
        • Menubar Login Info
        • Data Design
      • Working with Forms
      • Using Forms
      • Page Preview
    • Page Settings
    • Page Flow
      • Block Anatomy
      • Toolbox Blocks
        • Set Content
        • Get Content
        • Badged Text
        • Alert Text
        • Status Animation
        • Set Style
        • Set CSS
        • Set Input Value
        • Get Input Value
        • Set Toggle Switch State
        • Get Toggle Switch State
        • Set Input Feedback
        • Enable/Disable Element
        • Set Element Attribute
        • Get Element Attribute
        • Get Element by Name
        • Element
        • URL Parameter Value
        • Navigate Page
        • Timer
        • Timer Repeat
        • Show Popup Form
        • Show Information Popup
        • Show Confirmation Popup
        • Popup Form Data
        • Collapsible Area Action
        • Mouse/Keyboard Action
        • Event Action
        • Action/Event Info
        • Show Menu
        • Menu Text
        • Menu Index
        • Write Log Message
        • Log Category
        • Data Table Action Menu Customize
        • Data Table Attach Form
        • Data Table Add Action
        • Data Table Load Next Page
        • Data Table Load Prev Page
        • Data Table Refresh
        • Data Table Custom Query
        • Data Table : Table Name
        • Data Table : Data
        • Content from Data Design
        • Set Content in Data Design
        • Get Content in Data Design
        • Get Element Attribute in Data Design
        • Set Element Attribute in Data Design
        • Set Style in Data Design
        • Set CSS in Data Design
        • Set Input Value in Data Design
        • Get Input Value in Data Design
        • Get Toggle Switch State in Data Design
        • Set Toggle Switch State in Data Design
        • Set Input Feedback in Data Design
        • Enable/Disable Element in Data Design
        • Initialize Toggle Switch in Data Design
        • Event Action in Data Design
        • Collapsible Area Action in Data Design
        • Data Record Count
        • Data Record at Index
        • Data Record Loop
        • Data Record Info
        • Data Record Loop Index
        • Data Record ID
        • Data Table Name
        • Data Query Name
        • Data Read
        • Data Read Next
        • Data Read Previous
        • Data Lookup
        • Data Lookup with ID
        • Data Status
        • Data Add Record
        • Data Update Record with ID
        • Data Delete Record with ID
        • Data Input Popup
        • Lock/Unlock Form
        • Save Form with Data
        • Reset Form
        • Set Form Event Status
        • Set Form Event Status Message
        • Form Submit Complete
        • Set Field Input Value
        • Get Field Input Value
        • Form Data
        • Form in Edit Mode
        • Form Events
        • Execute Connection Command
        • Execute API Call
        • Connection Data
        • Connection Error
        • API Call Connection
        • Connection
        • Connection Command
        • Cloud Flow Invoke Hook
        • Cloud Flow : URL of Web Hook
        • HTTP Post
        • HTTP Get
        • HTTP Data
        • HTTP Error
        • Date
        • Custom Code
        • Date from Text
        • Get Object Property
      • Coding in Page Flow
      • Zingy API For Page Flow
      • References
        • Value Types
        • Popup Customization
        • Prerequisite for Dynamic Content block examples
        • Prerequisite for Data examples
    • Dynamic Content
    • Data
      • Database Tables
      • Database Queries
      • Data Tool
    • Cloud Flow
      • Cloud Flow Editor
      • Block Anatomy
      • Toolbox Blocks
        • Data Update Records
        • Data Delete Records
      • Coding in Cloud Flow
      • SDK/Library Integration
    • Media
    • Connections
      • Services
        • Stripe
        • Sendgrid
        • Twilio
        • API Call
        • API Key
Powered by GitBook
On this page
  • Mode 1
  • Mode 2
  • Event names
  • Usage Examples
  1. App Editor
  2. Page Flow
  3. Toolbox Blocks

Event Action

PreviousMouse/Keyboard ActionNextAction/Event Info

Last updated 1 year ago

Block Information

Available in: Page Flow

Toolbox Category: Action - Event

Block Type:

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 , 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 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):

Mode 2

The Mode 2 version of the Event Action block consists of the following (from left to right, top to bottom):


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

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 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:

Event Name: that accepts a value representing the name of the event you want to handle and take an action on. See the for more details.

Element: to choose the element.

Tasks: a where you connect blocks that specify what you want done when the event occurs. Use the block to get more information about the event.

Event Name: that accepts a value representing the name of the event you want to handle and take an action on. See the for more details.

Element: that accepts either a value in the form of a or an value The Element block comes pre-attached for your convenience but can be removed and customized.

Tasks: a where you connect blocks that specify what you want done when the event occurs. Use the block to get more information about the event.

Changes to the selection of a

The image below shows an example of the Event Action block (Mode 1) where the block is used to show a message when the selected button is clicked. This is an exact equivalent of the example shown in the .

💻
jQuery information about HTML events
Mozilla documentation on HTML events
Wikipedia article on CSS
Mozilla Developer Network article on CSS selectors
Dropdown element
Mouse/Keyboard Action block
Event Action in Data Design
text
Event names section
Action/Event Info
text
Event names section
text
CSS Selector
element
.
Action/Event Info
Show Information Popup
Value Parameter
Selectable Input
Flow Parameter
Value Parameter
Value Parameter
Flow Parameter
Regular
Mouse/Keyboard action block
Event Action block (Mode 1)
Event Action block (Mode 2)
Example of Event Action block (Mode 1)
Example of Event Action block (Mode 2)