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. OpenFlower overview

The "Hello World" tutorial

A Hello World tutorial

PreviousOpenFlower overviewNextVideos

Last updated 6 months ago

  1. At your first contact with OpenFlower you will see the Login Screen.

If you haven't created your account yet, you can register a new account with the url /user/auth/register or the Sign up Link on the login page.

When you create a User without Invite-Link, this User will automatically get the role of an Administrator with their own Workspace.

The first Screen of the Admin Panel of OpenFlower shows the overview of all Applications (in the current selected Workplace). For new Installations & logins, the Workplace is named by the email of the logged in User.

  1. In OpenFlower you can create and find the building blocks of applications:

  • Navigations

  • Mobile Navigations

  • Apps

  • Modules

  • Folder

All these building blocks are displayed on the home screen. You can order these building blocks by folders.

  1. With the help of the blue "New" Button you can select and create a fresh, empty application. You will arrive at the App Editor Screen.

The main screen is divided into 4 sections. To create an Application typically starts to place any component from the red section to the application-space, yellow in the middle of the screen.

  1. Components can get placed next to each other or through Layers, so components can visually overlap.

The green area helps you to gather and prepare Data for your Application. Here data queries for multiple datasources as also data transformations and even javascript functions can get managed.

The blue area helps to see a hierarchical view of the components of an application as also to see in realtime their application state with current data and events.

The blue and red area consist of 2 panels between users can switch. (green marked areas)

In the blue section, general settings for an application can get managed, such as the applied theme, local Javascript and Style (CSS) embeds as also screen settings for expected resolutions.

In the red section, which opens automatically as soon as you click on a specific component in the application-space, all detail settings for the selected component can be made.

  • Data Binding to show selected data with the component

  • Event Bindings to take an user event and trigger an action

  • Layout Settings to adjust positions for labels, orientation and visibility

  • Style Settings to select colors, sizes and margins

  1. As soon as you like, you can share an Application with selected users to test together.

Based on your settings you can invite special users only or make the application public accessible, so everyone can see the application. If you want to invite co-editors for your application, you need to give them the desired rights / role.

After all tests are done, your application is ready to hit the market. You can use the "Preview Button" to explore how your Application looks for a standard logged in user.

  1. With the same button, but by help of the small arrow on the right, you can finally publish the application in it's current state. Make sure, the application is then accessible (Share menu) as you expect. (public or for selected users only)

Select individual Users or make the Application public for everyone.
OpenFlower Login Screen
Sign up screen to create a new user.
Application overview as welcome screen
Folder for Application building blocks
Application Editor - standard screen.
Screen Settings and Component details
You can use the "Share" Button to invite other OpenFlower Users to use the Application