8 Replies Latest reply on Jun 23, 2016 10:29 AM by anastasia aourik

    Mulitiple Embedded Visualizations in Single Page/Screen with SSO

    brian mccullough

      Hello,  new member to the Tableau community here.

       

      We have a portal (happens to be ASP.NET based using Windows Authentication), and we are serving a page that contains multiple Tableau visualizations in it.  Tableau is configured to support Trusted Authentication and we are looking to leverage this to ensure an SSO experience regardless of device (desktop, laptop, tablet, phone) used to access the portal page hosting the embedded visualizations.  We prefer to embed the visualizations by way of iframe, unless a good argument can be made for using the javascript API.

       

      The page contains 6 small visualizations (think of a dashboard with various metrics on it).  I correctly construct the URLs using the "/trusted" version of the url for each visualization and place them into the src attribute with my iframes, however, only the first one renders.  The rest indicate that the token is expired.  I assume this is because the token you get from the Trusted Authentication API is a single-use token.

       

      I'd like to ensure that I have a valid Tableau session (assuming it's cookie based) before displaying the 6 visualizations.  Is there an API that checks for a valid session?  I assume no as I searched the API/javascript documentation and unable to find it.

       

      As a workaround, I considered using a hidden iframe and hooking into it's OnLoad event to trigger the rendering of the actual visible iframes (i.e. setting the src attribute on each).  However, this doesn't feel quite as "full-proof" as I'd like (e.g. user not actually authenticated and I could get login page or handle malformed/fatfingered visualization urls).

       

      I am considering a hidden div that I use with the javascript API (i.e. var viz = new tableau.Viz()) and pointing at the /trusted url.  Then use the onFirstInteractive option to trigger the loading of the remainder of the actual visible iframes.

       

      Any tips or recommendations on how to approach this?

       

      In case you are wondering, we choose 6 different visualizations, it is to support a responsive / adaptive design.  We know there are other ways to support it (e.g. by creating different worksheets based on different screen sizes), but none of the solutions we saw seemed to make sense in our use case without increasing the mainteanance burden...

        • 1. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
          Jeff D

          Hi Brian, welcome to the forums!

           

          The token is not a single use token.  When you redeem it for the first time, you'll get a new session (via a cookie).  If you redeem another token, you'll wipe out the cookie (and thus lose the previous session).  The solution is to redeem the ticket just once and load the first visualization.  Then load up the rest of the visualizations using their "regular" URLs (i.e., set the src attributes on the remaining frames).

           

          That said, using lots of iframes does not sound like the best solution.  You might want to post a new topic with this as a question (in other words, "how do I best handle this scenario?") and if you don't get a good answer, then post in the Ideas forum so that at least Tableau will consider this in the future.  If this is something that you need, it's likely there are other people who also need it.

          1 of 1 people found this helpful
          • 2. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
            brian mccullough

            Right, I believe we are essentially saying the same thing - we should only use a tokenized version of the url once if there is more than one visualization on the page.

             

            The question then becomes...when multiple embedded visualizations are on a single page and Trusted Authentication is being used, what's the best way to ensure we load the other, non-tokenized, visualization URLs AFTER the session is established?

             

            I'd like something a little more full-proof than the iframe's onLoad event or using setTimeout().  Would it be best to create the first visualization using the JS API and hook into the onFirstInteractive event to load the non-tokenized urls?  I setup a quick POC of this and it appears to work like I'd expect, however, I must figure out how to set the initial "session creating" visualization to hidden.

             

            Ideally, there'd be a hook in the JS API to check if a session is already established on the server.  If no session, fetch a token and load the first visualization with then, then load subsequent visualizations.  If a session did exist, then simply load the visualizations with the regular URLs.

             

            FYI...rather than a bunch of iframe's, we are considering replacing <iframe> with <img> tags and using the :format=png option to render the "dashboard" visualizations as we've disabled any interactivity with them anyway until they "click" on it to view the details or expand it to focus on that particular visualization.

            • 3. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
              Tamas Foldi

              You should definitely chain the viz initialization. If you are using javascript, then initialize the first viz with trusted ticket then initialize the rest without trusted ticket from the onFirstInteractive.

               

              The onFirstInteractive callback only invoked if you a) have valid session b) the viz is loaded completely. This is what you are looking for, nothing else.

               

              Regarding what to put before it loads.. C'mon, it's javascript. You can put whatever you want, like your company's million dollar custom spinner.gif or the viz's thumbnail image (you can read that from postgres repository or from REST API from server side _before_ your client does anything with trusted tickets). Or you can show all five views when all the five onFirstInteractive is called (simply hide all container div before they're ready)

              • 4. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
                brian mccullough

                Thanks for the input/feedback, though I encourage others to continue the conversation either for or against this approach.

                 

                I think what I'll do is just load a "well-known" visualization that isn't tied to any data to load initially.  Then wait for that to complete and load the others.  This is essentially what I did for my POC.  I just had to have my <div> that was the container for the viz not be a self closing tag (i.e. <div></div> rather than <div/>).  Silly mistake.

                 

                I still would love to see a way to check for session first before I did the extra steps of generating and accessing a tokenized url.

                 

                -Brian

                • 5. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
                  Tamas Foldi

                  No, you don't have to use a "well-known" visualization, you can pick the first real one, wait until it loads, then the rest five.

                   

                  And a quick comment: you can use onFirstVizSizeKnown method as well instead of onFirstInteractive. That would return quicker and still ensure that the trusted authentication was done.

                   

                  I still would love to see a way to check for session first before I did the extra steps of generating and accessing a tokenized url.

                   

                  You mean to check if the user is already logged on? You can create a viz object and if that fails, you can authenticate with the trusted ticket and retry.

                  1 of 1 people found this helpful
                  • 6. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
                    brian mccullough

                    I was curious whether onFirstVizSizeKnown was fired before onFirstInteractive.  Thanks!

                     

                    I will try the create of a Viz object and see if that helps me.

                     

                    Thanks for your help!!

                     

                    -Brian

                    • 7. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
                      brian mccullough

                      I tried with the following:

                       

                      try {

                              viz = new tableau.Viz(sessionVizDiv, sessionViz, sessionVizOptions);

                              logMsg("viz == null: " + (viz == null));

                          } catch (ex){

                              logMsg("could not create the session viz...about to call to get a token from REST endpoint");

                         }

                       

                       

                      However, no exception is thrown (not dropping into catch), and viz is not null.  So when I did this, my "onFirstInteractive" was never called, so the rest of my iframes were never loaded.  Here's what I'd like to do:

                       

                      if (tableau.Session.exists() == false){

                        //var token = call my custom REST endpoint to get a token

                        //tableau.Session.ensure(token); //this behind the scenes, calls into some well known URL that establishes the session cookie so I can just call regular non-tokenized urls...may need to take into account the Tableau site as well here...

                      }

                      //load visualizations with "regular" (non-tokenized) urls

                      • 8. Re: Mulitiple Embedded Visualizations in Single Page/Screen with SSO
                        anastasia aourik

                        Tableau JS newby question.

                        I have multiple visualiizations, and thus make 3 vis objects

                        viz1 = new tableau.Viz(containerDiv1, url1, options1);

                        viz2 = new tableau.Viz(containerDiv2, url2, options2);

                        viz3 = new tableau.Viz(containerDiv3, url3, options3);

                        I have an html select tag for year that I wish to apply to all 3 vizes.

                        This is not working for me.

                         

                        Help!

                        How to properly work with multiple viz objects are are displayed side-by side in a inline-block div

                        and have a single javascript select tag event when user changes year to pass that value to all 3 vizes.