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 Skuid metadata.
Create a principal page¶
First, create a page and configure it.
Build the principal [[]]¶
Name: Branded_principal.
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.
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 principal page.
Click
Create Page.
The new page opens.
- Click on the page’s header within the canvas (just below Element and Properties panes).
- In the Basic tab of the Properties pane, click Available as principal page.
- Click Save.
Populate the principal page¶
Now that the page is designated as a principal page, it’s important to do some design thinking. What elements do you want to have on every subsequent dependent page? For this example, let’s give the principal page some branding.
Add content to the header [[]]¶
Drag and drop a Responsive Grid into the Header.
Click the Responsive Grid, then click Add Division twice. Now there are three divisions in the grid.
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 NLX or Skuid SFX. Follow the information here to insert a logo file.
Drag a Navigation component into the page and drop it into the second division of the grid.
- Add navigation items that link to other pages.
Drag a Search component into the page and drop it into the third division of the grid.
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 [[]]¶
Drag and drop a Wrapper component onto the page between the header and footer.
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.
- Click Styles and select Background. Edit the following:
Click Save.
This background color will display on all dependent pages.
Add a Page Region [[]]¶
If you used the principal page created above to create a dependent page, that dependent page would include the Navigation and the Wrapper components. But 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.
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.
Click Save.
Now you have a principal page that provides top-level navigation, a branded background, and a copyright notice. Let’s use that principal to create a page that lists accounts.
Create a dependent page from the principal¶
Time to 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 the page [[]]¶
Create a new page and configure it:
Name: Name the page Branded_dependentAccount.
API Version: Select the API version for the page.
Note
The API version must be the same as for the principal page.
Starting Point: Use a principal page.
- principal page: Start typing Branded_principal in the field. Skuid begins to autofill with files that match.
Click
Create Page.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.
Populate the page [[]]¶
- Create at least one model on a data source object that collects information on accounts.
- 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.
- 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.