Page Include¶
Simple but powerful, the Page Include component pulls in another (separate) Skuid page into the current Skuid page. While it is a more complex component, the Page Include component unlocks a lot of potential, especially for larger applications:
- Improve runtime for complex pages by loading specific elements (components and models) only when they are needed.
- “Componentize” elements of your Skuid apps into separate pages, allowing them to be reused across different parts of the app.
- More easily configure different parts of a Skuid app: instead of having to burrow into a component’s action script to access a modal or sliding panel and then make changes to it, turn those elements into separate pages and add them to the current page using the Page Include component.
When describing the relationship between pages, the term container page refers to the Skuid page that utilizes the Page Include component. The term included page refers to the Skuid page that has been pulled into the page.
Using the Page Include Component¶
To include a Skuid page within the Skuid page you are currently building:
Add a Page Include component to the page.
- Select whether to use the Page Include to call a Skuid Page or a Page Assignment (SFX only) and configure the appropriate properties.
Warning
- Ensure any pages included through this component use the same Design System. If not, the pages may have inconsistent theming and styles.
Note
Page Includes are not “place holders” for pages to be created later. Any pages referenced by a Page Include must be created before adding the Page Include component to the current page.
Component actions¶
Component actions are available using Run component action.
Load current page
Loads the selected Page Include.
- Load in background: If checked, subsequent actions in this action sequence can begin while the included page is being loaded. If unchecked, all subsequent actions hold until the included page is loaded.
- Show loading indicator: If checked, a loading indicator displays while the included page is being loaded.
Load new page
Loads a different page from the one already displayed into the Page Include.
- Skuid page: The Skuid page to load.
- Query string: The URL parameters to send along with the Page Include request. Values must be URL-encoded; multiple parameters are joined with an ampersand (&). This property accepts merge syntax.
Unload
Unloads the currently displayed Page Include.
Properties¶
Component properties¶
General tab [[]]¶
Type: (Skuid SFX only*) Select the type of Page Include.
Skuid page: The Page Include points to a specific Skuid page.
Skuid page: The name of the Skuid page.
Query string (optional): The URL parameters to send along with the Page Include request. Values must be URL-encoded and multiple parameters are joined with an ampersand (&). (Accepts merge syntax.)
Note
This property is useful to set filterable conditions within the page include or pass data to model conditions. For example, two options to pass a record ID from a “parent” Skuid page to the page within this component:
- Use URL parameters via merge syntax:
id={{$Param.Id}}
- Use model values through merge syntax:
id={{$Model.[modelnameof parent].data.0.Id}}&whatid={{$Model.[modelname].data.0.AccountId}}
- Use URL parameters via merge syntax:
- Page Assignment: (Skuid SFX only*) Instead of pointing to a page, the Page Includes points to a Skuid page assignment.
- Object Type: The Salesforce object attached to the page assignment
- Action type: The Salesforce action overridden by the page assignment:
- Tab
- List
- View
- Edit
- New
- Clone
Advanced tab [[]]¶
Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Note
A unique name will make it easier to locate the Page Include for later use.
Show loading indicator: if checked, a loading indicator (Loading…) will display when a page include is being updated or retrieving records.
Lazy Load (optional): If checked, Page Include will not load immediately. (This makes the host page load faster because the Page Include only loads when it receives a request from the end user.)
Note
Useful for situations where you want a Page Include initially “hidden” (such as when it’s within a tab or as an option in a queue).
Display logic tab [[]]¶
Standard display logic options are available to display or hide the component or feature.
Troubleshooting¶
Debugging query strings [[]]¶
When working with Page Include components, you may need to verify query strings or debug the component in other various ways. Use Chrome Developer Tools (specifically the Network tab):
- Open Developer Tools by right clicking the page and selecting Inspect, or using the hot keys (Windows: Ctrl + Shift + I) (Mac: Cmd + Opt + I).
- Click the Network tab.
- Click the XHR filter.
- Look for the request that begins with
include?isinclude=true
.
The customized parameters from the Query String field (or page assignment parameters if you selected that option) appear here prepended by an ampersand (&). Check the parameters that are sent to the Page Include to find a solution to any issues.