skuid:page Visualforce component

There are two main methods for overriding your Salesforce UI with Skuid:

  • The Redirect approach: This method uses a simple Visualforce page immediately redirects your user to the UI Visualforce Page that comes with Skuid (/apex/skuid__UI)
  • The skuid:page Visualforce component approach: This method uses a Visualforce Page that contains the <skuid:page> component to embed your Skuid page without sending the user to another page.

There are pros/cons to using each of these approaches, and there is no universal answer as to which approach you should “always” use. The Redirect approach is simpler and arguably faster to implement on a single page basis since you are just sending the user directly to a Skuid page. However, the skuid:page component gives you complete freedom to use Skuid wherever you can use Visualforce, as well as the increased control of Apex attributes since you are actually embedding your Skuid page within your Visualforce page. Depending on your use case, there may be an approach that is either more appropriate or necessary for you.

With both approaches, you have to specify either:

  • The exact name of the Skuid Page you’d like to view
  • An Object Type, Action Type, and (sometimes) a Record Type for Skuid to use to determine a Skuid page to show by examining Page Assignments you have configured for that Object Type, Action Type, and Record Type

In this topic we’ll describe how to and when you should use the <skuid:page> Visualforce component to display Skuid Pages you’ve created.

Note

If you have not already done so, reading the documentation regarding the Redirect approach is highly recommended.

This topic assumes a basic knowledge of that approach, and several of its troubleshooting steps still apply.

When to use this approach

Here are some of the main reasons TO use the <skuid:page> Visualforce Component approach to displaying Skuid Pages, rather than the Redirect approach:

  1. You have a preexisting Visualforce Page and want to place one or more Skuid Pages somewhere inside it.
  2. You want to wrap your Skuid Pages in a Visualforce Template, or in some other complex wrapper that you’d rather do in Visualforce than in Skuid.
  3. You want to have a custom Apex controller or controller extensions so that you can include and call non-standard JavaScript Remoting endpoints from JavaScript in your Skuid Page.
  4. You are developing a managed package that utilizes Skuid pages.
  5. You want to use Skuid Pages within Service Cloud Console, Sales Cloud Console, Salesforce1, or Salesforce Lightning Experience environments.
  6. You want to show a Skuid Page as the home page of your Force.com Site.
  7. You want a Skuid Page to be the default page for a custom App you’ve made. (The Redirect approach will throw an Internal Server Error if you try to do this.)
  8. You want to use Salesforce’s default Tab Styling, with colors and everything (the Redirect approach supports tab highlighting via the “Tab to Override” Page property, but does not support the full coloring, e.g. yellow for Opportunities, purple for Contacts)
  9. You want to modify the Browser Title by setting the title attribute of your Visualforce Page, e.g. <apex:page title=”{!Contact.Name}” … /> (the Redirect approach doesn’t support this)
  10. You are having issues with the URL Parameters passed in through the Redirect approach, or cannot consistently predict which parameters Salesforce will pass in, so your Redirect syntax keeps getting messed up.
  11. You want to conditionally show different Skuid Pages, or sometimes not show a Skuid page and instead perform some other action, based on criteria which Skuid’s Page Assignment logic cannot accomodate.

Prerequisites

Unlike the Redirect method, the skuid:page VF component does not work strictly within the Skuid managed package namespace because it embeds a Skuid page into VF pages.

This means Skuid cannot freely access all things in the Skuid managed package.

Because of this, you must clone several pages—making them globally available—because they contain code that allows Skuid to work with certain Salesforce data. You may encounter unexpected behaviors if you do not clone all of these pages.

Follow along with the three sections below to complete the appropriate steps for each of the pages. Repeat the below steps as needed until the pages are recreated.

Note

These pages are not meant to be used as templates for your own markup—instead see the Visualforce Markup Samples section.

Note

All of the steps below occur in Salesforce Setup.

1. Copy the markup

