1 Reply Latest reply on Aug 16, 2018 11:45 AM by Alex Elkman

    JS API with Angular5, Embedded iFrame content appearing in <body> not inside class vizContainer

    Alex Elkman

      I have created a Tableau component in my Angular 5 project with a method initViz():

       

        ngOnInit() {
         
          this.initViz();
        }
             
        initViz() {
      
          var containerDiv = document.getElementsById("vizContainer"),
          url = "https://tableau.northgrum.com/#/site/NGMS/views/AgingReport/Aging?:iid=3",
      
          options = {
                      width: this._width,
                      height: this._height,
                      hideTabs: true
                    };
          this.viz = new tableau.Viz(containerDiv, url, options);
          console.log("Initialized viz!");
          console.log(this.viz);
        }
      

       

      My HTML is as follows:

       

      <div class="vizContainer">
      </div>
      

       

      And the graph appears! However the iFrame is not getting injected in the proper spot of my HTML, it is getting added at the end of <body> and not inside the vizContainer class object for my component.

      I noticed that in the JS API code for tableau-2.2.2.js (which I am using) on line 9005 we see:

       

      this.$contentRootElement().appendChild(ifr);
      

       

      Which seems to be the line appending to the body. Perhaps I can modify this line so it instead is going into the div content for vizContainer? I tried with no success to change it to:

       

      document.getElementById("vizContainer").appendChild(ifr);
      

       

      but sadly it did not work .