Embed a Flow Within a Page

Each flow in your App UI can contain one or more sub-flows, allowing you to embed pages within other pages. To do this, you define a sub-flow inside another flow, then embed the sub-flow within a Flow Container component on the page that serves as the "parent" flow.

Embedded flows (also known as nested flows) let you isolate content from the page containing the flow and allow navigation between pages in the sub-flow without leaving the page containing the sub-flow. This is useful in Single Page Applications (SPAs), where it allows you to stay within the page and present contextual information in a section of the page. It also makes for reuse as the same sub-flow can be embedded in multiple pages in the parent flow. Note though that only one flow can be embedded in a page and the URL represents the current flow structure.

To embed a flow in a page:

1. Open the page where you want to embed a new flow (for example, the otherflow-start page under otherflow).
2. In the Page Designer, drag the Flow Container component from the Layout category in the Components palette and place it on the canvas.
   
   

   
   Description of the illustration page-flow-subflow-flowcontainer.png

   
   

   For the page containing the embedded flow—let's call it the parent container page—you can only edit content outside the Flow Container component; the content of pages you embed won't be visible on this canvas.

3. Create a sub-flow and design its UI to meet your requirements:
   1. Click Create Page ( ) next to the flow containing the parent container page (otherflow in our example). Select Create Flow.
      
      

      
      Description of the illustration page-flow-subflow.png

      
      
   2. Enter a name for the new sub-flow in the Create Flow dialog box (for example, otherflow-mysubflow). By convention, a sub-flow takes the parent flow name as a prefix. Click Create.
   3. Edit the sub-flow's starter page in the Page Designer to design the UI. To help you visualize a page in a sub-flow, the canvas displays the content of the parent page alongside content of the sub-flow page, but you can only edit the sub-flow's page content in this view.
      
      

      
      Description of the illustration page-flow-subflow-pageview.png

      
      

      You can add more pages to the sub-flow as needed.

4. When you are done designing your sub-flow, set it as the default flow for the parent container page. to do this, open the parent container page's Settings editor and select the sub-flow as the Default Flow in the General tab.

   The Default Flow drop-down list displays all flows within the current flow.
   
   Description of the illustration page-flow-subflow-defaultflow.png
   

5. Run the App UI to preview the embedded content in the page.