Repeat the below steps for each of the following pages in the skuid namespace:

  • Include
  • UploadImage
  • Social
  1. Navigate to Build > Develop > Visualforce Pages.
  2. Click the Visualforce page’s label.
  3. Copy the markup in the Visualforce markup pane.
  4. Retain the markup for future steps.

Note

Consider copying each page’s markup to a text editor, making sure to note which markup goes with which page.

2. Create a new Visualforce page

With markup copied, create a Visualforce page for that markup.

  1. Navigate to Develop > Visualforce Pages.

  2. Click New.

  3. Enter the exact name of the page you’re recreating in both the Label and Name fields.

    For example:

    Label Include
    Name Include
  4. Paste the copied markup into the Visualforce Markup pane.

  5. Click Save.

3. Enable profile access

With the pages now created, profiles must be granted access to the pages.

Note

Any profiles that will be accessing Skuid through a skuid:page Visualforce component override must be granted access.

For each newly created page:

  1. Click Security.
  2. Click a profile that requires access.
  3. Click Add fa-caret-right to enable the profile.
  4. Repeat as needed for other profiles.
  5. Click Save.

Troubleshooting

If you find the code above does not work, attempt to re-clone the pages in the Prerequisites section.

These pages can sometimes change between Skuid versions. Repeat the cloning process if you have recently upgraded and are seeing new issues.

Considerations

There are a few points to consider when using this approach:

  • The “Show Header” and “Show Sidebar” properties in your Skuid pages must match the corresponding attributes on your VF Page’s <apex:page> tag.

    Ensure that these properties match both in the markup and the Page Properties pane.

    • showHeader: set to “false” to hide the header and sidebar.
    • sidebar: if showHeader=”true”, then set to “false” to hide the sidebar, otherwise it will be shown by default
  • We recommend NOT using the “Tab to Override” property in your Skuid Pages — either rely on the standardController property to set the Tab to the corresponding SObject’s tab, or use the tabStyle attribute on the <apex:page> tag instead to manually specify a particular Tab.

    Examples:

    1. <apex:page standardController=”Lead” … /> will select the Lead tab
    2. <apex:page controller=”MyCustomController” tabStyle=”Schools__tab” … /> will select a custom VF Tab with API Name “Schools”
  • Always check that the following attributes in the samples below are updated for your use case:

    • showHeader
      • sidebar
    • title
    • controller

    Showing a specific page:

    • skuid:page page

    Using page assignments

    • objectType
    • actionType
  • If you’ll be using Offline Mode with Salesforce Classic, enabling Allow data refresh in Offline Mode? in the form below is recommended. For more information, see Offline Mode documentation.

    Warning

    You will not be able to display the Salesforce header or sidebar if this option is enabled.

Visualforce Markup Samples

To have the code samples throughout this page reflect your use case:

  1. Fill out each field in the table below
  2. Navigate to the code sample that matches your use case.
  3. Copy all code in the sample.
  4. Paste the code into a new or existing Visualforce page as shown in the Applying Visualforce Overrides section.

Note

The title attribute by default concatenates the action type and plural form of the object name for record detail or action pages. For tab pages it simply displays the plural form of the object name.

Field Value
Salesforce Object API Name
Skuid Page
Salesforce Action
Show Salesforce header? Yes No
Allow data refresh in Offline Mode? Yes No

Note

The Visualforce markup samples below include line breaks for readability. If you are an advanced user, they will still function should you remove the line breaks to match your markup standards.

Basic overrides without page assignments

Record detail page or Salesforce action [[]]

<apex:page
  standardController="Insert-Salesforce-Object"
  extensions="skuid.Redirects"
  showHeader="true"
  sidebar="false"
  readonly="true" docType="html-5.0"
  action="{!IF(canUseSkuid,'',redirect)}"
  title="Insert-Action-to-Override {!Insert-Salesforce-Object.Name}">
    <skuid:page page="Insert-Skuid-Page" />
</apex:page>

Tab or list page [[]]

