The Zuar Rapid Portal works with both Salesforce Lightning Experience and Salesforce Classic, however we will be detailing instructions for Salesforce Lightning in this blog post.

Prerequisites

Zuar Rapid Portal

The Zuar Rapid Portal serves as the glue between Salesforce and Tableau. It enables a secure, single sign on experience for end users in Salesforce.

If you do not have a Zuar Rapid Portal, please let us know and we will spin up a trial for you or help you make a purchase.

Salesforce

Access to a Salesforce admin account.

Tableau Server / Tableau Online

  1. Tableau Server / Tableau Online account. If you do not have a Tableau Server / Tableau Online account, please let us know and we will spin up a trial for you or help you make a purchase.
  2. Tableau dashboard content published that you want to use for embedded analytics. For testing, you can use any dashboard published to Tableau Server / Tableau Online.

Overview of steps

  1. Zuar Rapid Portal - Save the URL of your Rapid Portal
  2. Tableau - Find the content you want to embed
  3. Salesforce - Create Connected App
  4. Salesforce - Save the Connected App's Consumer Secret
  5. Salesforce - Create Visualforce page
  6. Salesforce - Add Visualforce page to a layout
  7. Salesforce - Test the embed

Step 1: Zuar Rapid Portal - Save the URL of your Rapid Portal

Go to the Rapid Portal login page. Copy the URL. You will be using this URL in the Salesforce steps.

In the example above, the URL of the Rapid Portal is https://rapid-portal.zuar.com.

When logged into the Rapid Portal, you can see the Tableau Server URL and site by going to /about.

In this example, the Tableau Server URL is https://tableau.zuar.com and the site is Demo.

Step 2: Tableau - Find the content you want to embed

Go to the Tableau Server/Online site that the Rapid Portal is configured to use (see above step).

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 the Salesforce Visualforce Page step.

Step 3: Salesforce - Create Connected App

This step is a one time setup on the Salesforce side.

In the Salesforce UI, click Setup.

Search for "app manager" and click App Manager.

Click "New Connected App".

Fill out the "New Connected App" form. Not all values are required.

Basic Information

  • Connected App Name: (e.g. "Tableau - Zuar Rapid Portal")
  • API Name: (requires all lowercase and underscores) (e.g. "tableau_zuar_rapid_portal")
  • Contact Email: your Salesforce admin's address

API (Enable OAuth Settings)

  • Check Enable OAuth Settings
  • Callback URL: https://{rapid_portal_url}/keepAlive (This is the Zuar Rapid Portal URL from Step 1. e.g. https://rapid-portal.zuar.com/keepAlive)
  • Selected OAuth Scopes - Select "Access your basic information (id, profile, email, address, phone)" and click Add
  • Check Require Secret for Web Server Flow

Canvas App Settings

  • Check Canvas
  • Canvas App URL: https://{rapid_portal_url}/signed (This is the Zuar Rapid Portal URL from Step 1. e.g. https://rapid-portal.zuar.com/signed)
  • Access Method: Signed Request (POST)
  • Locations: Select "Visualforce Page" and click Add

Click Save.

Back on the "Manage Connected Apps" page, click Manage.

Click "Edit Policies".

OAuth Policies

  • Permitted Users - set to "Admin approved users are pre-authorized"

Click Save.

There is a new section named Profiles. Click Manage Profiles.

Check the box next to System Administrator and then click Save.

Step 4: Salesforce - Save the Connected App's Consumer Secret

This step is a one time setup on the Salesforce side.

Go back to the App Manager (search "app manager").

Find the newly created Connect App and click View.

In the API (Enable OAuth Settings) section, next to Consumer Secret, click "Click to Reveal".

Save the Connected App's Consumer Secret. This will be needed for configuration on the Zuar Rapid Portal.

Step 5: Salesforce - Create 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 embed example

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 with filtering example

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.

Step 6: Salesforce - Add Visualforce page to a Page Layout

Read documentation on Page Layouts from Salesforce.

Step 7: Salesforce - Test the embed

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

Conclusion

If you have questions or would like help embedding Tableau into Salesforce or would like to see a Zuar Rapid Portal in action for other embedded analytics use cases, please contact us.