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
      • SAAS Mode
      • Enterprise 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

Was this helpful?

  1. Lowcoder overview

The "Hello World" walk

A short tutorial walk through Lowcoder

PreviousLowcoder overviewNextCloud & Private Cloud

Last updated 8 months ago

Was this helpful?

At your first contact with Lowcoder 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 own Workspace(s).

The fist Screen of the Admin Panel of Lowcoder shows the overview of all Apps (in the current selected Workplace). For new Installations & logins, the Workplace is named by the eMail of the logged in User.

In Lowcoder you can create and find the building blocks of applications:

  • Navigations

  • Mobile Navigations

  • Apps

  • Modules

  • Folder

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

Currently only a flat list of Folders are supported. But in future versions we aim to support a full hierarchy for the application building blocks.

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

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

Components can get placed next to each other. In future versions we aim to support Layers, so components can visually overlap. As for now, only next by next components are possible.

The green area helps you to gather and prepare Data for your App. 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 app 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 app 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 app-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

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

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

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

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 app is then accessible (Share menu) as you expect. (public or for selected users only)

We have created an App that contains all the useful demos about Lowcoder key Concepts and different Components. You may have a headstart by going through these Demos on following link :

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