23 Work With the Diagram View

As your App UI takes shape in the Designer, you can use the Diagram view for a visual representation of your App UI's structure.

The Diagram view, shown only for App UI and flow artifacts, displays an App UI's flows and pages within those flows. It's a handy tool that lets you view default pages, navigation flows, even audit status at a glance. You can also use this view to update your App UI in context; for example, you can change the default page in a flow and see how your updates change your App UI's structure.

When you open an App UI artifact, the Diagram view displays a hierarchical view of the artifact's flows and sub-flows. When you open a flow artifact, the Diagram view displays the pages contained in the flow as well as their navigational relationships. A Properties pane displays by default, showing additional information about the selected artifact. There's also a Components palette that you can use to add pages (and actions for a flow artifact).

Here's an example of what you might see when you open the Diagram tab at the App UI level:

Description of the illustration diagram-appui.png

You can expand or collapse a flow to show or hide its pages (and optionally, sub-flows). Click a page to view its navigational relationships in the diagram as well as in the Properties pane. For example, clicking the profile page shows navigation icons ( ) on the directory-landing and organization page tiles, indicating that you can navigate from profile to those pages and back. When navigation is one way, meaning you can go from one page to another but not navigate back, you'll only see the icon, as shown on the skills page. You'll see similar navigation details in the Properties pane under Navigates to and Navigated From when the page is selected. Notice how flows or pages that don't have any relationship with the selected page fade into the background.

It's possible to make changes to your App UI from the Properties pane. You can change page titles and descriptions as well as update the app's default page in a flow. You can even open, duplicate, and delete selected items. Alternatively, you can double-click an artifact (a flow or a page) to open up the artifact's editor and make changes as required.

The Diagram view also flags pages with audit issues ( or ). These issues also show at the flow level, a useful indicator when the flow is collapsed that audit issues exist in the flow's pages.