<apex:page
  standardController="Insert-Salesforce-Object"
  recordsetvar="a"
  extensions="skuid.Redirects"
  showHeader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  action="{!IF(canUseSkuid,'',redirect)}"
  title="{!$ObjectType.Insert-Salesforce-Object.labelPlural}">
    <skuid:page
    page="Insert-Skuid-Page" />
</apex:page>

Basic overrides with page assignments

Record detail page or Salesforce action [[]]

<apex:page
  standardController="Insert-Salesforce-Object"
  extensions="skuid.Redirects"
  showHeader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  action="{!IF(canUseSkuid,'',redirect)}"
  title="Insert-Action-to-Override {!Insert-Salesforce-Object.Name}">
    <skuid:page
    objectType="Insert-Salesforce-Object"
    actionType="Insert-Action-to-Override" />
</apex:page>

Tab or list page [[]]

<apex:page
  standardController="Insert-Salesforce-Object"
  recordsetvar="a"
  extensions="skuid.Redirects"
  showHeader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  action="{!IF(canUseSkuid,'',redirect)}"
  title="{!$ObjectType.Insert-Salesforce-Object.labelPlural}">
    <skuid:page
    objectType="Insert-Salesforce-Object"
    actionType="Insert-Action-to-Override" />
</apex:page>

Object/Controller-independent pages

For some contexts—such as dashboards, Force.com sites, and communities—you may wish to display a Skuid page with no direct need for object or other controllers.

Note

If using the Visualforce form at the top of this page, the examples will default to the name of your Skuid page.

Without page assignments [[]]

<apex:page
  readonly="true"
  showheader="true"
  sidebar="false"
  doctype="html-5.0"
  title="Insert-Skuid-Page-or-Other-Title">
    <skuid:page page="Insert-Skuid-Page"/>
</apex:page>

With page assignments [[]]

<apex:page
  readonly="true"
  showheader="true"
  sidebar="false"
  doctype="html-5.0"
  title="Insert-Skuid-Page-or-Other-Title">
    <skuid:page objectType="Insert-Salesforce-Object" actionType="Insert-Action-to-Override" />
</apex:page>

Overriding pages within a managed package

When working with managed packages, it is best practice to utilize the skuid:page component for all Salesforce button and action overrides (tab, list, view, edit, etc.) to ensure that all pages display correctly.

Without page assignments [[]]

<apex:page
  readonly="true"
  doctype="html-5.0">
    <skuid:page page="Insert-Skuid-Page"/>
 </apex:page>

With page assignments [[]]

<apex:page
  readonly="true"
  doctype="html-5.0">
    <skuid:page objectType="Insert-Salesforce-Object" actionType="Insert-Action-to-Override" />
 </apex:page>

Using a controller to redirect users without Skuid licenses (without page assignments) [[]]

<apex:page
  readonly="true"
  doctype="html-5.0"
  controller="skuid.Redirects"
  action="{!IF(canUseSkuid,'',redirect)}">
    <skuid:page page="Insert-Skuid-Page"/>
 </apex:page>

Using a controller to redirect users without Skuid licenses (with page assignments) [[]]

<apex:page
  readonly="true"
  doctype="html-5.0"
  controller="skuid.Redirects"
  action="{!IF(canUseSkuid,'',redirect)}">
    <skuid:page objectType="Insert-Salesforce-Object" actionType="Insert-Action-to-Override" />
 </apex:page>

Additional controller extensions

Note

These markup samples have set parameters for their particular examples. Even if you’ve used the Visualforce form at the top of this page, update the following attributes:

  • title
  • extensions
  • page or objectType and actionType

Include one custom extension [[]]

You can add additional Apex logic to your Visualforce Pages, such as additional JavaScript Remoting methods that can then be accessed by JavaScript in your Skuid Pages, by adding one or more controller extensions in the extensions attribute of the <apex:page> component:

For example, you may have an OrderProcessing extension controller like the following:

