7 Replies Latest reply on Oct 4, 2018 6:52 AM by Michael Møldrup

    Using the JavaScript API within a SharePoint page

    Alex Katona

      Hi everyone,

       

      I’m attempting to use the JavaScript API to get data in a Tableau dashboard (version 10.1.1). I’ve been able to create a working copy on my laptop and the code is very similar to what is in this Tableau example link: https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_samples_get_data.html

       

      I would like to host the HTML/JS file on a SharePoint page so that I can share it with others. When I add the code to a SharePoint page using either a Content editor web part or a Script editor web part, the page displays the embedded dashboard, but clicking on the “Get Data” button (like in the link above) doesn’t return the underlying data. Does anyone have experience with this or know why this may be happening?

       

      Thank you,

      Alex

        • 1. Re: Using the JavaScript API within a SharePoint page
          Patrick A Van Der Hyde

          Hello Alex,

           

          Have you tried the method described here - Embed Views into SharePoint (Microsoft SSPI) ?  I don't believe the JS API is needed for this. 

           

          Patrick

          • 2. Re: Using the JavaScript API within a SharePoint page
            Alex Katona

            Thanks for replying, Patrick. That solution would allow me to embed the visualization. However, I'm interested in using the JavaScript API to not only embed, but also use the getData() function to feed the data into a D3 visualization in a SharePoint page.

             

            Alex

            • 3. Re: Using the JavaScript API within a SharePoint page
              Alex Katona

              I figured out how to do this:

              1. Add an HTML/JavaScript file to your Site Assets in SharePoint
              2. Copy the URL to that file, which is shown after clicking on the ellipsis next to the file name
              3. Create a new page and insert a Page Viewer Web Part (listed under Media and Content)
              4. Edit the web part and then paste the URL to the file where is asks to specify the link. Under appearance, edit the fixed height and fixed width to fit the output of the HTML/JavaScript file. Click OK.
              5. Check in the page and test the final page

               

              Alex

              1 of 1 people found this helpful
              • 4. Re: Using the JavaScript API within a SharePoint page
                Michael Thurston

                Thanks for the help. This was exactly what I needed, however, the Page Viewer Web Part did not work for me. When I would load the page it would download my html file so I tried using a Content Editor Web Part and put the link in the Content Link. This allowed me to view the page without downloading the html file.

                1 of 1 people found this helpful
                • 5. Re: Using the JavaScript API within a SharePoint page
                  Andy Miller

                  Hi Michael and Alex Katona,

                   

                  Thanks for your guidance here!  I am having some trouble doing this... I have my HTML file loaded to my site assets library.  The link I am using is my guess for the problem - it was created using the "Get a link" button on the sharepoint page. Seems to have authentication in it as opposed to old sharepoint that wasn't so complicated.

                  View: myl.sharepoint.com/sites/TableauHelp/_layouts/15/guestaccess.aspx?guestaccesstoken=YfXkFA%2bgoieQqAZneDwWdUT3%2bJM6VC0FdtDYgIyI5wc%3d&docid=2_00acbf5cc2ff94c0b810a588f8f86ac84&rev=1

                  Edit: myl.sharepoint.com/sites/TableauHelp/_layouts/15/guestaccess.aspx?guestaccesstoken=OAIWaCnO3YIFYmSgxntBHx3ZhA3OXCdhoXR3nml%2fT9Y%3d&docid=2_10acbf5cc2ff94c0b810a588f8f86ac84&rev=1

                   

                  I tried both the page viewer web part and the content editor web part with no luck.  Do you think its the link?  Should it be something short hand like: https://myl.sharepoint.com/sites/TableauHelp/SiteAssets/testing.html

                  That didnt work either.

                   

                  Here is the HTML Code I am using:

                  • 6. Re: Using the JavaScript API within a SharePoint page
                    Mark Herman

                    Good morning, Andy. I'm in the same place as you. The page viewer app is not available to me b/c our IT policy does not allow iFrames. I'm trying to use the CEWP / JavaScript API b/c my hope is I can retrieve the filters the user clicked on the populate an InfoPath form. A few things beyond what you posted:

                    1) I removed everything except the script and div tags. IE console showed warnings about duplicate html, head and body tags. I also saved this file to my Site Assets folder and point to it from the CEWP.

                    2. I added the _spBodyOnLoadFunctionNames.push("initViz"); statement, and was able to see that initViz fires with this addition. SharePoint already has a body tag, and an onLoad event.

                    3. The example link includes an script tag with an external reference:

                         <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

                         Yours has this reference, which looks like the JS based on a share/embed link

                        <script type="text/javascript" src="https://wa1tabp001.myl.com/javascripts/api/viz_v1.js"></script>

                    4. The external reference is where I'm stuck. I don't think is the external JS is loaded when initViz is called. I saved tableau-2.min.js to my site assets folder (and used a relative link for the SRC property), and tried to point to in a couple of different places

                         a. Within the same CEWP

                         b. Within another CEWP

                         c. Within the script editor.

                         d. in the <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> and <SharePoint:ScriptBlock runat="server"> tags (by editing SharePoint designer)

                     

                        <script type="text/javascript">
                        _spBodyOnLoadFunctionNames.push("initViz");
                           function initViz() {
                                var containerDiv = document.getElementById("vizContainer"),
                                    url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
                                    options = {
                                        hideTabs: true,
                                        onFirstInteractive: function () {
                                            console.log("Run this code when the viz has finished loading.");
                                        }
                                    };
                               
                                var viz = new tableau.Viz(containerDiv, url, options);
                                // Create a viz object and embed it in the container div.
                            }
                        </script>

                    <div id="vizContainer" style="width:800px; height:700px;"></div>

                     

                    I'm hoping someone can help me with idea. There seems to be relatively little documentation on the subject.

                    • 7. Re: Using the JavaScript API within a SharePoint page
                      Michael Møldrup

                      Hi Mark,

                       

                      For future reference:

                       

                      I got the API-Sharepoint-solution Mentioned by Mark Herman working.

                      In Sharepoint 2013, I needed to change the Masterpage head to "<meta http-equiv="X-UA-Compatible" content="IE=11" />" instead of using IE=10.

                      After this Tableau rendered just fine.

                       

                      This was my complete script: (This script also worked, when changing references to Tableau Public, using the URL's mentioned by Mark Herman).

                           <script type="text/javascript" src="http://myTableauServer/javascripts/api/tableau-2.min.js"></script>

                           <script type="text/javascript">

                           _spBodyOnLoadFunctionNames.push("initViz")

                           function initViz() {

                                  var containerDiv = document.getElementById("vizContainer"),

                                url = "http://myTableauServer/views/MyViz",

                                      options = {

                                               hideToolbar: true,

                                               onFirstInteractive: function () {

                                              console.log("Run this code when the viz has finished loading.");

                                          }

                                      };

                                  var viz = new tableau.Viz(containerDiv, url, options); //Create a viz object and embed it in the container div.

                              }

                          </script>               

                      <div id="vizContainer" style="width:1000px; height:1000px;"></div>