Embed Tableau Dashboard into Salesforce

What does this post cover?

- How to embed a dynamic Tableau dashboard into Salesforce using a Visualforce page

Use Case? - Your data team uses Tableau for your org's reporting but they want to share their dashboard in Salesforce where the sales team lives

🗺Legend: Terms to know

OBJECT NAME: Salesforce Object Name

DIMENSION: When you connect to a new data source, Tableau assigns each field in the data source to either the Dimensions area or the Measures area of the Data pane, depending on the type of data the field contains

OBJECT API NAME: Salesforce Object API Name

TABLEAU URL: URL from Tableau dashboard you want to embed into Salesforce. Copy the link up to the first ❓ (do not include the ❓in your copied text)

#1 Find / Create Dashboard in Tableau

*Need more details? https://help.tableau.com/current/pro/desktop/en-us/dashboards_create.htm

#2 Verify the Dashboard is Published in Tableau

a. Open the workbook you want to publish b. Select Server > Publish Workbook *Need More details? https://help.tableau.com/current/pro/desktop/en-us/publish_workbooks_howto.htm

#3 Create New Visualforce Page in Salesforce

a .Setup > Visualforce Pages > New *Need more details?https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals/visualforce_creating_pages

#4 Copy & Paste the Code Below

<apex:page standardController="[OBJECT NAME]" showheader="false" sidebar="false">
 
  <apex:iframe src="[TABLEAU URL]?:embed=y&:showShareOptions=false&:toolbar=false&:display_count=no&:showVizHome=no&[DIMENSION]={! [OBJECT API NAME].fieldname }" height="200px" width="100%" scrolling="true">
 
  </apex:iframe>
 
</apex:page>

*iframe Appearance Detail Reference

- showheader=”false”. Do not show header from Tableau. - sidebar=”false". Do not show sidebar from Tableau. - showShareOptions=false. Do not show share options from Tableau. - toolbar=false. Do not show toolbar from Tableau. - display_count=no. Do not show display count from Tableau. - showVizHome=no=. Do not show home links from Tableau.

- height=”200px”. Height of embedded dashboard on Salesforce page. - width=”100%”. Width of embedded dashboard on Salesforce page. - scrolling=”true". Allow users to scroll on dashboard on Salesforce page.

#5 Add Visualforce Page to Salesforce Page Layout

*In this example we will imagine that we are embedding an Account dashboard a. Go to account record page > click gear icon > edit page b. Click the Tabs component - Add Tab button - Enter Tab Label - Enter “[Your Text Here]” for the Custom Tab Label c. Click tab you just labeled - Drag Visualforce component onto page - In the right pane, select the Visualforce page you just created - Leave height blank to use the default height set in the Visualforce page you created - Save the Account Record Page d. View an account record to see the filtered dashboard.

🛠Troubleshooting In my example I wanted a Tableau dashboard showing ALL Salesforce accounts to filter and display the specific account information that I was actively looking at within Salesforce. If you dashboard is not filtering dynamically, refer back to your filtered fields on your Tableau dashboard within Tableau. I renamed my filter field on the Tableau dashboard from "Salesforce Account Id" ➡️"Id (Account)" and published the dashboard again. After doing this my APEX code worked and all my accounts were filtered dynamically per the active account I was looking at.