Skip to content
/ tableau-viz-lwc Public
forked from tableau/tableau-viz-lwc

Lightning Web Component for embedding Tableau into Salesforce

License

MIT license
0 stars 48 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

HPSSFDC/tableau-viz-lwc

BranchesTags
 
 

Repository files navigation

Lightning Web Component for embedding Tableau into Salesforce - Developer Preview

GitHub Workflow GitHub version

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.

This sample component is designed to run on the Salesforce Platform.

Table of contents

Install the beta managed package

The managed package is the easiest way to install the Lightning Web Component for Tableau. The managed package is only available when you join the beta program. If you haven't already done so, go Sign up for the Tableau LWC Beta on the Tableau Developer Program Portal.

The package (Tableau Viz LWC) is a container for the Tableau Visualization component available in this GitHub repository. You can install the beta package in sandbox or Developer Edition organizations on Salesforce, or in test organizations furnished through the Environment Hub. You can learn more about Beta Versions of Managed Package on the Salesforce website.

After you install the package, you can Add the Tableau Visualization component to a Lightning page.

Note: The Tableau Viz LWC package is a beta package and can't be used in production environments until it is officially released.

Install the component using a Scratch Org

  1. 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).

  2. If you haven't already done so, open a Command 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

  3. Clone the tableau-viz-lwc repository:

    git clone https://github.com/tableau/tableau-viz-lwc

  4. Navigate to the directory of the repository you just cloned.

    cd tableau-viz-lwc

  1. 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

  1. Push the component to your scratch org:

    sfdx force:source:push

  2. Open the scratch org:

    sfdx force:org:open

    This opens Salesforce and takes you to the scratch org.

  3. Now you can Add the Tableau Visualization component to an Lightning page.

Install the component using a Developer Edition Org or a Sandbox

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.

  1. Authorize your org and provide it with an alias (mydevorg in the following command):

    sfdx force:auth:web:login -s -a mydevorg

  2. Clone this repository:

    git clone https://github.com/tableau/tableau-viz-lwc

  3. Navigate to the directory of the repository you just cloned.

    cd tableau-viz-lwc

  4. If you are setting up a Developer Edition: go to Setup, under My Domain, register a My Domain.

  5. Run this command in a terminal to deploy the component.

    sfdx force:source:deploy -p force-app

    If see an error message that asks you to specify a username or OAuth options, use the following command and replace username with the login name you use for mydevorg.

    sfdx force:source:deploy -p force-app -u username

  6. If your org isn't already open, open it now:

    sfdx force:org:open -u mydevorg

    This opens Salesforce and takes you to your Developer Edition Org.

  7. Now you can Add the Tableau Visualization component to a Lightning page.

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.

  1. From the App Launcher (App Launcher), find and select Sales (or any other App that provides a page where you can embed the Tableau Lightning Web Component).

  2. Click the Setup gear (Setup gear) then select Edit Page.

  3. Drag the Tableau Visualization component from the Custom area of the Lightning Components list to the top of the Page Canvas.

  4. Select a Tableau viz to display by providing the URL for the viz in the Enter the Viz URL 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.

Tableau Visualization LWC

Try filtering

The beta release of the Tableau LWC 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.

Context 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.

  1. In your Salesforce org, select a record page where you want to embed the viz (for example, Users or Opportunities).

  2. 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).

  3. Select Filter visualization based on the page 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 LWC applies that filter. For example, LWC filters the viz to show just the sales data for the user on the user's page.

Advanced filtering

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 LWC 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.

  1. In your Salesforce org, click the App Launcher (App Launcher), find and select Sales, then click the Accounts tab. Select an account, for example, Burlington Textiles from the All Accounts list.

  2. Click the Setup gear (Setup gear) then select Edit Page.

  3. Drag the Tableau Visualization component from the Custom area of the Lightning Components list to the top of the Page Canvas.

  4. 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.

    Tableau Visualization LWC Filter Settings

  5. Save your changes to the page.

Sign up for the Tableau LWC Beta on the Tableau Developer Program Portal

We want to hear from you!

Flex DataDev Warrior

Join the Developer Program and gain access to the Tableau Viz Lightning Web Component Beta on the Developer Program Portal.

  1. 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.

  2. After you sign up for the Developer Program, we'll contact you with information about joining the Tableau LWC Beta on the Tableau Pre-Release site (https://prerelease.tableau.com/).

    If you don't already have access to Developer Program Portal, send email to tableaulwcprerelease@tableau.com with Tableau LWC Pre-Release on the subject line.

  3. Try out the Tableau Viz Lightning component!

    • 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!

Troubleshooting problems deploying the LWC for Tableau

  • Tip: Be sure to run the sfdx commands 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] object

    If 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 username option. To determine the username for your Salesforce org, you can use the command sfdx force:org:list to 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.

About

Lightning Web Component for embedding Tableau into Salesforce

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • HTML 47.7%
  • JavaScript 45.5%
  • Apex 6.8%