Principal and dependent pages

Principal pages allow builders to create reusable page templates that help maintain consistency across multiple pages. When shared elements are defined in a principal page, dependent pages created from it automatically inherit those elements. This ensures the layout, branding, and functionality remain consistent across pages.

Updates made to the principal page are automatically applied to all dependent pages, so builders don't need to update each page individually.

Note: Principal and dependent pages were previously known as master and child pages. You may still see references to this terminology in older materials or Nintex Apps metadata.

Jump to:

Create a principal page

Use one of the following options:

  • Create an app: Set the app to use a shared layout when you create an app. This adds a principal page to an app. For more information, see Create and customize apps.

  • Create a page: Set a page as a principal page when you create a page. For more information, see Create and customize pages.

  • Edit an existing standalone page:

    1. Open the page in the Page Designer. For more information see, Edit a page.

    2. Click the page on the canvas.

    3. In the Properties panel, under the General tab, turn on the Available as a principal page toggle.

    4. Click Save.

    Note: Once a page is set as a principal page, the Dependent pages tab appears in the Properties panel. This tab displays all dependent pages connected to the principal page. For more information, see Page properties.

The principal page locks its components and elements. You can edit them only on the principal page and cannot edit them on dependent pages. To allow dependent pages to include page-specific components, add a Page Region component to the principal page.

Note: Page Region components are configured on dependent pages, not the principal page. You can add more than one Page Region component to each principal page.

  1. Add a Page Region component onto the page within the Wrapper component. For more information, see Add components to the canvas.

    The Wrapper’s customized color or image appears as the background for any components added to the Page Region on dependent pages.

  2. Click Save.

Design a principal page

You can design the principal page using the following elements and components:

  1. In the Properties panel, under the General tab, turn on the Show custom header and Show custom footer toggles.

  2. Click Save.

  1. Add a Responsive Grid component within the header.

  2. Click the Responsive Grid component and click Add division twice.

    This action adds three divisions in the grid.

  3. Add an Image component within the first division of the grid.

    You can use this division to display a logo.

    Note: This step varies depending on whether you are using Nintex Apps or Nintex Apps for Salesforce. For more information, see Image.

  4. Add a Navigation component within the second division of the grid.

    You can add navigation items that link to other pages. For more information, see Manually add items to the navigation.

  5. Add a Search component within the third division of the grid.

  6. Click Save.

To configure how each division is displayed within the grid, click a division and go to Flex child tab > Flex Ratio in the Properties panel. For more information, see Responsive Grid divisions in Component properties.

  1. Add a Text component within the footer.
  2. Click within the body of the Text component and type the text you want.
  3. Click Save.

  1. Add a Wrapper component onto the page between the header and footer.

  2. Set the background color for the Wrapper component.

    1. Click the Wrapper component.

    2. In the Properties panel, under the Background tab, select the Background source. For more information, see Component properties.

    3. Click Save.

  3. Add a Page Region component within the Wrapper component. For more information, see Add a Page Region component.

  4. Click Save.

Create a dependent page from a principal page

You now have a principal page with top-level navigation, a branded background, and a footer. You can use it to create a dependent page, such as one that displays account information.

Note: 

You must create dependent pages as new pages. A dependent page cannot serve as a principal page for other dependent pages.

  1. In the navigation bar, click Apps.

  2. Select the app you want the page to belong to or click the All pages tab.

  3. If you are creating the page from the All pages tab on the Apps screen, select the app that you want the page to belong to.

  4. Click Create a page.

  5. Click Create page.

  6. Select Dependent for Page type.

  7. Select a principal page from the Principal page drop-down.

  8. Click Create.

    The page opens in the Page Designer.

  9. Click and select Preview.

In preview, even though the page is newly created and contains no content, the Navigation component appears at the top, and the footer displays along with the background color set in the principal page. These settings are inherited from the principal page, but you still need to add your own page-specific content.

Design a dependent page

  1. In the Page Designer, add a model using a connection to collect and display information. For more information, see Models.
  2. Add a Table component within the Page Region component. For more information, see Add components to the canvas.
  3. Click Add fields. You can add a few fields to the table, such as an account's name, industry, potential revenue, and a description field. For more information, see Add components—then add fields.
  4. Click Save.
  5. Click and select Preview.

The page now includes a navigation bar at the top, a table that lists details, a colored background, and text at the bottom. The table is specific to the dependent page, while all other elements are inherited from the principal page.

Manage principal and dependent pages

Components and elements that appear consistently on all dependent pages are managed from the principal page. You can only edit these shared items on the principal page. After making changes, refresh any open dependent pages to see the updates. For more information, see Edit a page.

Open the individual dependent page and edit items in the Page Region component. For more information, see Edit a page.

You cannot convert an existing page into a dependent page because dependent pages use a different XML structure. To create a dependent page, manually copy and paste the required sections from the principal page’s XML into the dependent page’s XML.