App Builder Overview

The App Builder is a core component of the Heisenware platform. It is a visual development environment used to build, test, and deploy applications. Accessed directly from the App Manager, it provides a focused environment for developing one application at a time.

Interface architecture

The interface is organized into four distinct spatial zones to manage the application lifecycle and development workflow.

• Top bar with global tools: Manages application-wide configurations, editor modes, and the deployment pipeline. This is where you access theme editing, the PDF template editor, and handle the app lifecycle (testing, versioning, and deployment).

• Left panel: The structural repository for assets. It houses the functions library for logic blocks, page management for UI structure, and the internal file server for managing raw data and media.

• Flow Builder: A global, application-wide canvas for designing backend logic. This is the heart of your backend development, where functions are wired together to create automated flows.

• UI Builder: A page-specific design canvas for composing user interfaces for all screen sizes. This is where you build user interfaces (UI) using text, images, and interactive widgets.

How it works

Heisenware uses a highly integrated development process. Rather than working in isolated stages, you build logic, design interfaces, and configure data connections simultaneously within a single environment.

Build backend logic

The Flow Builder is the environment for building your application backend. You create event-driven sequences by dragging components from the library onto the canvas.

• Functions: The atomic building blocks of an app. These include standard utility blocks, industrial drivers, and custom code adapters (Node.js, Python, or C++).

• Global scope: Logic in the Flow Builder is persistent. It runs independently of the active UI page, making it the central hub for continuous data processing or system monitoring.

• Edge Agents: Secure bridges for isolated networks. You configure Native or Docker Agents to tunnel data from local systems directly into your application logic.

Build user interface (UI)

The UI Builder is the environment for building your application frontend. This canvas is page-specific. Selecting a page in the left panel on the app's own menu updates the builder to show that specific screen layout.

• Widgets: Functional components like gauges, charts, and input fields. You drag these onto the canvas to compose the interface.

• Theme editing: A global editor accessed via the top bar. It defines the styles and colors that ensure visual consistency across all pages and widgets.

• Page hierarchy: A management tool in the left panel used to create, nest, and organize the application structure.

Unified data binding

The core strength of the App Builder is the ability to connect virtually any element to any other via data binding. This creates a bidirectional flow between the app's interface and the logic.

• Connect anything to everything: You can link a button to a function trigger, bind an input field to a function's input parameters, or use a function's output to visualize data, toggle a button's state, or update a gauge's value.

• Property and event binding: Beyond just data values, you can bind to widget properties like scale, visibility, or color, allowing the backend logic to drive the UI's appearance dynamically.

• Reactive synchronization: The system eliminates manual glue code. The interface and logic remain in sync in real time as data flows through the application.