Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Principal and Dependent Pages

Have you created a great page with an effective layout, a branded header, and solidly working models? Re-use that page—without having to rebuild it—by designating it as a principal page. Think of principal pages as templates for dependent pages, allowing builders to create a consistent, branded experience. Use principal pages to craft layouts and add resources—including custom labels or JavaScript—that will display and be accessible within any dependent pages.

Let's see how it works by creating a principal page, and then using it to create a dependent page.

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

Create a principal page

First, you create a page and configure it. Then, add a Page Region.

  1. Page name: Branded_principal.

  2. API version: Select the API version for the page.

    Note:  The API version must be the same for the principal page and for the subsequent dependent pages.

  3. Click Create.

The new page opens.

  1. Click on the page's header within the canvas (just below Element and Properties panes).
  2. In the General tab of the Properties pane, click Available as a principal page.
  3. Click Save.

If you used the principal page created above to create a dependent page--even if you added items to the principal, like a Navigation component--you would not be able to add any other components to the dependent page. Why?

Think of the components added to the principal page as being locked (or frozen). You can add, delete, or edit them within the principal page—but they are untouchable from within the dependent page.

To add other components to dependent pages, include a Page Region in the principal page. This region is not configurable within the principal page—you cannot add components to it. But it is fully configurable from the principal's dependent pages.

Once a page is designated a principal, the Page Region component displays as an additional entry under the Advanced Component group in the Elements pane.

  1. Add a Page Region into the page within the Wrapper, but below the Navigation component. Adding the region within the wrapper means that the wrapper's customized color (or image) will provide a background for components added to the page region in the dependent page.

    Note:  It's possible to add more than one Page Region to a principal page.

  2. Click Save.

Populate the principal page

Now that the page is designated as a principal page and has the necessary Page Region component, it's important to do some design thinking. What elements do you want to have on the principal page that will ripple into every subsequent dependent page? For this example, let's give the principal page some branding.

  1. In the property pane's Layout Tab, click Show custom header and Show custom footer.

  1. Drag and drop a Responsive Grid into the Header.

  2. Click the Responsive Grid, then click Add division twice. Now there are three divisions in the grid.

  3. Drag an Image component into the first division of the grid. Use this to display a logo.

    Note:  This process for doing this will vary depending on whether you using Nintex Apps or Nintex Apps for Salesforce. Follow the information here to insert a logo file.

  4. Drag a Navigation component into the page and drop it into the second division of the grid.

  5. Drag a Search component into the page and drop it into the third division of the grid.

  6. Click Save and then Preview.

If necessary, adjust the Responsive Grid's divisions using Division properties > Flex ratio.

Note:  A good place to start? Set the logo division to 1, the navigation division to 4, and the search division to 2—then modify as needed.

  1. Drag and drop a Text component into the footer.
  2. Click within the body of the component and enter the following text: Copyright [the year]. All rights reserved.
  3. Click Save and Preview.

Now the page has a branded header with navigation and a copyright footer.

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

  2. Customize the Wrapper by adding a colored background:

    Note:  You can also select an image to use as the background.

    • Click Styles and select Background. Edit the following:
      • Background type: Color
      • Color: Select a color.

  3. Click Save.

This background color will display on all dependent pages.

Create a dependent page from the principal

You now have a principal page that provides top-level navigation, a branded background, and a copyright notice. Use that principal to create a page that lists accounts.

First, create a dependent page, in this case, one that displays account information.

Note: 
  • dependent pages must be created from scratch.
  • They cannot become a principal page for other dependent pages.

Create a new page and configure it:

  1. Page name: Name the page Branded_childAccount.

  2. Apply principal page: Click this. Nintex Apps opens an entry field. Start typing the name of the principal page into this entry field and Nintex Apps begins to autofill a dropdown with selectable options.

  3. API version: Select the API version for the page.

    Note:  The API version must be the same as for the principal page.

  4. Click Create.

  5. Preview the page.

Even though you have just created the page and have added nothing, the Navigation component displays at the top, with a background in the color you selected. This is because all of those configurations were inherited from the principal page—but the page needs account content added.

  1. Create at least one model on a connection that collects information on accounts.
  2. Drag and drop a Table component into the Page Region.
  3. For Model use the model created in Step 1.
  4. Click Add fields to include a few fields on the table, such as the account's name, industry, potential revenue, possibly a description field.
  5. Click Save and then Preview.

The result

The page now has a navigation bar at the top, a Table listing accounts beneath the navigation, a colored background for the body of the page, and a copyright notice at the bottom. The page-specific information (the accounts Table) has been added to the content from the principal page.

Managing principal and dependent pages

  • Need to edit the components or elements that display on every dependent page? These are managed from the principal page; open that page and edit the items.
    • After making changes to a principal page, be sure to refresh any open dependent pages to see those changes.
  • Need to edit page specific content on dependent pages? Open the individual dependent page and edit items in the Page Region.
  • You cannot convert an established page into a dependent page because dependent pages have a different XML structure. It is possible to do this manually by copying and pasting portions of the principal page's XML into the dependent page's XML.