Flower Docs
  • OpenFlower overview
    • The "Hello World" tutorial
  • Videos
    • OpenFlower in 100 seconds
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Access local database or API
      • Google Cloud Platform
      • Heroku
      • Migration from Openblocks
      • Update MongoDB Versions
      • OpenFlower Version Update
      • Traefik loadbalancer
      • SMTP Server
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • OpenFlower Marketplace
  • ✨Build Applications
    • Create a new App
      • Modules
      • Version and Release Management
    • App Editor
      • Visual Components
        • Common Component Settings
        • File upload
        • Charts and graphs
        • Image
        • Option lists
        • List View
        • Drawer
        • Google Maps
        • Table
        • Messages / Toast
        • Calendar
      • Date handling
      • Bulk Editing
      • Layers
      • Data selection & Javascript
      • Use Markdown
      • Keyboard shortcuts
    • App Navigation
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
  • 🚀Connect your Data
    • Data source basics
    • Data sources in OpenFlower
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • 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
    • Embedd an App
      • Embed Apps in React
      • Native embed SDK
        • Build the SDK from Source
  • 🔥OpenFlower 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
    • OpenFlower Open REST API
Powered by GitBook
On this page
  1. Build Applications

App Interaction

How to use Events inside of Apps

There are two ways to extend the standard components with interaction. If you are fluent in Javascript, you can develop many interaction control by classic javascript with many helper functions. If you are not "the hacker", you will find the existing GUI elements and controls for interaction helpful.

Any interaction starts with "Event handlers", which you will find at almost each component. Based on possible user interactions, you can take events as triggers to realize a wise set of actions. In most of the cases you can combine multiple event triggers by adding Event handlers with different Actions configurations

PreviousApp NavigationNextEvent handlers

Last updated 8 months ago

✨