Page Include Component

The Page Include component does as its name suggests: includes a Skuid page within a Skuid page.

Not only will Page Includes help keep you from surpassing the maximum character limit for your page, but they will improve runtime for complex pages. And Page Includes allow you to make changes to pieces of your app without navigating through a maze of component tabs, pop-ups, and action frameworks.

They're excellent tools for combining separate Skuid pages into a user-friendly, bespoke UX. And—in short—they're pretty cool.

Page Include component properties

First, drag and drop a Page Include component (Advanced > Page Include) into your page, and click it to see its properties.

Type:  In true Skuid fashion, your Page Include can point to a specific Skuid page OR it can serve the appropriate page based on your Page Assignments.   For Page Includes, you can point to a specific Skuid page, but you can also use a Page Assignment to determine what a user should see—whether for utility or security. Select the option most appropriate for your needs.

  • Skuid Page: To point to a specific Skuid page for all users, begin typing the name of a page, and then select it for your Page Include.
  • Page Assignment: If you select this option, two new fields will appear to designate which page assignment this Page Include should reference.

         Object Type: The Salesforce object with an attached Skuid assignment

         Action Type: The Salesforce action with an attached Skuid assignment, e.g. View, Tab, List, etc.

Query String: The text that you enter on this field will be sent to your Page Include as its URL parameters. This is important for passing data for use in model conditions, and you will make great use of merge syntax for this field.

For example, if you want to pass a contact's record ID from the "parent" Skuid page to the page within this component, you can do so in 2 ways.

1. Use URL parameters through merge syntax:

id={{$Param.Id}}

2. Use model values through merge syntax:

id={{$Model.Contact.data.0.Id}}&whatid={{$Model.Contact.data.0.AccountId}}

You can also set filterable conditions within the Page Include page. For example, if you're logging a task using the standard Salesforce object, you can pass along the task type within a Page Include's query string by appending your condition name, like so:

id={{$Param.Id}}&Type__c=Call

By utilizing your Page Include's query strings in conjunction with model conditions, popups, and the Skuid action framework, you can create user interfaces that are not only very powerful, but very intuitive.

Note: you DO NOT need to prepend what you enter in this field with a question mark (?) or an ampersand (&), as this is done automatically by Skuid.

But you DO need to place an ampersand (&) between each parameter you are passing in.

Unique Id (optional): Parameter that allows this Page Include Component to be referenced by other Components, such as Queues, or manipulated via JavaScript.

CSS Class (optional): Parameter that gives this component's DOM element a CSS class. Useful if you are utilizing CSS resources to style your Skuid page.

Lazy Load: By enabling this, your Page Include will not load as soon as the page loads. This is especially useful for instances where a Page Include may be "hidden" at first, such as within a tab or as an option in a queue. Once the Page Include is called—whether by user action or via Javascript—it will be loaded as normal.

Troubleshooting

While working with Page Include components, you may need to verify your query strings or debug it in other various ways. Chrome Developer Tools are useful for this endeavor, particularly the Network tab.

1. Open Developer Tools by right clicking the page and selecting Inspect, or using the hot keys (Windows: Ctrl + Shift + I) (Mac: Cmd + Opt + I).

2. Click the Network tab.

3. Click the XHR filter.

4. Look for the request that begins with include?isinclude=true

Your customized parameters from the Query String field (or Page Assignment parameters if you selected that option) will appear here prepended by an ampersand (&). From here you can double check the parameters that are sent to your Page Include and better find a solution to your issues.