Salesforce Classic

Whether changing a few details or overhauling the look and feel of an entire Salesforce org, Skuid pages are typically deployed on the Salesforce Classic UI using Visualforce overrides. This consists of two main parts:

  1. Creating a Visualforce page that either redirects to or embeds a Skuid page
  2. Assigning the Visualforce page to a Salesforce action

You will need to create a Visualforce page for each Salesforce action (tab, list, view, edit, etc) for each Salesforce object that want to replace on an object.

While these overrides will account for the majority of Salesforce Classic deployments, there are also alternative deployment methods. For more information on see the Other Deployment Options section.

Considerations

When deciding the best deployment method for a situation, a variety of factors come in to play. How Skuid pages are displayed, who they are displayed to, and in what context they are displayed, among other choices, affect how an override is executed. For some specific caveats to keep in mind, see the below sections.

The skuid:page Visualforce component

For most cases, creating a Visualforce page that redirects to your Skuid page is the simplest way to override your Salesforce UI (the “Redirect approach”). However, if you want more control over your Skuid deployment and the samples below do not meet your needs, consider using the skuid:page Visualforce component, which actually embeds your Skuid page inside of a Visualforce page—providing far more options to configure.

Note

There are required steps that must be completed before the skuid:page Visualforce component can be effectively used. Be sure to read the skuid:page Visualforce component prerequisites section before you start building.

Additionally due to the nature of managed packages, it is best practice to use the skuid:page Visualforce component instead of the Redirect method.

Page assignments

Using your Visualforce pages in conjunction with page assignments, you can also send different users to different Skuid pages for the same Salesforce page. However, this will affect which Visualforce markup you should use.

If you are using page assignments, be sure to use the code samples from the appropriate section.

Visualforce Markup Overview

Visualforce markup will vary based on several factors:

  • The object being overridden
  • If the page is a detail or list page
  • Whether or not Skuid page assignments should be considered

Note

If you are using overrides in a context beyond basic tabs and actions—such as for console apps or dashboards—there are additional concerns to consider. Visit the Deployment Contexts section.

To make it clear which parts need tweaking, and which parts not to worry about, let’s break down a basic Visualforce override’s markup:

<apex:page
  standardController="Insert-Salesforce-Object"
  extensions="skuid.Redirects"
  action="{!redirect}&page=Insert-Skuid-Page">
</apex:page>
  1. apex:page - This standard Salesforce component tells Salesforce the kind of page you are making, and everything following this is an “attribute.” For this process, you’ll start out every Visualforce page with this component, and the attributes that follow tell Salesforce where to send your users.

  2. standardController - This is how Skuid knows which object to read and write to. To override both standard and custom object pages, you’ll type the API name of your Salesforce object name here. In this example, we’re using the “Contact” object, but you could also put “Custom_Object__c” or whatever the name of your custom object may be.

  3. recordSetVar - This attribute grabs all the records for the object your user is viewing, hence why you always need to enter this attribute when the Salesforce page you are overriding is a tab or a list. You do not, however, need to change the “c” parameter to anything else.

  4. extensions - An extension is a set of methods within Visualforce code, and since we are redirecting to a Skuid page, you’ll be calling the “skuid.Redirects” extension. This is where Skuid figures out the proper URL and variables to output for overriding your UI. Stated simply: this is where all the behind-the-scenes magic happens. Don’t worry—you’ll almost never need to tweak this attribute.

  5. action - Not to be confused with Salesforce actions, this attribute outputs the URL for your Salesforce page, and most importantly it tells Skuid which page to send users to. In action, {!redirect} is calling on your skuid.Redirects extension to get the first part of the URL, and the “&page=” element declares your Skuid page. So make sure you type the name of your Skuid page after the equals sign.

    One important change for tab and list pages is that you’ll generally be using question marks (?) in your action attribute.

    For page assignment markup, this attribute is essential. Instead of sending a user directly to a specific Skuid page, the markup lists the object and action being overidden so Skuid will apply the proper page assignment. For more information, see the page assignments topic.

  6. /apex:page - this closes out your Visualforce code.

Visualforce Markup Samples

