Tableau

Before building anything in FlutterFlow, you need a published Tableau view and a properly formatted embed URL. If you're using Tableau Public, go to the view on public.tableau.com, click the 'Share' button at the bottom of the viz, and copy the link URL — it will look like `https://public.tableau.com/views/YourWorkbookName/YourViewName`. For Tableau Cloud, open the published view in your browser. The URL in the address bar is the view URL — it will look like `https://us-east-1.online.tableau.com/t/your-site/views/WorkbookName/ViewName`. Copy this base URL. Now append the embedding parameters to strip Tableau's chrome. Add `?:embed=y&:showVizHome=no&:toolbar=no` to the URL. The `embed=y` parameter tells Tableau to render in embedding mode (hides the top navigation bar). `showVizHome=no` prevents Tableau from redirecting to the home page. `toolbar=no` hides the Tableau toolbar at the bottom of the view. Your final embed URL should look like: `https://public.tableau.com/views/WorkbookName/ViewName?:embed=y&:showVizHome=no&:toolbar=no` Test this URL in your desktop browser before building the Custom Widget — open a private/incognito window (to simulate a user without a Tableau session) and paste the URL. If you see the Tableau view without a navigation bar or toolbar, the URL is correct. If you see a login page, the view's sharing settings need to be changed to 'Anyone with the link' (for Tableau Cloud) or the URL is missing the embed parameters. For Tableau Public views (which are always public), this incognito test will always work with no authentication needed. For Tableau Cloud private views, the login wall you see in the incognito test is exactly what your app users will see — the Connected Apps setup in Step 3 solves this.

Custom Widgets in FlutterFlow let you embed any Dart/Flutter widget that isn't natively available in the visual builder. The `flutter_inappwebview` package provides a high-fidelity WebView that can render full Tableau visualizations including JavaScript-heavy interactive charts. In your FlutterFlow project, go to the left nav and click 'Custom Code' (the code bracket icon). Click '+ Add' and select 'Widget'. Name it 'TableauEmbed'. In the Dependencies field, add `flutter_inappwebview: ^6.0.0` — this is the pub.dev package name and version. FlutterFlow will handle adding it to the project's pubspec.yaml automatically. In the Parameters section, add one parameter named `viewUrl` of type String — this is the Tableau embed URL you'll pass in from the page. You can also add optional parameters for `widgetWidth` (double) and `widgetHeight` (double) to control the widget's size. Paste the Dart widget code (see code block) into the widget editor. The code creates an `InAppWebView` widget that loads your Tableau embed URL with JavaScript enabled — JavaScript is required for Tableau's visualization engine to run. Save the custom widget. Now go to a screen where you want to show the Tableau view. In the widget tree, click the '+' to add a widget, search for 'TableauEmbed', and drag it onto the screen. In its settings panel, set the `viewUrl` parameter to your Tableau embed URL — either hardcoded or bound to a page variable. Set the widget's width to fill the container and adjust the height to your preferred aspect ratio (Tableau views typically work well at 16:9 or 4:3 aspect ratios). Critical: Custom Widgets do not render in FlutterFlow's web Run mode preview. When you click 'Run' in the builder, the widget area will appear blank or show a placeholder. This is normal — you must use Test Mode (build and install on a physical device) to see the Tableau view render correctly.

