Page Container

The Page Container is a special widget within which other pages can be shown.

Once added to any page, the Page Container becomes globally available across all pages, allowing content to be loaded into it via the Change Page Action in the Rule Panel, or via Navigation and Back Navigation widgets. This enables easy content swapping and dynamic updates throughout the app.

To use a page container, you should be familiar with how pages work.

Common Use Cases

• Specifying the main area of your app where most pages are shown.

• Enabling page-level navigation when the user performs navigable actions.

• Controlling page visibility and transitions such as right-to-left to from below.

Widget Properties

Initial Page

The first page to show, when the page containing this page container itself is shown. Care must be taken that no 'initial page' is specified here, if the page contains a rule to set the initial page on this page container when the page loads. In this situation, its unlikely that the correct page will be shown.

Animation

The initial page's animation.

Step-by-Step Guide to Using the Page Container Widget for Multi-Page Navigation

Step 1: Create Multiple Pages

Begin by creating the necessary pages for your app. For example, create a Home page and an About page. These pages will serve as the destinations for navigation.

Refer to the documentation for instructions on how to create a page within your app.

Created Home and About Pages

Step 2: Create a Frame Page and Include Navbar

Next, create a Frame page that will serve as the layout container. On this page, add and style the Navbar or other navigation elements. The Frame page will house the Page Container and will be responsible for loading different content based on user interaction.

Created Frame Page

Included Navbar

Step 3: Add the Page Container Widget to the Frame Page

Click and drop the Page Container Widget onto the Frame page. This will serve as the dynamic content area where the pages (Home, About, etc.) will be displayed based on user navigation.

Frame Page complete hierarchy with Navbar on Top and Page Container below it

Step 4: Add Rules for Navigation (or use the Navigation widget)

• Add a Rule for Page Load: Set a rule that triggers when the event of interest occurs (such as a page is loaded, or a widget element is clicked), and configure the action to Change Page. In the Change Page action, select Home as the target page. Make sure to specify the Page Container as the target container to display the content.

• Add Navigation Rules for the Navbar:

  • When the Home button is clicked, add a rule to navigate to the Home page by setting the Change Page action to target the Home page.

  • Similarly, when the About button is clicked, add a rule to navigate to the About page by setting the Change Page action to target the About page.

Navigation Rules added in Frame Page

Action for Page is Loaded Event

Action for Click on Heading_2 (Home) Event

Action for Click on Heading_3 (About) Event

• Alternatively, use the 'Navigation' widget, and configure its settings in a similar manner to the action above.

Step 5: Run and Test

Once your rules are set, run the app to test the navigation. Click on the Run tab from the left menu to start the simulator. Make sure the initial page is set to be the Frame page, which will load and display the appropriate content in the Page Container based on the user’s navigation.