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
  • Data visualization Components
  • Data entry Components
  • Layout Components
  • Special Components
  • Extensible Components
  1. Build Applications
  2. App Editor

Visual Components

PreviousApp EditorNextCommon Component Settings

Last updated 7 months ago

With Version 2.0.0 of OpenFlower there are 56 Components.

These components share a number of .

Data visualization Components

Data entry Components

Layout Components

Special Components

Extensible Components

✨
common settings and configurations
Cover

Text

Cover

Rating

Cover

Link

Cover

Progress

Cover

Progress - Circle

Cover

File Viewer

Cover

QR Code Display

Cover

Json Explorer

Cover

Tree

Cover

Audio

Cover

Video

Cover

Carousel

Cover

Iframe

Cover

Table

Cover

Image

Cover

List View

Cover

Charts

Cover

Calendar

Cover

Form

Cover

Json Schema based Form

Cover

Rich Text Editor

Cover

Input

Cover

Text Area

Cover

Password Field

Cover

Number Input Field

Cover

Select Field

Cover

Multi Select Field

Cover

Tree Select

Cover

Cascader

Cover

Slider

Cover

Range Slider

Cover

Segmented Control

Cover

Dropdown

Cover

Switch

Cover

Checkbox Field

Cover

Radio Buttons

Cover

Rating

Cover

Navigation

Cover

QR & 1D Code Scanner

Cover

Signature Input Field

Cover

Calendar

Cover

Date Input Field

Cover

Date Range Input Field

Cover

Time Input Field

Cover

Time Range Input Field

Cover

Json Editor

Cover

Image Editor

Cover

Table

Cover

File Upload

Cover

Container

Cover

Tabbed Container

Cover

Modal

Cover

Toggle Button

Cover

Divider

Cover

Drawer

Cover

Collapsible Container

Cover

List View

Cover

Grid

Cover

Json Editor

Cover

Json Explorer

Cover

Json Schema based Form

Cover

QR Code Display

Cover

QR & 1D Code Scanner

Cover

Signature Input Field

Cover

File Viewer

Cover

Tree

Cover

Image Editor

Cover

Iframe

Cover

Calendar

Cover

Json Schema Form

Cover

Chart / EChart

Cover

Custom Component