This project provides a Lightning web component that you can customize, deploy, and use to embed a Tableau visualization into Salesforce. This component uses the Tableau JavaScript API for embedding Tableau views into web pages.
Learn more about the Tableau Viz Lightning web component by completing the Embed Tableau Visualizations in Salesforce Trailhead project.
This sample component is designed to run on the Salesforce Lightning Platform.
-
Install the Tableau Viz Lightning web component from the Salesforce AppExchange: This is the easiest way to install the Lightning web component for embedding Tableau views. Use this option if you want to get started using the component as quickly as possible, and you aren't a developer who is interested in the code. Use this option to install the component on Trailhead Playgrounds so you can use it when tackling Trailhead Badges.
-
Install the component using a Scratch Org: This is the recommended installation option if you are a developer. Use this option if you wants to explore and modify the component's code.
-
Install the component using a Developer Edition Org or a Sandbox: Consider this option if you want the component deployed to a more permanent development and demonstration environment than a scratch org.
-
Add the Tableau Visualization component to a Lightning page: After you have installed the component on your org, you can add a Tableau viz to a Lightning page in Salesforce.
-
Try Filtering: If you place the component on a record page you can try filtering a visualization based on the context of the hosting record page, or you can specify the fields in Tableau and Salesforce to use for filtering.
-
Sign up for the Tableau Developer Program: Join the Developer Program and the DataDev community. Learn how to customize, integrate and extend the Tableau platform to suit the needs of your organization.
-
Troubleshooting problems deploying the Lightning web component for Tableau: Solve issues related to deploying the Lightning Web Component for Tableau.
For a demonstration of the Tableau Lightning web component in action, see the Tableau Viz Lightning web component video.
The easiest way to install the Lightning web component for Tableau is from the AppExchange.
The Tableau Viz web component on AppExchange is a container for the Tableau Visualization component available in this GitHub repository. You can install the component in production environments, or in sandbox or Developer Edition organizations on Salesforce, or in test organizations furnished through the Environment Hub. You can learn more about the Tableau Viz Lightning web component, see Embed Tableau views in Salesforce.
After you install the package, you can Add the Tableau Visualization component to a Lightning page.
-
Set up your environment. Follow the steps in the Quick Start: Lightning Web Components Trailhead project. The steps include:
- Enable Dev Hub in your Trailhead Playground (Important)
- Install Salesforce CLI
- Install Visual Studio Code
- Install the Visual Studio Code Salesforce extensions, including the Lightning Web Components extension
Tip: You do not need to complete the last module and create the Hello World Lightning Web Component. We use the Trail here just to help you set up your environment.
Note: You will use the Salesforce CLI to perform the following steps. Be sure you enable Dev Hub in your Trailhead Playground before you begin. Login to your Playground. Go to Setup > Development > Dev Hub).
-
If you haven't already done so, open a Command or Terminal window and authorize your hub org and provide it with an alias (myhuborg in the following command):
sfdx force:auth:web:login -d -a myhuborg -
Clone the tableau-viz-lwc repository:
git clone https://github.com/tableau/tableau-viz-lwc -
Navigate to the directory of the repository you just cloned.
cd tableau-viz-lwc
-
Create a scratch org and provide it with an alias (tableau-viz-lwc in the command below):
sfdx force:org:create -s -f config/project-scratch-def.json -a tableau-viz-lwc
-
Push the component to your scratch org:
sfdx force:source:pushOr try force:source:legacy:push via the SFDX extension in VS Code if the above doesn't work.
-
Open the scratch org:
sfdx force:org:openThis opens Salesforce and takes you to the scratch org.
-
Now you can Add the Tableau Visualization component to an Lightning page.
Follow this set of instructions if you want to deploy the component to a more permanent development environment than a Scratch org. This includes non source-tracked orgs such as a free Developer Edition Org or sandboxes.
-
Authorize your org and provide it with an alias (mydevorg in the following command):
sfdx force:auth:web:login -s -a mydevorg -
Clone this repository:
git clone https://github.com/tableau/tableau-viz-lwc -
Navigate to the directory of the repository you just cloned.
cd tableau-viz-lwc -
If you are setting up a Developer Edition: go to Setup, under My Domain, register a My Domain.
-
Run this command in a terminal to deploy the component.
sfdx force:source:deploy -p force-appIf see an error message that asks you to specify a username or OAuth options, use the following command and replace
usernamewith the login name you use formydevorg.sfdx force:source:deploy -p force-app -u username -
If your org isn't already open, open it now:
sfdx force:org:open -u mydevorgThis opens Salesforce and takes you to your Developer Edition Org.
-
Now you can Add the Tableau Visualization component to a Lightning page.
After you have successfully deployed or pushed the tableau-viz-lwc component to your Salesforce org, you can use the component to add a Tableau viz to a Lightning page.
-
From the App Launcher (
), find and select Sales (or any other App that provides a page where you can embed the Tableau Lightning Web Component). -
Click the Setup gear (
) then select Edit Page. -
Drag the Tableau Visualization component from the Custom area of the Lightning Components list to the top of the Page Canvas.
-
Select a Tableau viz to display by providing the URL for the viz in the The URL for the Tableau view text box.
To find the URL for a viz on Tableau Server or Tableau Online, click Share on the toolbar and select Copy Link from the Share View dialog box. For Tableau Public, copy the URL for the viz from the address bar in your browser.
In Salesforce, use the options for the Tableau Visualization component to control the size of the viz and whether you want to show the Tableau toolbar or any tabs for the viz.
For this first release, we support SSO only with SAML. If you want to configure Tableau to use Salesforce IdP, follow the steps described in Configure SAML with Salesforce and Configure SAML for Tableau Viz Lightning Web Component for Tableau Online. For Tableau Server, see Configure SAML for Tableau Viz Lightning Web Component for Windows and Configure SAML for Tableau Viz Lightning Web Component for Linux.
The Tableau Lightning web component supports two ways of filtering the Tableau visualization. These methods of filtering only work on Lightning record pages. Filtering is not available for Home pages or App pages. For record pages, you can automatically filter the Tableau visualization based upon the page it is embedded in (context filtering), or you can specify fields in Tableau and in Salesforce to create more sophisticated filtering.
To have the visualization filtered based upon the page it is embedded in, the Tableau viz needs to have a field that corresponds to the record page ID. For example, if you want to embed a viz for sales on a user's page that shows just the sales for that user, the Tableau viz should include a field that holds the record IDs for users.
-
In your Salesforce org, select a record page where you want to embed the viz (for example, Users or Opportunities).
-
Edit the record page and configure the component by entering the URL of the Tableau viz that contains the data you want to display. The Tableau visualization must include that a field that holds the record IDs (for example, user or account IDs).
-
Select Filter the Tableau view based upon the current Salesforce record and save your changes to the page.
When the record ID of the page matches the corresponding value in a field in the Tableau viz, the component applies that filter. For example, component filters the viz to show just the sales data for the user on the user's page.
If you want more control over filtering the Tableau visualization on a records page, you can map a field in Tableau to a specific field in Salesforce.
The Tableau field needs to be on the viz that you are embedding. The Salesforce field must be a qualified field on the page where you are embedding the viz. When the values of these two fields match, the Tableau Lightning web component will automatically filter the Tableau viz.
To test out this filtering, you can add the Tableau Visualization component to a record page. For example, if you have a Tableau viz that contains data that is related to sales information, you can add that viz to your opportunity record pages.
-
In your Salesforce org, click the App Launcher (
), find and select Sales, then click the Accounts tab. Select an account, for example, Burlington Textiles from the All Accounts list. -
Click the Setup gear (
) then select Edit Page. -
Drag the Tableau Visualization component from the Custom area of the Lightning Components list to the top of the Page Canvas.
-
Configure the component.
-
Enter the URL of the Tableau viz that contains the sales data you want to display.
-
Provide the name of the the Tableau field to use for filtering. The Tableau field needs to be the name of a field in the viz that you are embedding. For example, the viz might contain a field for the
User ID. -
Provide the name of the the Salesforce field to use in filtering. You can select the qualified field names for the page from the drop-down list. For example, on the account record page, you could select
Owner ID.
When the values from these two fields match, the LWC will automatically filter the Tableau viz.
-
-
Save your changes to the page.
We want to hear from you!
Join the Developer Program and gain access to the latest news about the Tableau developer platform and tools.
-
To join the Developer Program, go to (https://www.tableau.com/developer) and use your Tableau login to sign up. After you join, you can sign up and get a Tableau Online developer site (https://www.tableau.com/developer/get-site). With this free developer site, you can try the single sign-on experience using Salesforce as your SAML IdP and configuring SAML on Tableau Online, or you can just use the site to embed a viz from Tableau Online.
-
Try out the Tableau Viz Lightning component and samples!
- Check out the Tableau Viz Lightning Web Component Samples
- Send us your feedback
- Check the current Issues and add any new ones you find
- Request new features (add them to Issues)
- Ask questions of the Development Team
Welcome to the #DataDev Community!
-
Tip: Be sure to run the
sfdxcommands from within the project folder. -
If you encounter the following error message when trying to create a scratch org:
ERROR running force:org:create: You do not have access to the [ScratchOrgInfo] objectIf you have not already done so, you might need to enable Dev Hub in your org. Login to your org and go to Setup > Development > Dev Hub). Or search for "Dev Hub" in the Quick Find text box.
-
If you encounter the following message when trying to deploy the component:
ERROR running force:source:deploy: Must pass a username and/or OAuth options when creating an AuthInfo instance.Use the
-u usernameoption. To determine theusernamefor your Salesforce org, you can use the commandsfdx force:org:listto display information about the orgs you have created or are connected to.
For more information about fixing problems with deployment, see Troubleshoot Salesforce DX in the Salesforce DX Developer Guide.
February 9, 2023
Updated the component to use the latest version of the Tableau JavaScript API.
Fixed in this release
- [Fixed] Error "[Cannot read properties of null (reading 'width')]" When Viewing Viz Embedded in Salesforce Using Lightning Web Component. There was a conflict with the Embedding JavaScript API used in the app that required an update.
October 17, 2020
Using the Tableau Viz Lightning web component on Lighting communities
Salesforce Spring '21 is removing the Allow Inline Scripts and Script Access to Any Third-party Host Content Security Policy (CSP) setting for Lightning communities. For Winter `21, Salesforce recommends switching your community to a more secure option now.
To support the increased level of security, version 1.2 of the Tableau Viz Lightning web component adds Tableau Public and Tableau Online as trusted web sites in the managed package. If you are using the Tableau Viz Lighting web component on Lighting community pages and want to embed Tableau views from Tableau Public and Tableau Online, the version 1.2 package handles the CSP change for you. However, if you want to add views from Tableau Server, you need to add the Tableau Server URL as a CSP Trusted Site. For information about how to add Tableau Server as a trusted site, see the Salesforce Help documentation, Create CSP Trusted Sites to Access Third-Party APIs.
Fixed in this release
- [Fixed] When you opened a Salesforce page for editing that contains a Tableau view from Tableau Online on the page, the tabs and the toolbar are shown even if the Show Toolbar and Show Tabs options were not selected.
September 21, 2020
- Initial public release of the Tableau Viz Lighting web component.