public with sharing class OrderProcessing {
  public OrderProcessing(ApexPages.StandardController stdCtl) {}
  public class OrderSubmission{
      public String orderNumber { get; set; }
      public Double amount { get; set; }
  }
  @RemoteAction
  public static String SubmitOrder(String orderSubmissionJSON) {
      OrderSubmission s = (OrderSubmission) JSON.deserialize(orderSubmissionJSON,OrderSubmission.class);
        /\* ... Submit order ... \*/
        return 'Success';
  }
}

To include this within a Skuid page, list it within the extensions attribute:

<apex:page
  standardController="Order__c"
  extensions="OrderProcessing"
  showHeader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  title="New {!$ObjectType.Order__c.label}":highlight-input-6:`>`
    <skuid:page objectType="Order__c" actionType="New" />
 </apex:page>

Include a custom extension and Skuid.Redirects [[]]

Perhaps you wish to use your extension controller with Skuid.Redirects:

public with sharing class OrderProcessing {
  public OrderProcessing(ApexPages.StandardController stdCtl) {}
  public OrderProcessing(skuid.Redirects r) {}
  public class OrderSubmission{
      public String orderNumber { get; set; }
      public Double amount { get; set; }
  }
  @RemoteAction
  public static String SubmitOrder(String orderSubmissionJSON) {
      OrderSubmission s = (OrderSubmission) JSON.deserialize(orderSubmissionJSON,OrderSubmission.class);
       /\* ... Submit order ... \*/
        return 'Success';
  }
}

In that case, your markup would look like this:

<apex:page
  standardController="Order__c"
  extensions="skuid.Redirects,OrderProcessing"
  showHeader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  action="{!IF(canUseSkuid,'',redirect)}"
  title="New {!$ObjectType.Order__c.label}":highlight-input-6:`>`
    <skuid:page objectType="Order__c" actionType="New" />
</apex:page>

Include multiple custom extensions [[]]

If you had needed to reference a different custom extension controller:

<apex:page
  standardController="Order__c"
  extensions="OrderProcessing,OrderProcessingExtras"
  showHeader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  title="New {!$ObjectType.Order__c.label}":highlight-input-6:`>`
    <skuid:page objectType="Order__c" actionType="New" />
</apex:page>

Visualforce Tab (with custom Apex controller)

Note

These markup samples have set parameters for their particular examples and assume the use of page assignments. Even if you’ve used the Visualforce form at the top of this page, update the following attributes:

  • title
  • controller
  • page or objectType and actionType

Here is an example of what a custom Apex controller class could look like:

public with sharing class AuthorizeDotNetAPI {
  public class OrderSubmission{
      public String orderNumber { get; set; }
      public Double amount { get; set; }
  }
  @RemoteAction
  public static String SubmitOrder(String orderSubmissionJSON) {
      OrderSubmission s = (OrderSubmission) JSON.deserialize(orderSubmissionJSON,OrderSubmission.class);
       /\* ... Submit order ... \*/
        return 'Success';
  }
}

The markup to include this class will vary based on whether based on the use of page assignments.

Without page assignments [[]]

<apex:page
  showheader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  title="New Credit Card Order"
  controller="AuthorizeDotNetAPI">
    <skuid:page page="SubmitCreditCardOrder" />
</apex:page>

With page assignments [[]]

<apex:page
  showheader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  title="New Credit Card Order"
  controller="AuthorizeDotNetAPI">
    <skuid:page objectType="Order__c" actionType="New" />
</apex:page>

Multiple Skuid Pages in one VF Page

<apex:page
  showheader="true"
  sidebar="false"
  readonly="true"
  docType="html-5.0"
  title="ACME Recruiting - Home">
    <div class="wrapper">
        <div class="leftnav">
             <skuid:page page="SiteLeftNav" />
        </div>
        <div class="maincontent">
            <skuid:page page="SiteMainContent" />
        </div>
     </div>
</apex:page>