1// FlutterFlow Custom Widget: TableauEmbed
2// Dependencies: flutter_inappwebview: ^6.0.0
3import 'package:flutter/material.dart';
4import 'package:flutter_inappwebview/flutter_inappwebview.dart';
5
6class TableauEmbed extends StatefulWidget {
7  const TableauEmbed({
8    Key? key,
9    this.width,
10    this.height,
11    required this.viewUrl,
12  }) : super(key: key);
13
14  final double? width;
15  final double? height;
16  final String viewUrl;
17
18  @override
19  State<TableauEmbed> createState() => _TableauEmbedState();
20}
21
22class _TableauEmbedState extends State<TableauEmbed> {
23  bool _isLoading = true;
24
25  @override
26  Widget build(BuildContext context) {
27    return SizedBox(
28      width: widget.width ?? double.infinity,
29      height: widget.height ?? 400,
30      child: Stack(
31        children: [
32          InAppWebView(
33            initialUrlRequest: URLRequest(
34              url: WebUri(widget.viewUrl),
35            ),
36            initialSettings: InAppWebViewSettings(
37              javaScriptEnabled: true,
38              domStorageEnabled: true,
39              allowsInlineMediaPlayback: true,
40              mediaPlaybackRequiresUserGesture: false,
41            ),
42            onLoadStart: (_, __) {
43              setState(() => _isLoading = true);
44            },
45            onLoadStop: (_, __) {
46              setState(() => _isLoading = false);
47            },
48          ),
49          if (_isLoading)
50            const Center(
51              child: CircularProgressIndicator(),
52            ),
53        ],
54      ),
55    );
56  }
57}

If your Tableau views are on Tableau Cloud and not publicly shared, users of your FlutterFlow app will see a Tableau login page inside the WebView. Connected Apps is Tableau Cloud's solution for seamless embedding authentication — you generate a short-lived JWT signed with a Connected App secret, and Tableau auto-authenticates the WebView session without requiring a Tableau user account. First, set up a Connected App in Tableau Cloud: go to your site → Site Settings → Connected Apps → New Connected App. Choose 'Direct Trust', give it a name, and enable it. Copy the Client ID and generate a Secret — you'll use both in your Cloud Function. Store the secret in Firebase environment configuration or Secret Manager, never in code. Deploy a Firebase Cloud Function that: 1. Accepts a request from your FlutterFlow app with the user's identifier 2. Generates a JWT signed with the Connected App secret (using the `jsonwebtoken` npm package) 3. Returns a trusted embed URL: your Tableau view URL with the JWT token appended as `?:jwtToken=<token>` In FlutterFlow, create an API Group pointing at this Cloud Function. The API Call returns the trusted URL from the function. Before loading the TableauEmbed widget on your page, set up an On Page Load action that calls the Cloud Function API Call first, stores the returned URL in a page variable, and then the widget binds its `viewUrl` parameter to that variable. With Connected Apps configured, the WebView silently authenticates the Tableau session using the JWT, and users see the dashboard directly — no Tableau login prompt.

1// Firebase Cloud Function: Generate Tableau Connected Apps JWT
2// functions/index.js
3const functions = require('firebase-functions');
4const jwt = require('jsonwebtoken');
5const { v4: uuidv4 } = require('uuid');
6
7// Store these in Firebase environment config, not hardcoded
8// firebase functions:config:set tableau.client_id="..." tableau.client_secret="..." tableau.site_name="..."
9const TABLEAU_CLIENT_ID = process.env.TABLEAU_CLIENT_ID;
10const TABLEAU_CLIENT_SECRET = process.env.TABLEAU_CLIENT_SECRET;
11const TABLEAU_SITE_NAME = process.env.TABLEAU_SITE_NAME; // your Tableau site URL name
12const TABLEAU_HOST = 'https://us-east-1.online.tableau.com'; // your Tableau Cloud host
13
14exports.getTableauEmbedToken = functions.https.onRequest(async (req, res) => {
15  res.set('Access-Control-Allow-Origin', '*');
16  if (req.method === 'OPTIONS') {
17    res.set('Access-Control-Allow-Methods', 'POST');
18    res.set('Access-Control-Allow-Headers', 'Content-Type');
19    return res.status(204).send('');
20  }
21
22  const { viewPath, userEmail } = req.body;
23
24  if (!viewPath) {
25    return res.status(400).json({ error: 'viewPath is required' });
26  }
27
28  const now = Math.floor(Date.now() / 1000);
29  const payload = {
30    iss: TABLEAU_CLIENT_ID,
31    exp: now + 300, // 5 minutes
32    jti: uuidv4(),
33    aud: 'tableau',
34    sub: userEmail || 'anonymous',
35    scp: ['tableau:views:embed', 'tableau:metrics:embed']
36  };
37
38  const token = jwt.sign(payload, TABLEAU_CLIENT_SECRET, {
39    algorithm: 'HS256',
40    header: { kid: TABLEAU_CLIENT_ID, iss: TABLEAU_CLIENT_ID }
41  });
42
43  const baseViewUrl = `${TABLEAU_HOST}/t/${TABLEAU_SITE_NAME}/views/${viewPath}`;
44  const embedUrl = `${baseViewUrl}?:embed=y&:showVizHome=no&:toolbar=no&:jwtToken=${token}`;
45
46  return res.json({ embedUrl });
47});

