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
  • Event names
  • ID and ID2 usage
  • Event Information
  • Usage Examples
  1. App Editor
  2. Page Flow
  3. Toolbox Blocks

Event Action in Data Design

PreviousInitialize Toggle Switch in Data DesignNextCollapsible Area Action in Data Design

Last updated 1 year ago

Block Information

Available in: Page Flow

Toolbox Category: Dynamic Action

Block Type:

Use the Event Action in Data Design block to take an action when the user interacts with elements that were generated using the block and dynamically added to the page or form.

The block consists of the following (from top to bottom):

NOTE: For the most common use cases, the ID and ID2 values need to be blank when using the Event Action in Data Design block.


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 in Data Design block can be used to handle any event not just the ones mentioned above or in the reference links.


ID and ID2 usage


Event Information


Usage Examples

The behavior of the block is similar to the block, with some important differences:

Works only with elements generated using block that are dynamically added.

Element Selection: You can only choose an element placed inside the selected element.

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.

Data Design: to choose the element whose element you want to target.

Element: to choose the element, within the selected , for which you want to handle events.

ID: Optional that accepts a value representing the unique value that was provided to the block. See below for more details.

ID2: Optional that accepts a value representing the secondary identifier that can be used to identify the desired element. See below for more details.

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. See Event Info section for more details about identifying the specific generated instance within which the event occurred.

Changes to the selection of a

The behavior of this block depends on the ID and ID2 and is detailed below:

ID and ID2 not provided: Operate on the selected element for all generated instances of the same element.

ID2 provided and ID not provided: Operate on the selected element for all generated instances of the same element with the same ID2 value.

ID provided and ID2 not provided: Operate on the selected element for all generated instances of the same element with the same ID value. Since we recommend the ID value to be unique, this would choose one from all the generated instances of the associated element.

ID and ID2 provided: Operate on the selected element for all generated instances of the same element with the same ID and ID2 value.

Within the blocks that are attached to the Tasks , the block can be used to get more information about the event.

Specifically in the context of dynamic content, the following additional information is provided (in addition to the ):

id: Provides the ID value that was provided to the block when generating this instance.

id2: Provides the ID2 value that was provided to the block when generating this instance.

name: Provides the .

design: Provides the of the element that was used to generate this instance.

NOTE: Please refer to the prerequisite information shown before seeing the example.

The image below illustrates an example in which the ID and ID2 are left blank and the click event is being managed for the Button element (Button75, labeled "Update").

Because both ID and ID2 are blank, the system will handle the click event for the button across all generated instances of the selected (DataDesign8).

When the click event occurs, the block is used to show a message containing the ID of the instance on which the element (Button75, labeled "Update") was clicked.

The image below shows the result of clicking the element (Button75, the Update button) for Company 2, which was rendered using the ID ST101.

💻
Event Action
Content from Data Design
Data Design
jQuery information about HTML events
Mozilla documentation on HTML events
Data Design
Data Design
Data Design
Data Design
Data Design
Content from Data Design
Content from Data Design
here
Data Design
Show Information Popup
Button
Button
Dropdown element
Content from Data Design
text
Event names section
Data Design
Data Design
text
Content from Data Design
text
Action/Event Info
Action/Event Info
Data Design
friendly name for the element
element identifier
Value Parameter
Selectable Input
Selectable Input
Value Parameter
Value Parameter
Flow Parameter
value parameters
Flow Parameter
value parameters
Regular
standard properties
Event Action in Data Design block
Event Action in Data Design block example
Result of the example shown