To have the markup samples throughout this section reflect your use case:

  1. Fill out each field in the table below.
  2. Navigate to appropriate the markup sample.
  3. Copy all markup in the sample.
  4. Paste the markup into a new or existing Visualforce page as shown in the Applying Overrides section.
Field Value
Salesforce Object API Name
Skuid Page
Salesforce Action

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.

Without page assignments

Record detail page or Salesforce action [[]]

<apex:page
  standardController="Insert-Salesforce-Object"
  extensions="skuid.Redirects"
  action="{!redirect}&page=Insert-Skuid-Page">
</apex:page>

Tab or list page [[]]

Most of the Visualforce used below is similar to the record detail or Salesforce action override, key differences being the recordSetVar and action attributes.

<apex:page
  standardController="Insert-Salesforce-Object"
  recordSetVar="c"
  extensions="skuid.Redirects"
  action="{!redirect}?page=Insert-Skuid-Page">
</apex:page>

After entering the appropriate Visualforce markup, click the Save button at the top of the Page Edit pane.

With page assignments

Record detail page or Salesforce action [[]]

<apex:page
  standardController="Insert-Salesforce-Object"
  extensions="skuid.Redirects"
  action="{!redirect}&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"
  action="{!redirect}?objectType=Insert-Salesforce-Object&actionType=Insert-Action-to-Override">
</apex:page>

Applying Visualforce Overrides

To apply overrides, create a Visualforce page with the appropriate markup and then set that page as a Salesforce action’s override.

In Salesforce setup:

  1. Navigate to Developer > Visualforce Pages.

  2. Click New.

    Note

    There are required steps that must be completed before the skuid:page Visualforce component can be effectively used. Be sure to read the skuid:page Visualforce component prerequisites section before you start building.

  3. Enter an appropriate label for the page you’ll be overriding.

    Note

    The name field will automatically generate based on the label field.

  4. (Optional) Enter a description.

  5. Enter the appropriate Visualforce markup. For examples, see the Visualforce Markup Overview section.

  6. Click Save.

With the Visualforce markup in place, configure the Salesforce object’s settings so the appropriate action will to point to the newly created Visualforce page.

  1. Navigate to the Buttons, Links, and Actions pane for the object.
    • For standard objects, navigate to Customize > [Your Object] > Buttons, Links, and Actions.
    • For custom objects, navigate to Create > Objects > [Your Object] and on the custom object page, scroll down to the Buttons, Links, and Actions pane.
  2. Click Edit beside the Salesforce link or action.
  3. For the Override With field, click the Visualforce Page radio button.
  4. Select the Visualforce page created in the previous step.
  5. Click Save.

Deployment Contexts

Depending on the context of an override, additional steps may need to be taken to ensure deployments work as expected.

Salesforce console apps

Salesforce console apps utilize tabs that allow users to navigate between several screens without having to open multiple browser windows. This functionality provides users with more flexibility, which can also be extended through Skuid overrides.

Console app overrides are similar to other overrides, with the key difference being that the List action must be overridden for Skuid pages to be displayed in a console app’s tab.

For record detail pages accessed through a console app, both Edit and View overrides will persist when clicking the Edit icon or a row’s name field, respectively.

Note

Record detail overrides that use the Redirect method they will display External Page as their tab title. For more control, use the skuid:page Visualforce component.

Salesforce dashboards

Salesforce dashboards can also display Skuid pages alongside other dashboard components using a Visualforce page.

Note

Using the skuid:page Visualforce component is recommended for Salesforce dashboards. For the appropriate markup, see the Object/Controller-independent pages markup examples.

In Salesforce Setup

  1. Click the Dashboards tab.
  2. Click Go to Dashboard List.
  3. Navigate to an existing dashboard and click Edit or click New.
  4. Click the Data Sources tab of the left dashboard toolbar.
  5. Drag and drop the appropriate Visualforce page into a column.
  6. Click Save.

Return to Standard Layouts

To permanently go back to a page’s standard layout, unset the Button/Link overrides in Setup.

To temporarily return to the standard page, add the ?nooverride=1 URL parameter to the page’s URL. How this URL parameter is added depends on the type of page.

