Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Events
  • Component events
  • Query events
  • Actions
  • Run a Workflow
  • Run query
  • Control components
  • Set temporary state
  • Go to app
  • Go to URL
  • Show notification
  • Copy to clipboard
  • Export data
  • Advanced
  • Only run when
  • Debounce and throttle
  1. Build Apps

Event handlers

PreviousGUI, Themes & StylesNextWrite JavaScript

Last updated 4 months ago

In Appizap, event handlers are responsible for collecting and processing events from components and queries, and executing subsequent actions. For example, for a Button component, you can add an event handler to trigger the Run query action in response to the button Click event.

Set event handlers wisely to provide a reactive and responsive user experience (UX). For example, triggering a get-all query after insert-new-data query finishes enables table automatically to refresh.

You can add as many event handlers as you want for a single component or query, and these event handlers run concurrently.

Events

Component events

Different components have different events. For example, Button components only have a Click event.

Input components have Change, Focus, Blur, and Submit events.

Query events

Running a query can result in success or failure, so queries have two events: Success or Failure. You can add event handlers to queries in Query editor.

Actions

There are a number of event handler actions available in Appizap for handling different scenarios. Set them in the Action dropdown list in an event handler.

Run a Workflow

Select and trigger a workflow that was defined earlier using Workflow Builder.

Run query

Trigger the selected query.

Control components

To control a component, select a component in the Component dropdown list and call one of its methods in the Method dropdown list.

Set temporary state

Go to app

Navigate to an Appizap app with optional query or hash parameters.

Parameter
Function

URL Query

Append ?key1=value1&key2=value2... to the URL of the app to be opened.

URL Hash

Append #key1=value1&key2=value2... to the URL of the app to be opened.

Go to URL

Navigate to an external URL.

Show notification

Show a floating notification of informational, success, warning, or error message.

Copy to clipboard

Copy a value to the clipboard.

Export data

Export data in a certain file type.

Advanced

Only run when

The action can be triggered only under a specified condition. Configure the running condition of an event handler in Only run when option, and then the event handler runs only when this condition evaluates to true.

Debounce and throttle

Debounce and Throttle reduce the frequency of triggering the action.

Debounce

Debounce delays an action. Once a debounce time is set, the action will not be executed immediately following the event until the debounce time passes. If the event occurs again before the time ends, the debounce time will be retimed. For example, an input component triggers a query once the user changes the text. If the query is expensive to run and you don't want to run it after every single character is typed, you can delay the execution of the query by setting the debounce time. Then the query will only run after the user finishes typing.

Throttle

Throttle lets an action happen only once during a specified period of time. By default, every single event triggers an action, but sometimes running an action can be costly. For example, you set an event handle to trigger Run query action to update data in response to the Click event, but you find that query too expensive to run, then you can set a throttle time to let the query run only once within a given time.

See on this page to know advanced settings.

Store data in a .

temporary state
advanced
Export file types