Add the Component to a Record Page and Apply an Advanced Filter

The Tableau Lightning web component supports two ways of filtering—based on fields and records. And these only work on Lightning record pages. Taking it a step further, you can automatically filter the Tableau visualization based on the record it’s embedded in (in-context filtering), or you can specify the fields to use for filtering to create more sophisticated views.

Filtering is not available for home pages or App pages. 

About In-Context Filtering

To have the view filtered based on the record, the Tableau view needs to have a field that corresponds to the record page ID. This means that you need to build a Tableau view that uses the data coming from the Salesforce org you’re using. 

Here’s an example. Let’s say you’ve added a Tableau view to a user record page, and Salesforce and Tableau share some data, including the same user record ids. By default, the view is unfiltered, so it shows all sales activity.

Tableau view without filters

In page setup, just check the Filter the Tableau view based on the current Salesforce record box. 

Tableau view with in-context filter applied

Now only the data associated with the user is displayed. No coding or special customization is required.  

For more information about the Tableau Viz Lightning web component and to see in-context filtering in action, check out the Tableau Viz Lightning web component video

Apply Advanced Filtering to an Account Page

Advanced filtering is available when you want more control over your embedded view. To make this work, you map a field on the Tableau view to a corresponding field on the Salesforce record. When the fields match, the Tableau Viz Lightning web component automatically filters the Tableau view.

As you recall in the first step of this project, you imported data. This is the account data that you use to apply advanced filters. In a real-world scenario, your Salesforce data would be connected with Tableau using the native Tableau data connector.

To get started, you add the Tableau Viz Lightning web component to the page and change the URL to the Tableau view we used earlier.

Edit the Account Page

If you’re not there already, open your Trailhead Playground.

  1. Click App Launcher, then find and select Sales.
  2. Click the Accounts tab.
  3. Select All Accounts in the account list view.
  4. Click on the Tableau account.
  5. Then, click Setup Gear Icon. and select Edit Page.
  6. Drag the Tableau Visualization component to just under the Highlights Panel.

Tableau Viz LWC under the Highlights Panel highlighted by a red box and arrow

Change the Tableau View URL

Now we need to change the URL from the default Tableau view to the Tableau view that shares the data we imported to the Trailhead Playground. This is the same view that you used in the earlier step when you first embedded the view on a home page. You already know where to find the link from the Tableau view, so we skip that step and provide it for you.

  1. In The URL for the Tableau view text box, replace the default URL with the following:
    https://public.tableau.com/views/MarketingActivityCalendar/MarketingActivityCalendar?:language=en&:display_count=y&:origin=viz_share_link

  2. Click away and take a look at the Tableau view. Notice how it shows all the names for the marketing campaign events. That’s great, but wouldn’t it be better if the Tableau view just showed the data for the account page we are on? Time to apply an advanced filter by specifying fields in Tableau and Salesforce.

    Tableau view in page setup

Apply a Filter to the View Using Fields

Let’s filter the view based on the account by specifying the billing city. In the Tableau view there is a field called City that corresponds to the Billing City field in Salesforce.  

  1. Set the Tableau field. In the Add additional filter, define the Tableau field name text box, enter City.
  2. Set the Salesforce object field. Click in the Add additional filter, select the Salesforce object field box, and from the dropdown list select Billing City.

    Tableau view filtered by billing city

  3. When the values from these two fields match, the Tableau Visualization component automatically filters the view.
    Save and activate this page so you can see your work in action.
  4. Click Save.
  5. Click Activate.
  6. Click Assign as Org Default. When prompted to assign the form factor, select Desktop and phone and then click Next.
  7. Finally, click Save then back out of Edit Page.

What’s Next?

Nicely done! Now you’ve seen how easy it is to embed Tableau views into Salesforce orgs. You’ve learned that you can download the Tableau Viz Lightning web component from AppExchange, and then drag and drop the component on home or record pages. You know how to change the URL to select different views from Tableau Public, Tableau Server, or Tableau Online, and how to customize and take advantage of the built-in support for filtering the Tableau view. 

To learn more about using the Tableau Viz Lightning web component and how to set up single sign-on so secure views can be easily viewed by your users, check out the resources.

Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities