Page Container

The Page Container serves as the core wrapper for a page or a navigable section within your app. It acts as the root container for both layout and navigation, enabling smooth transitions without reloading the entire app or page. Typically used in multi-page workflows or tabbed navigation, the Page Container dynamically switches the displayed content based on the route or user actions, providing a seamless user experience. Once added, 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. This enables easy content swapping and dynamic updates throughout the app.

Common Use Cases

• Wrapping entire screens in a single logical unit

• Enabling page-level navigation

• Controlling page-wide visibility and transitions

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.

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.

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.

Step 4: Add Rules for Navigation

• Add a Rule for Page Load: Set a rule that triggers when the page is loaded, 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.

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.