Pages

Tuesday, September 23, 2014

Visualforce Area for Home Page Custom Component

By Summer '15 release, Home Page Custom Component contains code will no longer supported. Salesforce will remove non-supported code from HTML Area home page components. As a result, components with JavaScript or other advanced HTML elements may stop working properly.

Salesforce advise to use Visualforce Area to replace it, so if you have any exisiting HTML Area component, convert them Visualforce Area. You need to add the new component (and remove HTML Area components) to all Home Page Layouts.

Example: this is your HTML in HTML Area component
<marquee><b style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: medium;">Salesforce will be conducting emergency maintenance tonight, 14-Oct-14, from 7:00-8:00PM Pacific Time.&nbsp; Salesforce.com will not be available during this time.&nbsp; We extend Salesforce's apologies for this inconvenience.</b></marquee>


1. Create Visualforce page
Setup - Develop - Pages (you can create new Visualforce page directly in Production (although you should built it in Sandbox for testing and approval, and do not need Apex Test Method to deploy from Sandbox instance)

2. Copy the HTML
Put the HTML from existing component into <apex:page>HTML</apex:page> and Save.
Example:
1:  <apex:page>   
2:  <marquee>   
3:  <b style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: medium;">Salesforce will be conducting emergency maintenance tonight, 14-Oct-14, from 7:00-8:00pm Pacific Time.&nbsp; Salesforce.com will not be available during this time.&nbsp; We extend Salesforce's apologies for this inconvenience.</b>   
4:  </marquee>   
5:  </apex:page>   
3. Create Home Page Components
  • Setup - Customize - Home - Home Page Components, type a name and select Visualforce Area
  • Choose Visualforce Page created above.
  • Set the height, tick Show scrollbars and Label as needed.
  • Save


4. Set Home Page Layouts
  • Setup - Customize - Home - Home Page Layouts
  • Edit each Home Page Layout,  you should see new Visualforce Area component created in Components to Show, enable that component
  • Next
  • Adjust the order Up / Down
  • Save