Add a Page in the Flow Diagram

To add a page in a Flow Diagram, you drag and drop a page from the Components palette onto the diagram. Adding a page to a flow is similar in the Flow Diagram view (Flow Diagram view) as well as the Grid view (Grid view).

  1. Open your application in the Navigator, then click the Create Flow icon (Create Flow icon) next to the application node to create a new flow.
  2. In the Diagram view (Flow Flow Diagram view or Grid Grid view), you can create an empty page, a page with a pattern, or one with an existing fragment. To create a page with a fragment, the fragment must be tagged with the page metadata tag in its Used For setting (either from its Properties pane or Settings editor). Without the page tag, the fragment won't surface in the Components palette.

    When your application includes page fragments as well as patterns, both will be available to you in the Components palette.

  3. In the Create Page dialog, give the page a name, then click Create.

    A new page tile appears in the diagram (with its properties displayed in the Properties pane). The newly created page's icon in the diagram will match the fragment or pattern icon used to create the page.


Want to quickly create a page that automatically navigates to an existing page? You can, but only in the default Flow Diagram view. Simply drag a Custom item from the Components palette and drop it directly onto an existing page, enter a name for the new page when prompted, and click Create. A new page is created and a navigateToPage action chain that navigates from the existing page to the new page is added to the existing page, as shown here:

After you've created a page, select the page tile to view and update its properties in the Properties pane. You can manage the page using the options in the Properties pane's Menu (Menu icon):
  • To open a page in the Page Designer, where you design it as needed, click Open. You can also double-click the page tile to open it in the Page Designer.
  • To duplicate a page, click Duplicate. Duplicating a page copies all the page's action chains.
  • To delete a page, click Delete.