Page Include

Simple but powerful, the Page Include component pulls in another (separate) Skuid page into the current Skuid page. While it is more complex, 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 popup 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.

Using the Page Include Component

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.

Once you have decided which additional Skuid page to include in 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 and configure the appropriate properties.

Warning

Ensure any pages included through this component use the same theme and CSS as the host page. If not, the pages may have inconsistent theming and styles.

Properties

Basic tab [[]]

  • Type: 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 can be used to pass data to model conditions by selecting Page/URL parameter for a condition’s value and then entering the appropriate query string parameter. You may also access any query string parameters via the $Param merge variable.

        Note

        If a Page Include component has a parameter that is also within the URL, the Page Include’s query string parameter will always win out. Keep this behavior in mind and consider uniquely naming all page parameters.

    • 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.

  • CSS Class (optional): Assign a CSS class to the component’s DOM element.

  • 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).

  • Show Loading Indicator: If checked, a Loading… indicator will display while the page is loading. If unchecked, no visual indicators will display.

Display Logic tab [[]]

Conditional rendering allows you to display or hide the Button Set component, based on defined data conditions.

Troubleshooting

My Page Includes are failing to load [[]]

Some V1 pages that contain Page Includes with custom fonts may intermittently fail to load. This is caused by a third-party web font processor in V1 of Skuid. We recommend removing all web fonts from your themes to resolve this issue.

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):

  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.

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.

My page is not displaying within my Page Include at runtime. / I see a “Session Expired” error when loading a page. [[]]

(Skuid NLX only**) Any and all pages must be assigned to a route within an app to be visible to non-admin Skuid NLX users. If a page does not have a route assigned to it, Skuid cannot determine the proper permissions for that page and will not display it.

Even if a Skuid page is referenced by a Page Include component within a page that has the appropriate permissions, the included page will not display unless it has also has been assigned to a route accessible by the end user.

Ensure that Skuid pages displayed via the Page Include component, even those only used within the Page Include component, have routes assigned to them within an app accessible to the end user’s profile.

I’m seeing unexpected values in my {{$Param}} merge variables. [[]]

Page Include components access their own query strings as well as parent page’s parameters, which can cause errors if two page parameters share the same name. The Page Include’s parameters will always win out. For example, if a parent page has a URL parameter of id, and the Page Include has a query string parameter of id, then using the {{$Param.id}} merge variable will call the Page Include’s parameter, not the parent page’s.

Ensure your parameters are uniquely named if you are seeing issues.