Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Compile Visualforce Successfully
Creating Your First Page
Displaying Field Values with Visualforce
Using the Visualforce Component Library
Override an Existing Page with a Visualforce Page
Redirecting to a Standard Object List Page
Using Input Components in a Page
Adding and Customizing Input Field Labels
Setting the Tab Order for Fields in a Form
Adding Dependent Fields to a Page
Create Visualforce Dashboard Components
Displaying Related Lists for Custom Objects
Enabling Inline Editing
Converting a Page to a PDF File
Building a Table of Data in a Page
Editing a Table of Data in a Page
Using Query String Parameters in a Page
Use Ajax in a Page
Put Visualforce Pages on External Domains
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

Create Visualforce Dashboard Components

Use Visualforce pages as dashboard components. A dashboard shows data from source reports as visual components, such as charts, gauges, tables, metrics, or Visualforce pages. The components provide a snapshot of key metrics and performance indicators. Each dashboard can have up to 20 components.
Available in: Salesforce Classic (not available in all orgs)
Available in: all editions

Visualforce pages as dashboard components are only available in Salesforce Classic. In Lightning Experience, you can create a custom tab and use that as a dashboard for your custom lightning components.

To be included in a dashboard, a Visualforce page must use a custom controller, use a standard or custom list controller, or not have a controller. You can’t add a Visualforce page with a standard controller to a dashboard. Only Visualforce pages that meet these requirements appear as options in the Data Sources tab.

Visualforce dashboard components aren’t supported when third-party cookies are disabled. See Visualforce Limitations in Salesforce Classic When Third-Party Cookies are Blocked.

Note

  1. Create a Visualforce page called VFDashboard.
    The Visualforce page uses a standard list controller, so you can add it to a dashboard. It displays a list of the cases associated with your org.
    <apex:page standardController="Case" recordSetvar="cases">
    <apex:pageBlock>
        <apex:form id="theForm">
            <apex:panelGrid columns="2">
                <apex:outputLabel value="View:"/>
                <apex:selectList value="{!filterId}" size="1">
                    <apex:actionSupport event="onchange" rerender="list"/>
                    <apex:selectOptions value="{!listviewoptions}"/>
                </apex:selectList>
            </apex:panelGrid>
            <apex:pageBlockSection>
                <apex:dataList var="c" value="{!cases}" id="list">
                {!c.subject}
                </apex:dataList>
            </apex:pageBlockSection>
        </apex:form>
    </apex:pageBlock>
</apex:page>
  2. Build a Salesforce Classic dashboard.
  3. Add the Visualforce page to a dashboard.
    1. Click the Dashboards tab.
    2. On the dashboard where you want to add the Visualforce page component, click Edit.
    3. From the Components tab, drag Visualforce Page onto your dashboard.
    4. From the Data Sources tab, click the Visualforce Pages dropdown, and drag VFDashboard onto the component that you just added to the dashboard.
    5. Optionally, enter a header or footer to display on the Visualforce dashboard component.
    6. Save your changes.
    A Visualforce dashboard displaying a view of all open cases.

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