Today, the Tableau team releases the Tableau Visualization Lightning Web Component. This component lets you integrate any Tableau visualizations into Lightning pages and Communities thanks to the Tableau JavaScript API. You can install it as a managed package from the AppExchange (preferred option as you’ll get updates) or deploy it from the Open Source project on GitHub.
You might be familiar with the component if you’ve used Work.com — Salesforce’s offering of advisory services and technology solutions to help companies and communities reopen safely and manage the logistics of returning to work while putting employee and visitor health and safety first in the COVID-19 environment. Work.com uses the Tableau Viz component to display a COVID-19 tracker dashboard.
In this post, we’ll explore the component’s source code and share some brief technical highlights. We’ll look at how the same component can be used in four different ways and how it provides a user-friendly experience with a dynamic picklist in the App Builder.
Four ways to use the Tableau Viz component
The Tableau Viz component is designed to be used in four different ways.
On Lightning home and app pages
You can use it on a Lightning home or app page with the Lightning App Builder. This option is the simplest and requires minimal configuration (Just a Viz URL and a height).
On Lightning record pages
You can also deploy the component on a Lightning record page with the Lightning App Builder. This brings extra flexibility compared to home and app pages as it lets you filter the Viz on the current record ID and on specific record field values. For example: if you place the component on a contact record, you can filter the Viz on the contact’s account ID.
The component metadata specifies different target configurations with targetConfig tags. We use the <targetConfig targets="lightning__RecordPage"> tag to expose additional properties on record pages.
On Community pages
You can deploy the component in a Community using the Community Builder. This offers the same options as Lightning home and app pages.
As a sub-component
Finally, if you install the component from the GitHub repository, you can embed the Tableau Viz component directly in a parent component’s markup:
<template>
<c-tableau-viz viz-url={myCustomVizUrl}></c-tableau-viz>
</template>This lets you programmatically control the Viz attributes, like viz-url in the example above. This is useful if you need to generate a dynamic Viz URL with special filter values.
Note that you won’t be able to embed the component if you install it from the managed package because of LWC cross-namespace access restrictions.
Dynamic picklist in Lightning App Builder
When placed on a record page, the component uses a dynamic picklist in the Lightning App Builder property editor to select a value for the record field property instead of a standard text field. This provides a user-friendly interface with autocompletion, which also eliminates the risk of invalid inputs.
The picklist is enabled thanks to a datasource="apex://ObjectFieldPickList" attribute in the component’s metadata:
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
...
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
...
<property
name="sfAdvancedFilter"
type="String"
datasource="apex://ObjectFieldPickList"
label="Add additional filter, select a Salesforce object field"
/>
...
</targetConfig>
...
</targetConfigs>
</LightningComponentBundle>This loads data from the ObjectFieldPickList Apex class. The class extends the VisualEditor.DynamicPickList class with a method that returns picklist values to the Lightning App Builder property editor:
global override VisualEditor.DynamicPickListRows getValues()We calculate those values (the list of object fields) by calling Schema.describeSObjects with the object associated to the record page on which the component is placed.
Closing words
That’s it for this short tour of the Tableau Visualization Lightning Web Component. Make sure to try it out and bring your Tableau visualizations to the Lightning Experience and share in Communities. As a reminder, you can get the component from the AppExchange or from the GitHub repository.
Join the Tableau Developer Program to learn more about how you can embed Tableau everywhere — plus the other great integration you can build with the Tableau Developer Platform. The program gives you the tools and resources you need to innovate with APIs and Tableau Developer Tools.
You can also take the Tableau Basics module on Trailhead to learn more about Tableau.
About the author
Philippe Ozil is a Principal Developer Evangelist at Salesforce where he focuses on the Salesforce Platform. He helped the Tableau team create the Tableau Visualization Lightning web component. He writes technical content and speaks frequently at conferences. He is a full stack developer and enjoys working on robotics and VR projects. Follow him on Twitter @PhilippeOzil or check his GitHub projects @pozil.
