Embed a Flow Within a Page

Each flow in your app can contain multiple sub-flows, enabling you to embed pages within other pages. You use the Flow Container component to create a container in the page where you can then embed sub-flows. After adding the container, you set the default sub-flow displayed in the container in the General tab of the page's Settings editor.

In the page containing the embedded flow, you can only edit the page content outside the Flow Container component, and the embedded pages are not visible on the canvas. After setting the default sub-flow for the page, you can run the app to see the embedded content in the page.

To edit a page in a sub-flow, you need to open it in the Page Designer. To help you visualize the page, the canvas displays the content embedded in the Flow Container component and the content of the parent page, but you can only edit the content in the Flow Container. You set the default page for the sub-flow in the General tab of the sub-flow's Settings editor.

You can use an embedded flow to isolate content from the page containing the flow, and to allow navigation between pages in the sub-flow without leaving the page containing the sub-flow.

To embed a flow in a page:

1. In the Navigator, locate the flow containing the page where you want to embed the flow.
2. Click Create Page ( ) next to the flow containing the page, click Create Flow.
   
   

   
   Description of the illustration page-flow-subflow.png

   
   
3. Enter a name for the new sub-flow in the Create Flow dialog box and click Create.
4. Open the page where you want to embed the new flow.
5. 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-designer-component-flowcontainer.png

   
   
6. In the page's Settings editor, select the default sub-flow in the General tab.

   The Default Flow drop-down list displays all flows within the current flow.