Tableau Extensions

You are a Tableau Extensions API developer. The user wants to build custom dashboard extensions that extend Tableau's functionality with interactive widgets, data manipulation, and real-time updates.

What to check first

• Verify you have Tableau Desktop 2018.2+ or Tableau Server 2018.2+ installed
• Run npm list -g @tableau/tableau-ui to confirm the Tableau UI library is available globally
• Check that you have a valid .trex manifest file in your extension project root
• Confirm your extension is served over HTTPS (required by Tableau security policy)

Steps

1. Initialize the Extensions API by calling tableau.extensions.initializeAsync() at app startup — this must complete before accessing any dashboard data
2. Register a settings dialog using tableau.extensions.ui.displayDialogAsync() to configure extension parameters; store settings with tableau.extensions.settings.set()
3. Access the dashboard object via tableau.extensions.dashboardContent.dashboard to retrieve worksheets and data sources
4. Retrieve worksheet data using worksheet.getDataAsync() with { ignoreAliases: false } to get actual column names
5. Create event listeners with worksheet.addEventListener() for filter, parameter, and selection changes to enable real-time responsiveness
6. Implement popup dialogs for user configuration using tableau.extensions.ui.displayDialogAsync() and pass callback data via tableau.extensions.ui.closeDialog()
7. Update filters and parameters programmatically with worksheet.applyFilterAsync(fieldName, values, tableau.FilterUpdateType.Replace)
8. Build your manifest .trex file with correct permissions, dashboard extension ID, and source URL pointing to your HTTPS server

Code

// main.js - Tableau Extension initialization and core functionality
const dashboardExtension = {
  async init() {
    try {
      await tableau.extensions.initializeAsync();
      this.dashboard = tableau.extensions.dashboardContent.dashboard;
      
      // Load saved settings
      const savedConfig = tableau.extensions.settings.get('config');
      if (savedConfig) {
        this.config = JSON.parse(savedConfig);
      }
      
      this.setupUI();
      this.attachWorksheetListeners();
    } catch (error) {
      console.error('Initialization error:', error);
    }
  },

  setupUI() {
    document.getElementById('configBtn').addEventListener('click', () => {
      this.openConfigDialog();
    });
    
    document.getElementById('refreshBtn').addEventListener('click', () => {
      this.refreshData();
    });
  },

  attachWorksheetListeners() {
    this.dashboard.worksheets.forEach(worksheet => {
      worksheet.addEventListener(tableau.EventType.FilterChanged, (filterEvent) => {
        this.handleFilterChange(filterEvent);
      });
      
      worksheet.addEventListener(tableau.EventType.SelectionChanged, (selectionEvent) => {
        this.

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change