Learn more about Salesforce Visualforce.

Find the Tableau Content You Want to Embed

Go to the Tableau Server/Online site that your Zuar Portal is configured to use.

Navigate to the content you want to embed into Salesforce.

Click the Share button.

Click Copy link.

We will use this Tableau dashboard URL later on on.

Create a Salesforce Visualforce page

Search for "visualforce pages".

Click New.

Fill out the form.

  • Label
  • Name
  • Description
  • Check Available for Lightning Experience, Lightning Communities, and the mobile app

Visualforce Markup - There are many configuration options for Visualforce markup, so we will only be going through a couple specific examples as they relate to embedding Tableau. Learn more about Visualforce from Salesforce's documentation.

Simple APEX Tableau Embed

Here's an example for embedding a single Tableau dashboard:

<apex:page standardController="Account">
<apex:canvasApp applicationName="tableau_zuar_rapid_portal"
    maxHeight="infinite"
    width="100%"
    parameters="
    {
        'location': '/t/Demo/views/OpportunitiesoverTime/OpportunitiesOverTime?:embed=y'
    }" />
</apex:page>

This Visualforce page is going to be added to an account page, so the standardController is Account.

The applicationName is the API name of the Connected App.

In the parameters, you add the Tableau dashboard URL with some slight modifications.

Here's an example of a URL from the Tableau copy link:

https://tableau.zuar.com/t/Demo/views/OpportunitiesoverTime/OpportunitiesOverTime?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no&:origin=viz_share_link

And here's the URL to copy into Salesforce: /t/Demo/views/OpportunitiesoverTime/OpportunitiesOverTime?:embed=y

  1. The URL used in Salesforce starts after the Tableau Server URL. In the above example, https://tableau.zuar.com is removed.
  2. Only one URL parameter is needed :embed=y. This ensures the Tableau dashboard is embedded.

Embed Tableau with Filtering

Here's an example for embedding a single Tableau dashboard filtered to a specific Salesforce account depending on the Salesforce account page the user is currently on:

<apex:page standardController="Account">
<apex:canvasApp applicationName="tableau_zuar_rapid_portal"
    maxHeight="infinite"
    width="100%"
    parameters="
    {
        'location': '/t/Demo/views/OpportunitiesoverTime/OpportunitiesOverTime?Account={!Account.id}&:embed=y'
    }" />
</apex:page>

The one small tweak here is we are passing a filter in the Tableau URL to filter the dashboard to a specific Salesforce account. Account is the field name in Tableau and {!Account.id} is the Salesforce account id of the page the user is on.

The result is that if a user is on the account page for "Zuar, Inc.", the Tableau dashboard will be filtered to only data for "Zuar, Inc.".

See Tableau's documentation on "How View URLS Are Structured" for more information.

Preview

Click Preview to see a preview of the embedded Tableau dashboard.

Add Visualforce Page to a Salesforce Page Layout

Read documentation on Page Layouts from Salesforce.

Test the embedded Tableau dashboard

Navigate to the page you added the Visualforcepage to and make sure you see the embedded Tableau dashboard.