Navigating the App Builder Interface

When you first open the App Builder, you'll see the main interface.

Left Sidebar

• App Configuration: Located at the top of the left sidebar, this section allows you to adjust settings and configurations for the entire app.
• Navigator: Just below the App Configuration, you'll find the Navigator, which provides a flowchart representation of your app's structure. Keep in mind that as your app becomes more complex, the accuracy of this flowchart may decrease.
• Search Bar: Use this tool to quickly find specific screens within your app.
• Screens List: Below the search bar, screens are organized into two categories: Private and Public. This makes it easy to manage and navigate between different sections of your app.

Right Sidebar

The right sidebar's content adapts based on what you select in the left sidebar. It offers tailored options allowing you to make detailed edits to the current app or a selected screen.

Main Workspace

The central area of the interface displays a simulated preview of the screen you are currently working on, giving you a practical visual representation of how your changes will appear.

Note: Code events don't run in the preview. To see them in action, launch your app using the “Launch” button.

Understanding Warnings & Errors

• Warnings:
  • Orange Highlight: Indicates a screen has issues, like duplicate names or references to non-existent screens.
  • Preview with Warnings: The main preview will show what needs attention.
• Fatal Errors:
  • Red Highlight & Error Icon Means there's a critical issue with a screen's setup, like missing assets or incomplete configurations. This screen won't display properly.
  • Error Detection Keep in mind, some errors might not pop up until you tweak a screen's settings. We load Podio and Infolobby structures on demand.

Screen Links

• Follow Links:
  • Incoming Links: Listed on the left of each screen's preview.
  • Outgoing Links: Listed on the right, showing where users can go next.