Page Include

This lesson shows how to use the Page Include component to include pre-built Skuid Pages or Visual Force pages in the Page you're building. This will help keep you from surpassing the maximum character limit for your page and will improve runtime for complex pages.

Step 1: In the Page Builder, select Page Include under Components.

Step 2: Drag and drop the Page Include component into the Page Builder area.

Step 2: Drag and drop the Page Include component into the Page Builder area.

The slightly yellow strip lets you know where you can add components.

Step 3: Including a Skuid Page.

Step 3: Including a Skuid Page.
  1. For Type, choose Skuid Page.
  2. Start typing in the page name and a list of available pages will appear. Choose the appropriate Skuid Page.
  3. For Query String, enter anything that should be appended to the URL, e.g. ?id={{$Param.Id}} for detail (view/edit/new) pages to pull in this page's Id parameter.

Step 4: Including a Visualforce Page

  1. For Type, choose Visualforce Page.
  2. Start typing in the page name and a list of available pages will appear. Choose the appropriate Visualforce Page.
  3. For Query String, enter anything that should be appended to the URL.

A. For detail (view/edit/new) pages to pull in this page's Id parameter use ?id={{$Param.Id}}. 

B. To pass in data that you don't have access to via URL Parameters, but you DO have access to in your Skuid Models you will use the $Model Merge.

For example, if you are on your Opportunity detail page and want to pull some data about the Account through a page include (Say you want to show a page of Related Leads for the Account, or show Hubspot (or another third party) component for the Account), you can't get the Opportunity's AccountId field through URL parameters but you can get it through your Opportunity data model. So you would write a query string like this:

{{$Model.Opportunity.data.AccountId}}

Note: This string will only pass in the AccountId field off the first row in your Opportunity model. Since we are working with a page include, getting any other row is not currently supported.

 

Step 5: Click Save and then click Preview.

Result: The included page will be displayed in your page.

Result: The included page will be displayed in your page.

Click on the gear icon on the right side of the page to open the page editor in a new browser tab and keep editing this page. (Or, return to the previous tab, if the page editor is already open).

Comments (0)

Add your comment

E-Mail me when someone replies to this comment