Creating Visualforce Dashboard Components

Visualforce pages can be used as dashboard components. A dashboard shows data from source reports as visual components, which can be charts, gauges, tables, metrics, or Visualforce pages. The components provide a snapshot of key metrics and performance indicators for your organization. Each dashboard can have up to 20 components.

Visualforce pages that use the Standard Controller can’t be used in dashboards. To be included in a dashboard, a Visualforce page must have either no controller, use a custom controller, or reference a page bound to the StandardSetController Class. If a Visualforce page does not meet these requirements, it does not appear as an option in the dashboard component Visualforce Page drop-down list.

Create a Visualforce page called VFDashboard. The following markup shows an example of a Visualforce page that uses a standard list controller and can be used within a dashboard. It displays a list of the cases associated with your organization:

1<apex:page standardController="Case" recordSetvar="cases">
2    <apex:pageBlock>
3        <apex:form id="theForm">
4            <apex:panelGrid columns="2">
5                <apex:outputLabel value="View:"/>
6                <apex:selectList value="{!filterId}" size="1">
7                    <apex:actionSupport event="onchange" rerender="list"/>
8                    <apex:selectOptions value="{!listviewoptions}"/>
9                </apex:selectList>
10            </apex:panelGrid>
11            <apex:pageBlockSection>
12                <apex:dataList var="c" value="{!cases}" id="list">
13                {!c.subject}
14                </apex:dataList>
15            </apex:pageBlockSection>
16        </apex:form>
17    </apex:pageBlock>
18</apex:page>

To create a dashboard that uses this Visualforce page:

View the dashboard and click Edit.
Click Add Component from the top of any column.
Choose a Visualforce Page as the component type.
Optionally, enter a header to display at the top of the dashboard component.
Optionally, enter a footer to display at the bottom of the dashboard component.
From the Visualforce Page drop-down list, select VFDash.
Click Save.

Sample Visualforce Page Running in a Dashboard A Visualforce dashboard displaying a view of all open cases.

For a more complex example that uses a custom list controller, see Advanced Visualforce Dashboard Components.

Visualforce Developer Guide

Creating Visualforce Dashboard Components