Visualforce is commonly used to produce custom pages that override or supplement standard platform functionality. Visualforce pages can also be incorporated into any HTML markup through use of an iframe.
Note
An iframe, or inline frame, nests an HTML document inside another HTML document. For more information, visit http://reference.sitepoint.com/html/iframe.
In this recipe, we will add a Visualforce page to a Salesforce sidebar component. This page will display the number of currently open cases in the organization, and will be styled and sized to fit seamlessly into the sidebar.
This recipe makes use of a custom controller, so this will need to be created before the Visualforce page.
Navigate to the Apex Classes setup page by clicking on Your Name | Setup | Develop | Apex Classes.
Click on the New button.
Paste the contents of the
CasesSidebarController.clsApex class from the code download into the Apex Class area.Next, create the Visualforce page by navigating to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Click on the New button.
Enter
CasesSidebarin the Label field.Accept the default CasesSidebar that is automatically generated for the Name field.
Paste the contents of the
CasesSidebar.pagefile from the code download into the Visualforce Markup area.Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Locate the entry for the CasesSidebar page and click on the Security link.
On the resulting page, select which profiles should have access and click on the Save button.
Next, create the home page component by navigating to the Home Page Components setup page by clicking on Your Name | Setup | Customize | Home | Home Page Components.
Scroll down to the Custom Components section and click on the New button.
If the Understanding Custom Components information screen appears, as shown in the following screenshot, click on the Next button.
On the next page, Step 1. New Custom Components, enter
Case Count by Statusin the Name field, select the HTML Area option, and click on the Next button.On the next page, Step 2. New Custom Components, select the Narrow (Left) Column option.
Select the Show HTML box.
Paste the following markup into the editable area:
<iframe style="border: none" src="/apex/CasesSidebar" seamless=""></iframe>
Click on the Save button.
Next, add the new component to one or more home page layouts. Navigate to Your Name | Setup | Customize | Home | Home Page Layouts.
Locate the name of the home page layout you wish to add the component to and click on the Edit link.
On the resulting page, Step 1. Select the Components to show, select the Case Count by Status box in the Select Narrow Components to Show section and click on the Next button.
On the next page, Step 2. Order the Components, use the arrow buttons to move the Case Count by Status component to the desired position in the Narrow (Left) Column list and click on the Save button.
Repeat steps 22 to 24 for any other home page layouts that will contain the sidebar component.
Navigate to Your Name | Setup | Customize | User Interface and locate the Sidebar section.
Select the Show Custom Sidebar Components on All Pages box as shown in the following screenshot, and click on the Save button.
The component appears in the sidebar on all pages, showing the number of cases open for each nonclosed status, as shown in the following screenshot:
The case counts displayed in the sidebar will be retrieved when the page is displayed, but will remain static from that point. An action poller can be used to automatically refresh the counts at regular intervals. However, this will introduce a security risk, as each time the poller retrieves the updated information it will refresh the user's session. This means that if a user were to leave their workstation unattended, the Salesforce session will never expire. If this mechanism is used, it is important to remind users of the importance of locking their workstation should they leave it unattended.