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:
- Design references (Logic view only): A tree of scripts that map to each Design component in your application.
This page provides an overview of the following topics:
- Navigation tools: Controls that enable you to navigate the Logic panel (i.e., zoom, pan, access a layer).
- Build flows in the Logic view: Connect Design references and Logic components to build application logic.
The Logic view is divided into two main panels for building and testing application logic:
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.
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.
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) orCTRL(Windows) and scroll down.
To zoom out of a logic flow, either:
- Pinch in on your touchpad.
- Press
CMD(Mac) orCTRL(Windows) and scroll up.
To pan across the workspace, click and drag the logic flow screen.
To access a layer, double-click the parent object's header.
To build application logic in the Logic view:
- 1.Open the Explorer panel and click the add a logic flow icon, to create a new logic flow.
- 2.Select the new flow and open the Libraries panel, to drag-and-drop Design references and Logic components into the Logic panel.
- 3.Connect component nodes to build interactivity.
- 4.Test your app in the Preview panel.
