App Builder overview

Learn how to create new apps and get to know the App Builder.

The App Builder is your tool to develop apps in Heisenware. It complements the App Manager, which is used to manage apps. The App Builder includes everything to build application logic, integrate external data, store data and build user interfaces.

Discover app building

Process data

Build application logic using functions and objects.

Integrate data

Connect external data sources and sinks with an app.

Store data and files

Utilize internal PostgreSQL, InfluxDB and file storage.

Configure appearance

Configure app look and structure for all devices.

Create user interface

Build easy-to-use UI with dynamic and static elements.

Simulate and test

Learn ways to fully test apps during build time.

Create and build an app

To create a new app, navigate to the Apps panel in your account and click on the +.

Create a new app

Once created, you can manage access and other settings and start building with the App Builder.

To start building, click on START APP BUILDER inside the development card. The App Builder opens and you can start building the app.

Collaboration: Workspace members can work simultaneously on the same app.

App Builder interface

The App Builder combines all components to build apps in just one interface.

App Builder interface

a) Page panel

Add and delete pages and subpages within an app. It allows easy navigation through the app while working in the App Builder.

b) Functions panel

Provides functions for building the application logic. Additional functions appear here when deploying an edge connector, using a code adapter, or creating an object of a class.

c) Media server

Upload, store, and manage custom, external resources for use in your app, such as images or .xlsx files containing data.

d) Top bar

The top bar houses various settings, access to UI elements, widgets, context settings, general information, and functionality unrelated to the app itself.

e) Logic board

The logic board is the core space for building the complete logic of your app. It is where you integrate data, build functionality and process data using functions, extending and linking them.

f) Functions

Functions, the key building blocks in Heisenware, perform specific actions and are either built-in or adapted from other systems or software libraries.

g) Sections

Organize functions into logical units using sections. This only impacts their representation. Sections can be named, folded, and unfolded to maintain a tidy logic board.

• Edit the sections name with the pen icon

• Duplicate a section with the copy icon

• Clear a sections cache with the x icon

• Delete a section with the bin icon

From the section toolbar, you can also add a memorizer and a trigger.

h) UI editor

The UI editor uses a WYSIWYG approach to create the user interface of the app, which makes the design intuitive and efficient. There are several UI elements available, ranging from simple text boxes to input and display widgets.

Good to know

This is a collection of general App Builder knowledge.

Drag and drop

Drag and drop is crucial when using the App Builder. It allows you to place elements and change their position in both the UI and the logic and also to connect all elements to each other.

Build time vs. runtime

In the context of the App Builder, it's crucial to differentiate between build time and runtime. Build time is when low-code developers design and configure the app using the App Builder, shaping the structure and logic of apps. On the other hand, runtime is the live phase, where the application actively runs, responds to user inputs, processes data, and executes functions, allowing users to interact with the live app.

Progressive Web Apps (PWAs)

Technically, apps built with the App Builder are Progressive Web Apps (PWAs). PWAs offer a user experience similar to native mobile apps, combining the strengths of web and mobile application development. They provide several advantages, including:

• Improved performance: Fast load times, smooth animations, and responsive interfaces for a seamless user experience.

• No installation required: Users can access PWAs without downloading and installing from an app store, reducing friction.

• Cost-effective development: Developing a PWA can be more cost-effective than building native mobile apps, as it eliminates the need for separate development for different platforms.