Lowcoder Documentation
  • Lowcoder overview
    • The "Hello World" walk
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Google Cloud Platform
      • Easypanel
      • Heroku
      • Raspberry Pi
      • Access local database or API
      • Update MongoDB Versions
      • Lowcoder Version Update
      • Traefik loadbalancer
      • SMTP Server
      • Migration from Openblocks
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
      • Multi-Workspace Mode
      • Single Workspace Mode
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • Lowcoder Marketplace
  • ✨Build Applications
    • Create a new App
      • App(s) Navigation
      • Modules
      • Version and Release Management
    • App Editor
      • Query & Editing Roundtrips
      • Bulk Editing
      • Keyboard shortcuts
      • Data selection & Javascript
      • Layers
      • Visual Components
        • Common Component Settings
        • Messages / Toast
        • Dashboard & Reporting
          • Table
          • Charts and graphs
            • Bar Chart
            • Line Chart
            • Pie Chart
            • Scatter Chart
            • CandleStick Chart
            • Funnel Chart
            • Gauge Chart
            • Graph Chart
            • Heatmap Chart
            • Radar Chart
            • Sankey Chart
            • Suburst Chart
            • Theme River Chart
            • Tree Chart
            • Treemap Chart
            • Mermaid Chart
          • Google Maps
        • Layout & Navigation
          • List View
          • Drawer
          • Modal
          • Navigation
          • Cascader
          • Tree / Tree Select
          • Link
          • Floating Button
          • Text
          • Step Control
          • Page Layout
          • Content Card
          • Tabbed Container
        • Data Collection & Forms
          • Form
          • Input Field Types
          • JSON Schema Form
        • Meeting & Collaboration
        • Project Management
        • Calendar & Scheduling
          • Calendar
          • Date & Date Range
          • Time & Time Range
        • Document & File Management
          • File upload
        • Item & Signature Handling
        • Multimedia & Animation
          • Image
        • Integration & Extension
        • Legacy & Deprecated
      • Option lists
      • Date handling
      • Use Markdown
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
    • Video Calls in Lowcoder
  • 🚀Connect your Data
    • Data source basics
      • Configure IP allowlists
    • Data sources in Lowcoder
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • Supabase
          • Supabase PostgreSQL
          • Supabase Assets API
          • Supabase RealTime
          • Supabase OAuth
        • PostgreSQL
        • Microsoft SQL Server
        • Oracle
      • NoSQL Databases
        • MongoDB
        • CouchDB
        • DynamoDB
      • InMemory Databases
        • Redis
      • File Storages
        • S3 File Storage
      • BigData & OLAP
        • Big Query
        • Snowflake
        • ClickHouse
        • Elasticsearch
      • Websocket Datasource
    • Query basics
      • Bind Query Data to Components
      • Query library
  • 🪄Workflows
    • n8n Integration
  • 💫Business Logic in Apps
    • Write JavaScript
      • JavaScript query
      • Temporary state
      • Transformers
      • Data responder
      • Built-in JS functions
  • 🙌Publish Apps
    • Share an App
    • Publish an App
    • Embed an App
      • Embed App in HTML Pages
      • Embed App in WordPress Pages
      • Embed Apps in React
      • Embed Apps in NEXT.JS
      • Native embed SDK
        • Build the SDK from Source
  • 🔥Lowcoder Extension
    • Opensource Contribution
      • Develop UI components for Apps
      • Develop Data Source Plugins
    • Use third-party libraries in Apps
      • Day.js Date handling
      • Import your own JavaScript Library
    • Custom component
    • Lowcoder Open REST API
  • Lowcoder for Enterprise
    • Custom branding
Powered by GitBook
LogoLogo

More to try...

  • Lowcoder Website
  • Free Cloud Platform
  • Github
  • Discord

© Lowcoder Software LTD

On this page
  • Events
  • Component events
  • Query events
  • Actions
  • 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

Was this helpful?

  1. Build Applications
  2. App Interaction

Event handlers

In Lowcoder, 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 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 Lowcoder for handling different scenarios. Set them in the Action dropdown list in an event handler.

See advanced on this page to know advanced settings.

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

Store data in a temporary state.

Go to app

Navigate to an Lowcoder 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.

Use case

In the User list app, click See info to navigate to the User info app, and the detailed information of the user in the selected row will be displayed.

  1. The User list app passes {{currentRow.id}} in the table row as a URL Query parameter to the User info app.

  2. The URL field of the User info app global variable will automatically resolve the URL requested by the app. In this case, the value of url.query is {"id":3}, so the query will retrieve the corresponding user info via {{url.query.id}}. See the figure below.

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 (TXT, JSON, CSV, and Excel).

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.

PreviousApp InteractionNextThemes & Styling

Last updated 10 months ago

Was this helpful?

✨