Logic view

The Logic view is where you build and test application logic and interactivity. Visit the following subpages to learn more about the Logic view and its features:
This page provides an overview of the following topics:

Logic and Preview panels

The Logic view is divided into two main panels for building and testing application logic:

Logic panel

The Logic panel displays the application logic for the selected page and layer in the Explorer panel. Here, you can add Logic components and Design references to your application, then connect them to build interactivity.
The toolbar at the top of the Logic panel includes:
  • Back/Forward arrows: Navigate backward and forward to previously visited application pages, flows, and layers.
  • Breadcrumbs: Navigate up and down application layers.
  • Page Preview button: Opens or closes the Preview panel.

Log Details panel

The Log Details panel displays errors, logs, and warnings from the Console component in your app. To open the Log Details panel, click the View Logs button at the bottom of the Logic panel.
For more information on how to use the Log Details panel, see Debug an app.

Preview Panel

The Preview panel displays your application and enables you to test its functionality as you build the logic.
Note: You can drag the left border of the Preview panel to enlarge or reduce it as needed.
The Preview panel includes two menu options:
  • Inspect: Displays outlines around each component and enables you to select them from the Preview panel.
  • Reload: Refreshes the Preview panel to ensure major logic changes are applied in the application preview.
The following navigation tools enable you to easily view and manipulate logic flows in the Logic view:


To zoom in on a logic flow, either:
  • Pinch out on your touchpad.
  • Press CMD (Mac) or CTRL (Windows) and scroll down.
To zoom out of a logic flow, either:
  • Pinch in on your touchpad.
  • Press CMD (Mac) or CTRL (Windows) and scroll up.


To pan across the workspace, click and drag the logic flow screen.

Access a layer

To access a layer, double-click the parent object's header.

Build flows in the Logic view

To build application logic in the Logic view:
  1. 1.
    Open the Explorer panel and click the add a logic flow icon, to create a new logic flow.
  2. 2.
    Select the new flow and open the Libraries panel, to drag-and-drop Design references and Logic components into the Logic panel.
  3. 3.
    Connect component nodes to build interactivity.
  4. 4.
    Test your app in the Preview panel.
For more information on building application logic, see Add a Logic flow.