Hi @Frank Nuesslein,

The issue is that the Tableau dashboard block works only on the first access, then shows a white screen on reload, even after clearing cache or switching browsers.

This is a common behavior when integrating Tableau into OutSystems Reactive apps using the JS API. The problem usually comes from authentication/session handling. Here’s a breakdown and suggestions:

Why it happens

1. Session-based authentication

   • Tableau often uses trusted authentication or Tableau Server login sessions.

   • On first load, the user manually signs in → Tableau issues a session token → dashboard shows.

   • On reload, the Tableau block tries to re-render, but the session token is lost or invalid → white screen.

2. Reactive Web Apps rendering

   • Reactive apps use client-side rendering, so the Tableau JS API block may try to initialize before the DOM element exists, causing it not to render on reload.

3. Cache or iframes

   • Tableau dashboards often rely on iframes.

   • Some browser settings, especially after a reload, may block the iframe if authentication is missing.

Possible Solutions

1. Use Tableau Trusted Authentication (if on Tableau Server)

   • Generate a trusted ticket server-side each time the page loads.

   • Pass this ticket to the Tableau JS API for embedding.

   • This avoids needing manual sign-in on reload.

2. Initialize Tableau JS block after DOM ready

   • In Reactive apps, ensure you call the Tableau initialization in OnReady or OnAfterRender of the container.

   • Example pseudo-code:

   • JavaScript:

   • $public.OnAfterRender(() => {    const container = document.getElementById("tableauViz");    if (container && !window.viz) {        window.viz = new tableau.Viz(container, vizUrl, options);    }});

3. Destroy and recreate the viz on each load

   • Sometimes the previous instance persists in memory → white screen.

   • Add cleanup logic before creating a new instance:

   • JavaScript: 

   • if (window.viz) {    window.viz.dispose();}

4. Check URL / Embed options

   • Make sure :embed=yes and :toolbar=no are set correctly.

   • If embedding Tableau Online / Server, check CORS / SSL issues — they can block reloads.

5. Debug in Browser

   • Open Chrome DevTools → Console on reload.

   • Look for 401 Unauthorized or CORS errors — that confirms it’s auth-related.

💡 Recommended Approach in OutSystems Reactive

• Create a server action that fetches a trusted ticket or signed URL from Tableau.

• Pass it to the JS API block every time the page loads.

• Use OnAfterRender to initialize the viz, and dispose previous instances on reload.

Thank You.