Record detail pages

  1. Copy the current page’s URL.

  2. Delete everything in the URL after force.com except for the record Id

  3. Add ?nooverride=1 to the end of the URL.

    For example:

    • We’re on the Contact view page and the URL ends with /apex/ViewContact?id=003U000000aIay6IAC&sfdc.override=1.

      Now what we want to do is take everything out of this string except for the Contact’s Id (003U000000alay6IAC).

    • We want the URL to tell Salesforce not to override the page. So, the new URL would be …force.com/003U000000alay6IAC?nooverride=1 (That’s force.com/[Id]?nooverride=1).

  4. Once you’ve entered in the new address, click the browser’s Go.

    The URL will look similar to this: https://example.salesforce.com/003003U000000alay6IAC?nooverride=1

Other pages

If you want to see the Standard Layout for a Tab page, a new page, a clone page etc., use a combination of the Model Key Prefix and the ?nooverride=1 URL parameter.

To get the Key Prefix for a particular object, take the first three digits from the Record Id of one of the object’s records (this works for custom objects, too!).

For example, our Contact record’s Id was 003U000000alay6IAC, and the first three digits of this Id, 003, make up the key prefix for the Contact object.

Here’s a quick reference for common objects:

  • Account: /001
  • Campaign: /701
  • Case: /500
  • Contact: /003
  • Lead: /00Q
  • Opportunity: /006

For tab pages, the URL should end with /[KeyPrefix]?nooverride=1

e.g. https://example.salesforce.com/003?nooverride=1

This process for “New” pages completely mirrors tab or list pages, except the URL should end with /[KeyPrefix]/e?nooverride=1

e.g. https://example.salesforce.com/003/e?nooverride=1

Additional Deployment Settings

Set a Salesforce app’s default tab

You can edit the default landing tab for both standard and custom apps within Salesforce. Whether you’ve overridden a standard object’s tab page or created custom Visualforce tabs linked to Skuid pages, follow the directions below to set it as the default tab for an app.

In Salesforce setup:

  1. Navigate to Create > Apps.
  2. Click Edit beside the appropriate app.
  3. For the Default Landing Tab field, select an appropriate tab:
  4. Click Save.

Note

Users may have issues when setting default tabs that use the Redirect method to override their Salesforce UI. In these instances, use the skuid:page component deployment method instead. Make sure that you tailor your Visualforce code appropriately for the type of page your are overriding.

If the skuid:page component method is also not satisfactory, then use a Page Assignment in addition to the appropriate skuid:page component code.

Highlight an overridden tab when clicked

If your Skuid UI still utilizes Salesforce headers and sidebars, you can also set an option that will highlight your tab when clicked within the Salesforce UI. This is useful if you have a lot of tabs and never want to lose track of which page you are on. To enable this, you just need to set your “Tab to Override” field in your Skuid pages properties.

  1. Open a Skuid page that’s being used for an override in the App Composer.
  2. Click on the page’s name to edit its properties.
  3. For the Tab to Override field, enter either the SObject Name (e.g. ‘Account’, ‘Project__c’) of the custom object tab, or the label (e.g. ‘HelloWorld’) of the Web/Visualforce tab, that you will be using this page as an override for.
  4. Save your page.

Note

This a optional, cosmetic feature that has no effect whether or not a page is overridden.

Other Deployment Options

Custom buttons

You may not want to completely override an object’s detail page, but instead give users the option of accessing Skuid from the standard Salesforce layout through a custom button. You can do so by assigning the appropriate URL to that button.

In Salesforce:

  1. From the Setup menu, navigate to the standard or custom object that you’d like to add a detail page button to.

    For standard objects:

    • Navigate to the object’s Buttons, Links, and Actions page.

    For custom objects:

    1. Create > Objects
    2. Click the label of the custom object.
    3. Scroll to the Buttons, Links, and Actions pane.
  2. Click New Button or Link.

  3. Enter the name of your detail page button as you’d like it to appear, e.g. “Skuid View”.

  4. Choose “Detail Page Button” so that this button will be able to be added at the top of your object’s detail page layouts.

  5. Choose whether to have the button open your Skuid Page in a new window, or in the same window.

  6. Enter the URL that will open your Skuid Page:

    For example, to navigate to a record detail page

    /apex/skuid__UI?page=Insert-Skuid-Page&id={!Insert-Salesforce-Object.Id}
    

    Make sure to insert your Skuid page and Salesforce object where appropriate.

