Embed Vizzes into your Salesforce Org with the Tableau Viz Lightning Web Component
Posted On
Do you have a Salesforce org? Do you have Tableau a viz you’d like to embed into it? Here’s a simple example of how the free Tableau Viz Lightning Web Component (LWC) can be used to quickly embed Tableau into your Salesforce org. Once you’ve got this basics down, you’ll be ready to add more bells and whistles, such as record filtering and SSO.
A few pre-reqs to follow along with this example:
- You need to be a Salesforce admin of a Dev Org. If you don’t have one, sign-up for free here: https://developer.salesforce.com/signup
- Make sure you’re on the Lightning Edition of Salesforce (if you’ve just signed up for a Dev Org, you’ll have this by default).
- Have a Tableau Public viz link handy (this is a simple example, no login requirements or SSO configuration included). I’m using my dashboard from this page, but you can use your own.
Step 1: Install the Tableau Viz Lightning Web Component from the AppExchange Marketplace
Login to your Salesforce org as an administrator and navigate to Setup (gear icon -> Setup).
In the search box on the left, enter “AppExchange”. Click on the “AppExchange Marketplace item.
In the new window, enter “Tableau Viz” in the search box. Click on the “Components” tab and you’ll see the option for the “Tableau Viz Lightning Web Component”.
Click on the icon and you’ll be shown the details for the Tableau Viz LWC. Click on “Get It Now”.
You’ll be prompted to login and allow access to your org and select where to install the LWC. Because this is a Dev Org, I selected “Install in This Org”.
On the next page, review and agree to the terms and install. On the next page, I’ve selected “Install for All Users” (keeping things simple). Click the blue “Install” button.
After a few moments, you’ll see a confirmation that the install was a success. You can close the AppExchange Marketplace window to go back into your Org’s Setup.
Step 2: Create a new Lightning Page to Embed your Viz into using Lightning App Builder
Back in Setup, search for “Lightning App” in the search box. Select “Lightning App Builder” under the User Interface menu item.
Click the “New” button. In the pop-up window, select “App Page” and click “Next”. On the next screen, give your page a label, such as “Tableau Viz Page”. Click “Next”.
On the layout options screen, select “One Region” from the standard options. Click “Finish”.
Next you’ll see the Lightning App Builder canvas. From the left-hand components menu, scroll down to the “Custom – Managed” section. If the Tableau Viz LWC was installed correctly, you’ll see it listed.
Drag-and-drop the “Tableau Visualization” component onto the main canvas, where it says “Add Component(s) Here”. By Default, the LWC will load a “LinkedIn Sales Navigator | Performance Overview” viz. We’ll replace this with the Tableau Public viz you’ve selected.
Navigate to the Tableau Public viz you want to embed from another browser tab. On the “Share” button, click to copy the viz link. Back in your Salesforce tab, paste the link into the box on the right side of the screen: “The URL for the Tableau view”.
As soon as you click away, you’ll see the center of the Canvas update to your Tableau Public viz. Change the Height box value to better fit your viz. When you’re ready, click “Save” in the upper right.
Step 3: Activate and Configure where your new Tab will appear
If you aren’t automatically prompted, click on the “Activation…” button near the top right. This is where we’ll do some final configurations on how the new Lightning Page appears as a new Tab in the Sales App. Click on the “Activate” button if you see the prompt below:
In the page settings tab, I’ve selected “All Users”.
Click on the “Lightning Experience” tab. For this example, we’ll add the new page to the “Sales Lightning App”. Click it from the left hand options and select “Add to App” on the right.
On the right, select where you’ll like the Tab option to live. I’ve selected just to the right of the “Home” tab. Click Save.
Step 4: Test it out
We’re done in Setup for now, so head back out of the Lightning Page Builder (upper left hand arrow). From the App launcher, select “Sales”, which is the App where we added our Lightning Page.
After being redirected in a new browser tab, you should see that the new “Tableau Viz Page” has been added to the tab menu running across the top. If you don’t see it, you may need to click the “pencil” icon on the far right and re-arrange your personalized order of tabs.
To confirm all is working as expected, click on the “Tableau Viz Page” tab and you’ll be taken to the embedded Tableau dashboard while still in the Salesforce Org framework.
And now you know the basics! You may need to adjust your viz’ height and width, and whether it is fixed or automatically resizes. If you have any other dashboard formatting and sizing tips, please share!
Want to try it out yourself? Here’s where to sign-up for a free Salesforce Dev Org, if you missed it at the top of the post: https://developer.salesforce.com/signup
Resources:
Salesforce Developer Org: https://developer.salesforce.com/signup
Dan Bradley
Dan Bradley is a Principal Solution Engineer for Tableau’s Higher Education Field Education Team. Based in Chicago, he works with higher education institutions in the Central and mid-Atlantic regions of the U.S. In addition to technology, Dan has a background in education administration, including an M.S. in Higher Education Administration and Policy. Dan's mission is to help the people of higher education become data-reflective practitioners who can see, understand, and act on their data. *Opinions are my own and not the views of my employer*
