Salesforce Spring '10 - New User Interface Theme

Abstract

The new user interface theme that was first demonstrated at Dreamforce 2009 will be available to be turned on as part of the Salesforce Spring ’10 release. Developers that have attempted to mimic the existing standard salesforce.com user interface may be affected by this change. For example, if your user interface code generates HTML that is intended to look like the standard styling, then that user interface may look out of place when run in an org that uses the new styling.

This article discusses the UI changes, and what actions you will need to take if you are affected. This documentation is only relevant if you are a partner or developer that has created a custom user interface. This article is not relevant if you are an end-user.

The New User Interface Theme

The first thing that you should know about the new user interface theme is that it is optional – customers do not have to enable it in their environment.

The second thing that you should know about the new user interface theme is that it will not affect the functionality of any of your custom user interfaces. Your custom user interfaces may no longer match the rest of the salesforce.com UI perfectly, but they will still function, just as they have in the past.

The last thing to know about the new user interface theme is that it looks great! Here’s a sample screenshot of the new Home Tab

How to Determine If You Need to Alter Your Custom User Interfaces

Most Visualforce developers should not need to make any changes to their custom user interfaces. Most Visualforce pages will automatically look correct regardless of which UI theme is being used. The custom user interface components that are most likely to need alteration are:

  • S-Controls that mimic the current UI by using Styles and CSS.
  • JSP, ASP.Net, PHP, Ruby, and other server-based pages that mimic the current UI by using Styles and CSS.
  • Visualforce pages that have implemented custom HTML or CSS to mimic the current UI.

The most surefire way to determine if your custom user interface needs to be altered to accommodate the new UI theme is to test your user interfaces inside of an org that has the new UI theme enabled - and we'll discuss how to do that in just a moment.

Are You a Customer?

If you’re a customer, you can probably stop reading now. You should wait for the new UI theme to be deployed to production as a part of the Spring ’10 release before testing your custom user interfaces. That way, you will be able to easily undertake any necessary modification efforts in your Sandbox environment. However, if you are very eager to begin testing, you may follow the instructions outlined below - but you should log your cases from inside of the app since you don't have access to the Partner Portal.

Are you a Partner?

If you’re a partner, you don’t have direct control over whether or not your customers enable the new UI theme, so the remainder of this article is focused on how you can determine if your custom user interfaces need to be updated, and the steps that you will need to take if they do need to be updated.

Testing Your Custom User Interfaces with The New UI Theme

You will need to test your custom user interface in one of two environments – either the Pre-Release or Sandbox environment. Neither environment will have the new UI theme enabled by default, so you will need to log a case in order to enable the new UI theme permission. Follow either the Pre-Release or Sandbox instructions below.

Pre-Release Testing

The Pre-Release environment will give you the earliest-possible access to the new UI theme. This is especially important if you believe that you will need to modify your custom user interfaces, because Pre-Release will allow you to gauge the magnitude of your work, if any. Performing extensive development work in Pre-Release is not recommended though. Pre-Release should be viewed as an environment for validating and estimating. Sandbox is a more appropriate environment for development work.

Caveats

Pre-Release has some important caveats that you should be aware of:

  • AppExchange packages can not be installed in to Pre-Release orgs.
  • All Pre-Release orgs will be unavailable after the conclusion of the Pre-Release program. (Almost immediately after the production release.)
  • Your Pre-Release org will not contain any data from your production salesforce.com org.
  • Changes made in the Pre-Release environment cannot be migrated back to your production environment.
  • Some functionality may not be available or may not work properly in the Pre-Release environment. In particular, Marketing, Partner/Customer Portal, Salesforce Content and Ideas cannot be turned on in Pre-Release.
  • Pre-Release is rebuilt regularly and may be unavailable at certain times.

Instructions

To test your application in Pre-Release, you will need to follow these steps:

  1. Sign up for a Pre-Release Developer Edition org.
  2. Use the Force.com IDE’s “Deploy to Server” wizard to move your custom user interface metadata components to your Pre-Release org. (Select the “Pre-Release” Environment option.)
  3. Log a Partner Support Case in the Partner Portal to request that the new UI theme be enabled as an option in your Pre-Release org. Be sure to:
    1. Specify that your org is a "Pre-Release" org.
    2. Specify your Pre-Release Org Id in the Case.
    3. Log the Case by selecting the "I have a question or issue relating to a salesforce.com partner program" radio button and then the "AppExchange & Services Listing > Salesforce New UI" option.
  4. The new UI theme option will not be available in your Pre-Release org until January 13th. You will receive an email once it has been made available in your org.
  5. Once the new UI theme option has been made available, you should enable the new UI theme by going to: Setup > Customize > User Interface > Enable New User Interface Theme
  6. Verify that your custom user interfaces match the new user interface theme.

In summary, to get an Pre-Release org that supports the new UI, you have to sign up for a Pre-Release Developer Edition org, log a case in the Partner Portal, and after January 13th your Pre-Release org will be updated to support the new UI theme, at which point you can enable the new UI theme and test your custom user interfaces. Additionally, this org will be eliminated after the Pre-Release program has concluded - when Spring '10 is released to production.

Sandbox Testing

The Sandbox environment is more stable than Pre-Release, but it has some important time-dependent requirements.

Instructions

In order to test in the Sandbox environment:

  1. You must have created a Sandbox before January 9th, 2010 by following the Sandbox Preview Instructions. (If you’re a partner, and you have already followed these instructions on the Partner Portal for creating Sandboxes in order to test installing your package, then you do not need to sign up for additional Sandbox orgs.)
  2. Install your package in to your Sandbox environment.
  3. Log a Partner Support Case in the Partner Portal to request that the new UI theme be enabled as an option in your Sandbox org. Be sure to:
    1. Specify that your org is a "Sandbox" org.
    2. Specify your Sandbox Org Id in the Case.
    3. Log the Case by selecting the "I have a question or issue relating to a salesforce.com partner program" radio button and then the "AppExchange & Services Listing > Salesforce New UI" option.
  4. The new UI theme option will not be available in Sandbox until January 22nd. You will receive an email once it has been made available in your org.
  5. Once the new UI theme option has been made available, you should enable the new UI theme by going to: Setup > Customize > User Interface > Enable New User Interface Theme
  6. Verify that your custom user interfaces match the new user interface theme.
  7. Update your custom user interfaces if necessary.

In summary, to get a Sandbox org that supports the new UI, you have to sign up for a Sandbox org, log a case in the Partner Portal, and after January 22nd your Sandbox org will be updated to support the new UI theme, at which point you can enable the new UI theme, test your custom user interfaces and make updates as necessary.

Resources for Making Changes

In the event that you do need to make changes to some of your custom user interface components, the sample code in the Identifying the Salesforce.com Style Your Users See section of the Spring '10 Visualforce preview documentation demonstrates how you can write code that will look good regardless of which UI theme your users are using.

Summary

This article discussed the new user interface theme that will be enabled as an option in the Spring '10 release, who will be affected by the new UI theme and what actions you should take if you are affected.

Additional Questions or Concerns?

The Spring ’10 release preview webinar on January 19th will have more information about the Spring ’10 release.

Partners

Partners that have additional questions or concerns about how the new UI Theme will affect your application, please log a Partner Support Case in the Partner Portal. Be sure to select the "I have a question or issue relating to a salesforce.com partner program" radio button and then the "AppExchange & Services Listing > Salesforce New UI" option.

Developers

Other developers that have additional questions or concerns about the new UI theme should post those questions on the Visualforce Development Board.