Overview

Understand what the App Builder is, get to know its main components and how the App Builder is integrated into the Heisenware platform.

In Heisenware, the App Builder is the primary low-code tool to build apps. To access it:

  1. Navigate to the Apps panel in your account.

  2. Create a new app or click on the app you want to work on.

  3. Click on Start App Builder inside the development card.

The App Builder is designed to focus on one app at a time. If you need to work on multiple apps simultaneously, you can open several App Builder tabs in your browser. Collaboration within the App Builder is also possible, allowing Workspace members to work together on the same app.

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 application 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 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.

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 frontend and backend.

  • Connect all elements to each other using drag and drop.

Components

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

Page panel

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

Functions panel

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

File manager

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

Top bar

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

Logic board

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

Functions

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

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.

  • Create a new section using the + icon in the bottom right-hand corner.

  • Change a section's name with the edit icon, and remember to save changes with the save icon.

  • Delete a section with the trash can icon, exercising caution as it removes the section and its content.

  • Duplicate a section with the duplicate icon.

  • Clear cache of a section using the clear cache icon.

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.

Last updated

#284:

Change request updated