1 Reply Latest reply on Dec 8, 2016 12:31 PM by David Li

    Javascript API doesn't work before users are logged in through SAML

    David Li

      Hello, folks! I'm working with a client that uses the Javascript API to load Server-based views on webpages. They just moved to SAML login on their Tableau Server (10.1), and I'm running into an issue where the JS API doesn't work before users are logged in using SAML. The documentation says that if the API requests a view before the user logs in, it should forward the user to a login page, but this doesn't occur. Nothing happens and there's no dialog box or error/console message. Does anyone have any ideas on how to fix or work around this?


      FYI, the webpage uses a HTML <object> as the container that holds the views, and users change views by clicking on anchors that trigger Javascript functions. Everything points to a Tableau Server hosted on the client intranet. When a user has already logged in through SAML, everything works fine.


      Right now, I have a poor workaround that forces a blank view to load so that users can log in, but I'd like to find a better solution, because this workaround is limiting some of the functionality on the page.


      Thanks in advance for any thoughts you can provide!

        • 1. Re: Javascript API doesn't work before users are logged in through SAML
          David Li

          Oddly, I just figured out the solution shortly after posting here (even though I've been at this for a few days)! Interestingly, the API is correctly referring the user to a login page. However, for some unfathomable reason, the iframe for the container is invisible!


          Basically, the JS API loads a view into its container by loading it in an iframe. For whatever reason, when it loads the login page, the iframe is set to be 1x1 px and invisible, which isn't going to help anyone.


          To fix this, I just added this line of JS after the code that initializes the view:

          document.querySelectorAll("iframe").forEach(elem => elem.setAttribute('style', 'width:100%; height:100%; visibility:visible;'));


          This sets the style so that the login page becomes visible. Of course, this sets the style for all iframes, so if you're using iframes in your markup, you may have to do something fancier or switch to other HTML element containers.