If you want your FlutterFlow app to show a dynamic list of available Tableau views — letting users pick which dashboard to view — you need the Tableau REST API. This is an advanced optional step that most apps won't need. The Tableau REST API authentication flow is a two-step process: first, POST to `/api/3.x/auth/signin` with your Personal Access Token name and secret to receive a short-lived `X-Tableau-Auth` session token. Then use that session token in subsequent API calls to list workbooks, views, or download data. Because a Personal Access Token is a long-lived credential, it must never appear in a FlutterFlow API Call header — it belongs in a Firebase Cloud Function. The Cloud Function holds the PAT, exchanges it for a session token, makes the Tableau REST API calls, and returns the clean workbook/view list as JSON to your FlutterFlow API Call. In FlutterFlow, create an API Group pointing to this Cloud Function. The API Call returns a list of view names and paths. Bind this list to a Dropdown widget or List widget on your screen. When the user selects a view, set a page variable to the selected path, call the JWT token Cloud Function with that path, and load the TableauEmbed widget with the resulting URL. Note: the REST API version (3.x in the URL) varies by Tableau Server version. Using the wrong version path returns a 404. Check your Tableau Cloud or Server version in the API documentation to confirm the correct version number.

1// Firebase Cloud Function: List Tableau views via REST API
2// functions/index.js (add this function)
3const axios = require('axios');
4
5const TABLEAU_PAT_NAME = process.env.TABLEAU_PAT_NAME;
6const TABLEAU_PAT_SECRET = process.env.TABLEAU_PAT_SECRET;
7const TABLEAU_HOST = process.env.TABLEAU_HOST;
8const TABLEAU_SITE_ID = process.env.TABLEAU_SITE_ID;
9
10exports.listTableauViews = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  if (req.method === 'OPTIONS') {
13    res.set('Access-Control-Allow-Methods', 'GET');
14    res.set('Access-Control-Allow-Headers', 'Content-Type');
15    return res.status(204).send('');
16  }
17
18  try {
19    // Step 1: Authenticate with PAT to get session token
20    const authResponse = await axios.post(
21      `${TABLEAU_HOST}/api/3.19/auth/signin`,
22      {
23        credentials: {
24          personalAccessTokenName: TABLEAU_PAT_NAME,
25          personalAccessTokenSecret: TABLEAU_PAT_SECRET,
26          site: { contentUrl: TABLEAU_SITE_ID }
27        }
28      },
29      { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }
30    );
31
32    const authToken = authResponse.data.credentials.token;
33    const siteId = authResponse.data.credentials.site.id;
34
35    // Step 2: List views
36    const viewsResponse = await axios.get(
37      `${TABLEAU_HOST}/api/3.19/sites/${siteId}/views`,
38      { headers: { 'X-Tableau-Auth': authToken, 'Accept': 'application/json' } }
39    );
40
41    const views = viewsResponse.data.views.view.map(v => ({
42      id: v.id,
43      name: v.name,
44      contentUrl: v.contentUrl,
45      workbook: v.owner?.name || ''
46    }));
47
48    return res.json({ views });
49  } catch (err) {
50    console.error('Tableau REST API error:', err.response?.data || err.message);
51    return res.status(502).json({ error: err.message });
52  }
53});