---
schema_version: "1"
id: 2a26f0cb721e070e32993371d6e2be2edc126243ae037e771e384998c3023028
title: Add a Analytics Dashboard to a Visualforce Page
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/analytics/264-0-0/bi_embed_vf.md
canonical_url: https://help.salesforce.com/s/articleView?id=analytics.bi_embed_vf.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2391e30b9a70e12a66d7d8fb83323fe05ffba0bd5a5374443b4e081bb1634320
description: By embedding a Analytics dashboard into a Visualforce page, you can provide an interactive presentation of your data. Users can drill in and explore the dashboard within the frame on the Visualforce page or in a new window in Analytics.
products:
  - CRM Analytics
  - Cross Cloud
release: "264"
---
# Add a Analytics Dashboard to a Visualforce Page

By embedding a Analytics dashboard into a Visualforce page, you can provide an interactive presentation of your data. Users can drill in and explore the dashboard within the frame on the Visualforce page or in a new window in Analytics.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in Salesforce Classic and Lightning Experience.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available with CRM Analytics, which is available for an extra cost in <strong>Enterprise</strong>, <strong>Performance</strong>, and <strong>Unlimited</strong> Editions. Also available in <strong>Developer</strong> Edition.</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d56404e71">User Permissions
            Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e71 ">To view embedded Analytics dashboards:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e71 ">Analytics Growth permission set license with Use Analytics permission OR
            Analytics for Communities permission set license with View Analytics on Experience
            Cloud pages permission</td>

        </tr>
      </tbody>
    </table>

To add a dashboard to your Visualforce page, configure the Aura component. You can add one dashboard per Visualforce page. However, the dashboard can include links to other dashboards or CRM Analytics assets. `<wave:dashboard>`

Here are two examples. In these examples, the dashboard is identified by the `dashboardId`, which is an 18-character code beginning with 0FK. You can find the `dashboardId` at the end of the URL when viewing a dashboard. An alternative way to identify the dashboard is by its `developerName`, which can be requested through the API.

```markup
<apex:page sidebar="true" standardController="Opportunity">
        
  <wave:dashboard dashboardId="0FKB000000006Y7OAI" 
        showTitle="true" 
        height="800px" 
        openLinksInNewWindow="true" 
        filter="{'datasets' : {'opportunity': [ {'fields':['Id'], 'selection': ['{!Opportunity.Id}']}]}}"/>
        
</apex:page>
```

```markup
<apex:page standardController="case">

    <wave:dashboard dashboardId="0FKxx000000000uGAA" 
          height="1000px" 
          showTitle="false"
          showSharing="true" 
          openLocation="HIDE"
          openLinksInNewWindow="false" 
          hideOnError="true"
          filter="{'datasets' : {'ServiceCase4': [ {'fields':['Id'], 'selection': ['{!case.Id}']},  {'fields':['OwnerId'], 'filter': { 'operator':'in', 'values': ['{!case.OwnerId}', '{!case.Product__c}']}}]}}"/>

</apex:page>
```

