Create a Master and Child Page

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 master page. Think of master pages as templates for child pages, allowing builders to create a consistent, branded experience. Use master pages to craft layouts and add resources—including custom labels or JavaScript—that will display and be accessible within any child pages.

Let’s see how it works by creating a master page, and then using it to create a child page.

Create a Master Page [[]]

First, create a page and configure it:

  1. Name: Branded_master.

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

    Note

    The API version must be the same for the master page and for the subsequent child pages.

  3. Starting Point: Start with a blank page.

    Note

    It is possible to use any of the starting points and then designate the page as a master page.

  4. Click fa-check Create Page.

The new page opens.

  1. Click on the page’s header within the canvas (just below the App Composer Palette).
  2. In the Basic tab of the Properties pane, click Available as Master Page.
  3. Click Save.

Populate the Master Page [[]]

Now that the page is designated as a master page, it’s important to do some design thinking. What elements do you want to have on every subsequent child page? For this example, let’s give the master page some branding.

Activate custom headers and footers [[]]

  1. In the Property pane, click Show Custom Header and Show Custom Footer.

Add content to the header [[]]

  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 Skuid Platform or Skuid on 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.

Add a Wrapper [[]]

  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 child pages.

Add a Page Region [[]]

If you used the master page created above to create a child page, that child page would include the Navigation and the Wrapper components. But you would not be able to add any other components to the child page. Why?

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

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

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

  1. Drag and drop 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 child page.

    Note

    It’s possible to add more than one Page Region to a master page.

  2. Click Save.

Now you have a master page that provides top-level navigation, a branded background, and a copyright notice. Let’s use that master to create a page that lists accounts.

Create a Child Page from the Master [[]]

Time to create a child page, in this case, one that displays account information.

Note

  • Child pages must be created from scratch.
  • They cannot become a master page for other child pages.

Create the page [[]]

Create a new page and configure it:

  1. Name: Name the page Branded_childAccount.

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

    Note

    The API version must be the same as for the master page.

  3. Starting Point: Use a master page.

    • Master Page: Start typing Branded_master in the field. Skuid begins to autofill with files that match.
  4. Click fa-check Create Page.

  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 master page—but the page needs account content added.

Populate the page [[]]

  1. Create at least one model on a data source object that collects information on accounts.
  2. Drag and drop a Table component into the Page Region.
    • Model: The model created in Step 1.
    • Click Add Fields to include a few fields on the table, such as the account’s name, industry, potential revenue, possibly a description field.
  3. 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 master page.

Managing Master and Child pages

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