Build User Interface

The UI is what end users of your apps see and interact with. It can range from simple data visualizations and dashboards to interactive apps for user input, file management, and more.

However, UI is optional. You can build "headless" applications that consist entirely of backend logic (e.g., a data bridge between a PLC and a SQL database) that run silently without any visual frontend.

Core UI Components

• Widgets: The functional components of your app. They display live data (charts, gauges), capture user input (forms, date pickers), or trigger logic (buttons).

• Pages: The individual screens or views of your application. You can create multiple pages and sub-pages to structure your app logically, then configure navigation elements (like a menu bar) to allow users to move between them.

• Text, icons, and images: Mostly static elements used for branding, instructions, and non-interactive content. They provide the necessary context for your users to navigate the app effectively.

• PDF templates: Visual layouts used to generate dynamic documents. Much like designing a page, you use the PDF template editor to map variables onto a document background, which is then populated by your backend logic.

• Theme: While not a physical component, the theme defines the global visual DNA of your app. It ensures a consistent look across all widgets and pages, allowing you to align the entire interface with your corporate branding in a few clicks.

UI Builder

The UI Builder is where you turn backend logic into a functional, user-facing application. On your pages, you place static elements for context and dynamic widgets that are controlled and configured by your backend logic.

You can build apps for any screen size and seamlessly switch the preview during the building process to ensure your layout works on everything from a smartphone to a large desktop monitor.

The toolbar

The toolbar is your primary toolkit for composing the interface. It holds buttons and icons to:

• Add a text box, icon, or widget (input, trigger, display).

• Switch the screen preview (XS–XL) and adjust page height.

• Scale the view (zoom in/out).

• Edit or delete the selected widget.

Screen preview and responsive behavior settings

Production apps are inherently responsive and adapt automatically to different screen sizes. To control exactly how your app behaves on different hardware, you have several specialized tools in the toolbar:

• Switching previews: Click the screens icon () and then click on a device icon (from phone to monitor) to switch to the corresponding UI editor and adapt your layout.

• Enable scrolling: Use the page height icon () to add vertical space and enable scrolling for the selected device size. This is a permanent property of the page for that specific screen size, allowing you to have a scrolling view on mobile while keeping a "fixed" dashboard on desktop.

If you try to reduce a page's height and it doesn't change, a widget is likely positioned outside the valid area. You must move or delete that widget before the height can be reduced.

• Enable/disable screens: You can enable or disable specific screen sizes by right-clicking the respective device icon. By default, only the phone (XS), tablet (S), and laptop (L) are active. Vertical tablet (M) and desktop (XL) are deactivated.

If a user opens your app on a disabled screen size, the system automatically scales the layout from the nearest activated device size. This typically results in a smaller rendering of widgets and data to ensure everything remains visible.

• Content alignment (L & XL): On large monitors, you can decide how the overall content sits on the screen. Right-click the L or XL icons to choose between Left-aligned or Centered layouts.

• Scaling: Use the scaling bar to zoom in or out of the current preview. This is a design-time aid only. It helps you work on complex layouts in the editor and does not change the actual size of the app for the end-user. However, the UI builder also supports auto-scaling, which is enabled by default.

Best practice: Mobile-first workflow

By default, Heisenware uses an inheritance system where changes made on smaller screens often propagate to larger ones.

1. Start with XS (phone): We recommend designing your layout for the phone first. While you can always increase the page height to add more room, starting on the smallest screen ensures your basic structure is solid.

2. Scale up: Once the mobile view is set, switch to tablet (S) or laptop (L). You’ll find most of your work is already done, and you only need to "spread out" the widgets to take advantage of the extra horizontal real estate.

3. Fine-tuning: Any adjustment you make on a larger screen stays local to that view. This allows for pixel-perfect optimization for control room monitors without breaking the mobile experience.