Tableau is a fantastic tool. So fantastic that Salesforce bought it in 2019 and integrated it into their ecosystem. If you have ever tried to embed Tableau dashboards directly into Salesforce, you probably used the Tableau Viz LWC. This is a great component, but it lacks some flexibility. That’s why we extended it and provided greater flexibility for developers!

Tableau Viz LWC limitations

The Tableau Viz LWC allows for users to drag it on a page and easily embed a dashboard directly into Salesforce. If you embed a dashboard on a Salesforce record page, you can even filter the Tableau dashboard based on Salesforce field’s value. This is great, but that’s about all the Tableau Viz LWC offers. What if we want to get really creative with code? What if we are using a Tableau dashboard on an application page and not a record page? What if we want a Salesforce oriented experience? Tableau Viz LWC starts to fall flat.

Tableau Viz Extension

We have created the Tableau Viz Extension that extends the Tableau Viz LWC with the ability to dynamically set Tableau parameters through Salesforce application events. This greatly increases flexibility between Salesforce and Tableau, allowing us to use it in many applications.

Install Steps

To install, follow these steps -

1. Install the original Tableau Viz LWC in your org.
2. Deploy the Message Channel.
3. Deploy the LWC.

How To Use

To use, drag the Tableau Viz Extension component onto a page just like you would with the original Tableau Viz component.

From there, we can send the dashboard parameters in the url through Salesforce application events! For example, the code snippet below would send the value of an input field in the parameter animal to the Tableau dashboard when the onclick method is called.

import { LightningElement, wire } from 'lwc';
import { MessageContext, publish } from 'lightning/messageService';
import TABLEAU_VIZ_EXTENSION_MC from '@salesforce/messageChannel/TableauVizExtensionMessageChannel__c';

export default class DemoComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;

    onclick() {
        this.publishMessage({
            'animal': this.refs.animal.value
        });
    }

    publishMessage(parameters) {
        publish(
            this.messageContext,
            TABLEAU_VIZ_EXTENSION_MC,
            {
                parameters: parameters
            }
        );
    }
}

Here is what that looks like from an end user perspective -

The Tableau Viz Extension will take all key value pairs in the parameters object and pass them through the Tableau dashboard url as parameters so you can pass more than one parameter!

Conclusion

If you ever need complex logic between Salesforce and Tableau and the Tableau Viz LWC is too limiting, give the Tableau Viz Extension a try!