- The `showTitle` attribute gives you control over the visibility of the dashboard title. If set to true, the dashboard’s title is included above the dashboard. If set to false, the dashboard appears without a title. The default is true.
- The `showSharing` attribute lets you include the Share icon on the dashboard. If the icon is present, users can click to open the Share dialog, where they can post to Chatter and download images and data. If set to true, and the dashboard is sharable, then the dashboard shows the Share icon. If set to false, the dashboard doesn't show the Share icon. The default is false. To show the Share icon, the minimum dashboard height is 612 pixels.
- The `showHeader` attribute lets you control the visibility of the dashboard header. If set to true, the dashboard is displayed with a header bar. The header bar includes the open dashboard icon, the date and time that the dashboard’s data was updated, and the dashboard views menu. If set to false, the dashboard appears without a header bar. The default is true. The header bar automatically appears when either `showSharing` or `showTitle` is true.
- The `openLocation` attribute lets you control where the open icon on the dashboard header opens the dashboard. The default value is `OPEN_IN_STUDIO`, which opens the dashboard in the Analytics Studio. The other options are `OPEN_IN_TAB`, which opens the dashboard in the Salesforce Lightning Analytics tab and `HIDE`, which disables the open icon.
- With the `openLinksInNewWindow` attribute, you can specify where links from the dashboard to other assets are opened. If set to true, links open in new windows. If set to false, links to other assets open in the same window. The default is true.
- The `hideOnError` attribute gives you control over whether a Analytics asset appears if there is an error (such as the user doesn't have access to the dashboard or it has been deleted). When set to true, if the dashboard has an error, it won’t appear on the page. When set to false, the dashboard appears but doesn’t show any data. The default is false.
- The `enableNotifications` attribute lets users with permission to set conditions and get notified about updates to dashboard widgets. When `showHeader` is true, this option also surfaces the notifications icon in the dashboard header which opens the notifications management panel for editing and deleting notifications. If you enable Show Header, it’s recommended that the dashboard is at least 400 pixels in width to accommodate the management panel. The default is false.
- The `enableSubscriptions` attribute lets users with permission to subscribe for periodic email updates on dashboard widgets. When Show Header is true, this option also surfaces the subscriptions icon in the dashboard header which opens the subscriptions management panel for editing and deleting subscriptions. If you enable Show Header, it’s recommended that the dashboard is at least 400 pixels in width to accommodate the management panel. The default is false.
- The `pageId` attribute lets you specify which page of the dashboard to load on render. If not specified, the default page of the dashboard loads on render.
- The `width` attribute specifies the width of the dashboard, in pixels or percent. Pixel values are simply the number of pixels, for example, 500. Percentage values specify the width of the containing HTML element and must include the percent sign, for example, 20%. If the specified width is too large for the device, the maximum device width is used.
- With the `filter` attribute, you can either select or filter on dataset fields at run time. For example, this attribute can be used to set up the embedded dashboard to show only the data that’s relevant for the record being viewed by linking data fields in the dashboard to an object’s fields. Filters are configured with JSON strings.
    
    Use this syntax for filtering on dimensions.
    
    ```markup
    filter="{'datasets' : {'dataset1': [ {'fields': ['field1'], 'selection': ['!value1', '!value2']}, {'fields': ['field2'], 'filter': { 'operator': 'operator1', 'values': ['!value3', '!value4']}}]}}"
    ```
    
    Use this syntax for filtering on measures.
    
    ```markup
    filter="{'datasets' : {'dataset1': [ {'fields': ['field1'], 'selection': ['!value1', '!value2']}, {'fields': ['field2'], 'filter': { 'operator': 'operator1', 'values': [[value3]]}}]}}"
    ```
    
    For example:
    
    ```markup
    filter="{'datasets' : {'Sales': [ {'fields':['Region', 'Stage'], 'selection': [ ['West', 'Prospecting'], ['North', 'Qualification'] ]}]}}"
    ```
    
    Refer to the table to understand the notation for the `filter` attribute.
    
    ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/images/icon_tip.png)
    
    Tip This is a new syntax as of Spring ‘17. The previous syntax, noted [here](https://help.salesforce.com/s/articleView?id=analytics.bi_embed_vf.htm&release=264.0.0&type=5), is still supported.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:21.05263157894737%">
              <col style="width:26.31578947368421%">
              <col style="width:52.63157894736842%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d56404e228">Notation</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d56404e230">Description</th>
                <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d56404e232">Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Notation" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e228 ">datasets</td>
                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e230 ">CRM Analytics dataset</td>
                <td data-label="Notes" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e232 ">Where to find it: On the CRM Analytics home page, select Edit on the
                  dataset. The System Name is in the left panel of the edit page for the
                  dataset. (If your org has namespaces, include the namespace prefix and two
                  underscores before the dataset system name.)</td>
              </tr>
              <tr class="">
                <td data-label="Notation" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e228 ">fields </td>
                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e230 "><a href="https://help.salesforce.com/s/articleView?id=analytics.bi_glossary.htm&amp;release=264.0.0&amp;type=5">Dimension</a> or <a href="https://help.salesforce.com/s/articleView?id=analytics.bi_glossary.htm&amp;release=264.0.0&amp;type=5">Measure</a> in the CRM Analytics dataset</td>
                <td data-label="Notes" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e232 ">Where to find it: Click the Explore icon to open the widget. Then select
                  <strong class="uicontrol">Show SAQL</strong> from the Options menu. For dimension names,
                  look for “group by” statements. For measure names, look for statements with
                  functions such as “sum” or “stddev.”
                </td>
              </tr>
              <tr class="">
                <td data-label="Notation" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e228 ">values </td>
                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e230 ">Field in the Salesforce object, or a specific value</td>
                <td data-label="Notes" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e232 ">Where to find it: In Setup, find the object you want, and select Fields.
                  Use the <strong class="uicontrol">Field Name</strong> (also known as the API Name). For
                  custom fields, use the name with “__c” at the end.</td>
              </tr>
              <tr class="">
                <td data-label="Notation" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e228 ">selection</td>
                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e230 ">With the selection option, the dashboard is shown with all its data, and
                  the specified dimension values are highlighted</td>
                <td data-label="Notes" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e232 ">The selection option can be used alone or with the filter option.
                  Selection takes dimension values only. To use this option, the dashboard must
                  include a list, date, or toggle widget that groups by the specified dimension.
                  If a selection specifies a value that doesn't exist, or the dashboard doesn’t
                  include a list, date, or toggle widget that groups by the specified dimension,
                  then the selection input is ignored and the dashboard appears with all its
                  data and no selection.</td>
              </tr>
              <tr class="">
                <td data-label="Notation" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e228 ">filter</td>
                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e230 ">With the filter option, the dashboard is shown with only filtered
                  data</td>
                <td data-label="Notes" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e232 ">The filter option can be used alone or with the selection option. Filter
                  takes dimension or measure values.</td>
              </tr>
              <tr class="">
                <td data-label="Notation" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e228 ">operator</td>
                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d56404e230 ">Use with the filter option</td>
                <td data-label="Notes" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d56404e232 ">
                  <p>Supported operators for dimensions: in, not in, matches</p>
                  <p style="margin-bottom:0;">Supported
                    operators for measures: ==; !=; &gt;= ; &gt; ; &lt;= ; &lt;</p>
                </td>
              </tr>
            </tbody>
          </table>
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/images/icon_note.png)
    
    Note In Visualforce, values must have the format object.field.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/images/icon_note.png)
    
    Note To filter on a field that contains special characters, use Visualforce's JSENCODE function in the filter to replace special characters with encoded values.
    
    For example, this syntax applies the name of the account in the Visualforce page as a selection on the dashboard:
    
    ```markup
    filter="{'datasets': {'Account':[{'fields':['Name'], 'selection':['{!Account.Name}']}]}}"
    ```
    
    This example syntax applies the name of the account in the Visualforce page as a filter so that the dashboard shows only the filtered data:
    
    ```markup
    filter="{'datasets': {'Account': [{'fields':['Name'], 'filter':{'operator': 'matches', 'values':['{!Account.Name}']}}]}}"
    ```

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/images/icon_note.png)

Note The preceding syntax is new in Spring ‘17. The previous syntax continues to be supported, and it works the same as the new selection option. For reference, here’s the previous syntax:

```markup
filter="{ 'datasetSystemName1': {'field1': ['!value1']}, 'datasetSystemName2': {'field1': ['!value1', '!value2'],'field2': ['!value3']} }"
```

For example:

```markup
filter="{'opportunity': {'Id': ['{!Opportunity.Id}']}}"
```

and

```markup
filter="{'ServiceCase4': {'Id': ['{!case.Id}'], 'OwnerId' : ['{!case.OwnerId}'], 'Product__c' : ['{!case.Product__c}'], 'Reason' : ['{!case.Reason}']}}"
```

For more information about embedding Analytics, see the [Visualforce Developer Guide Standard Component Reference](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_wave_dashboard.htm/docs/atlas.en-us.pages.meta/pages/pages_compref.htm).