How to Integrate Retool with Tableau

Before configuring Retool, you need a Tableau personal access token (PAT) for API authentication. Sign in to your Tableau Server or Tableau Cloud instance and click your user avatar in the top-right corner. Select 'My Account Settings' from the dropdown. On the account settings page, scroll down to the 'Personal Access Tokens' section. Click 'Create new token'. Enter a descriptive name like 'Retool API Integration' and click 'Create token'. Tableau will display the token name and token secret exactly once — copy both values immediately and store them securely. The token name is a human-readable identifier, and the token secret is the actual credential you will use for authentication. PATs in Tableau expire after 15 days of inactivity by default (configurable by Tableau Server administrators to up to 1 year). If you are working with Tableau Cloud, the PAT expiration policy may differ — check with your Tableau administrator. Unlike a basic API key that is passed directly in headers, Tableau's PAT must first be exchanged for a session token via a sign-in API call — a two-step authentication process that Retool handles through queries, as you will configure in subsequent steps. Store the PAT name and secret in Retool's configuration variables for security.

In Retool, navigate to the Resources tab from the left sidebar of your organization homepage. Click '+ Create new', scroll through the connector list, and select 'REST API'. On the configuration screen, set the Name to 'Tableau API'. For the Base URL, use your Tableau Server or Tableau Cloud URL — for example, https://tableau.yourcompany.com for Tableau Server, or https://us-west-2b.online.tableau.com for Tableau Cloud. Add a header with key Content-Type and value application/json. For authentication, select 'No authentication' — leave this blank because Tableau's authentication is session-based and handled through a sign-in query rather than a static header. The Tableau REST API version should be specified in each query path: the current stable version is api/3.19. Add a custom header Accept with value application/json to tell Tableau to respond in JSON format rather than its default XML. Click 'Test connection' — it may return a 404 or similar since there is no authentication yet, but the important thing is that Retool can reach the base URL without network errors. Click 'Save resource'. You will handle authentication via a sign-in query in the next step rather than in the resource configuration itself.

Tableau's REST API uses a session-based authentication model: you first call a sign-in endpoint with your PAT credentials, receive a session token, and then include that session token in all subsequent API requests as a header called X-Tableau-Auth. This requires a two-step setup in Retool. First, create a query named tableauSignIn. Select your Tableau API resource, set the Method to POST, and set the URL path to /api/3.19/auth/signin. In the Body section, select JSON and enter the sign-in request body that includes the PAT name and secret as credentials. Reference your Tableau site name — use an empty string if you are on the default site. Run this query to test. A successful response returns a JSON object with credentials.token (the session token, valid for 4 hours) and credentials.site.id (the site ID needed for content queries). Create a Retool state variable named tableauToken by dragging a Variable component from the component panel or clicking the State section in the left panel and adding a variable. Set its value using the tableauSignIn query's Success event handler: Event: Success → Action: Set variable → Variable: tableauToken → Value: {{ tableauSignIn.data.credentials.token }}. This stores the session token for use in all subsequent queries. For production use, create a second query called tableauSignOut that calls DELETE /api/3.19/auth/signout with the X-Tableau-Auth header, and trigger it when the app closes to clean up sessions.

1{
2  "credentials": {
3    "personalAccessTokenName": "{{ retoolContext.configVars.TABLEAU_PAT_NAME }}",
4    "personalAccessTokenSecret": "{{ retoolContext.configVars.TABLEAU_PAT_SECRET }}",
5    "site": {
6      "contentUrl": "{{ retoolContext.configVars.TABLEAU_SITE_NAME }}"
7    }
8  }
9}

With a session token stored in the tableauToken variable, you can now build authenticated queries to Tableau's content endpoints. Create a new query named getWorkbooks. Select your Tableau API resource, set the Method to GET, and set the URL path to /api/3.19/sites/{{ tableauSignIn.data.credentials.site.id }}/workbooks. Add a header to this specific query: click the Headers section and add X-Tableau-Auth with value {{ tableauToken.value }}. Add URL parameters for pagination: pageSize set to 100 and pageNumber set to 1. Run the query — it returns a workbooks object with a workbook array where each workbook has fields including id, name, description, contentUrl, size, createdAt, updatedAt, and an owner object. Create a JavaScript transformer on this query (Advanced → Transform results) to flatten the response and extract the fields you want for a Table: id, name, project name, owner display name, last updated timestamp, and size in MB. Bind the transformed output to a Table component. Create a second query named getViews with path /api/3.19/sites/{{ tableauSignIn.data.credentials.site.id }}/workbooks/{{ tableauTable.selectedRow.id }}/views — this runs when a workbook row is selected and retrieves all views (individual charts and dashboards) within that workbook. Trigger getViews automatically using a Row Click event handler on the workbooks Table.

1// Transformer: flatten Tableau workbooks list
2const workbooks = data.workbooks?.workbook || [];
3return workbooks.map(wb => ({
4  id: wb.id,
5  name: wb.name,
6  project: wb.project?.name || 'Default',
7  owner: wb.owner?.name || 'Unknown',
8  content_url: wb.contentUrl,
9  size_mb: wb.size ? (wb.size / 1024).toFixed(1) : 'N/A',
10  last_updated: new Date(wb.updatedAt).toLocaleString(),
11  views_count: wb.viewCount || 0
12}));

To render a live Tableau visualization inside Retool, use a Custom Component with Tableau's JavaScript Embed API. This allows the full interactive Tableau experience — filters, drill-downs, marks selection — to appear inside your Retool app alongside other components. In the Retool component panel, drag a Custom Component onto the canvas and resize it to occupy the area where you want the Tableau dashboard to appear. Click 'Edit source' to open the Custom Component editor. In the source editor, write an HTML document that loads the Tableau Embedding API v3 from Tableau's CDN and renders a tableau-viz web component pointing to the specific view URL. The view URL is constructed from your Tableau server URL and the content URL of the selected view. In Retool's Custom Component model, you can pass the selected view URL as a model property that the component reads using Retool.subscribe(). When a user selects a different workbook or view in the Retool Table above, update the Custom Component's model to change the embedded view dynamically. Set the Custom Component's model property viewUrl to {{ tableauViews.selectedRow.content_url }} to make the embedded view change based on Table selection. This creates a fully interactive Tableau analytics experience integrated directly into your Retool operational app, with Retool components for data management running alongside live Tableau visualizations.

1<!DOCTYPE html>
2<html>
3<head>
4  <style>
5    body { margin: 0; overflow: hidden; }
6    tableau-viz { width: 100%; height: 100vh; }
7  </style>
8  <script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>
9</head>
10<body>
11  <div id="vizContainer">
12    <tableau-viz
13      id="tableauViz"
14      hide-tabs
15      toolbar="hidden">
16    </tableau-viz>
17  </div>
18  <script src="https://cdn.tryretool.com/js/custom-component.js"></script>
19  <script>
20    Retool.subscribe(function(model) {
21      const viz = document.getElementById('tableauViz');
22      if (model.viewUrl && viz) {
23        viz.setAttribute('src', model.viewUrl);
24        viz.setAttribute('token', model.sessionToken || '');
25      }
26    });
27  </script>
28</body>
29</html>