Add this button as you would any other button to your Salesforce Detail pages. For more information, see Salesforce docs on the subject.

Custom Visualforce tabs

As opposed to overriding object actions and links with a Visualforce page, you may also create new Visualforce tabs with the express purpose of displaying a Skuid page.

The steps below cover the basic process for creating a Visualforce tab. For more information, see Saleforce’s Create Visualforce Tabs documentation.

In Salesforce setup:

  1. Navigate to Create > Tabs.
  2. Click New In the Visualforce Tabs pane.
  3. In the Visualforce Page field, select the page containing the appropriate markup.
  4. Enter a label for the new tab.
  5. Choose a Tab Style and enter other relevant information.
  6. Click Next.
  7. Choose the profiles who will see this tab.
  8. Click Next.
  9. Choose the Custom Apps where this tab will appear.
  10. Click Save.

Salesforce mobile

To use a Skuid page within a Salesforce mobile (previously Salesforce1) context, you must create a Visualforce tab based on a skuid:page VF component page. That tab then must be added to the Salesforce mobile navigation list.

  1. From the Salesforce sidebar, navigate to Mobile Administration > Salesforce Navigation (Classic) or Apps > Mobile Apps > Salesforce Navigation (Lightning Experience).

  2. Select the appropriate Visualforce tab in the Available pane.

  3. Click the Add arrow.

    Note

    You can also re-order your navigation menu items using the Up and Down arrows.

  4. When you are satisfied with your navigation menu settings, press Save.

It is also possible to deploy Skuid pages to Salesforce mobile using a Lightning page tab.

Troubleshooting

General issues

  • Overrides not working as expecting:

    • I see this error message:

      You've been INKED! (Something went wrong)

      Skuid was unable to redirect the user to standard Salesforce Page Layouts, and no Skuid Page could be used instead.

    • I still see the standard Salesforce UI even I’ve assigned an override.

    • When navigating to an overridden page, I receive this error:

      The name can only contain underscores and alphanumeric characters. It must begin with a letter and be unique, and must not include spaces, end with an underscore, or contain two consecutive underscores.

    These errors may be related to the action attribute in your Visualforce markup, especially if you’re working with actions other than tab and list.

    Try replacing {!redirect}?page= with {!redirect}&page= or vice versa.

    These issues relate to URL parameters and their temperamental punctuation. The ? and & characters are used to indicate variables that may be of use within a page.

    The ? character must always be used for the first variable in a URL. Using the & character for a URL’s first variable will cause errors. You also cannot use ? after there is already another ? in the URL. This is why, depending on the Salesforce action you are overriding, you may need to swap a ? for an & or vice versa.

    If this does not work, return to the above code samples and ensure that they match what you are using.

  • When saving your Visualforce code, you may encounter this error:

    Error: <apex:page> is required and must be the outermost tag in the markup at line 1 column 1

    If so, double check your code for any extra quotation marks within your attributes.

  • Users receive an Insufficient Privileges error when trying to access to a Skuid page:

    You do not have the level of access necessary to perform the operation you requested. Please contact the owner of the record or your administrator if access is necessary. For more information, see Insufficient Privileges Errors.

    Users who see this error may not have access to the Visualforce page that overrides the Salesforce page.

    Verify the security settings for the Visualforce page containing the override markup.

Visualforce tabs

  • Users may have issues when setting default tabs that use the Redirect method to override their Salesforce UI. In these instances, use the skuid:page component instead. Make sure that you tailor your Visualforce code appropriately for the type of page your are overriding.
  • If the skuid:page component method is also not satisfactory, then use a Page Assignment in addition to the appropriate skuid:page component code.

Ask a question and browse previous questions and answers in the Skuid Community.