Forum Discussion

Zuv's avatar
Zuv
Frequent Visitor
7 years ago
Solved

Phased Embedding API with Preload error

Hello,

In last update MS announced Phased Embedding API (https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API), so I have tried it.

I am not sure how Preload (Warm start) really works.

As far as I understand first you do preload, after it finishes you can embed your report in your old way, or with new .load functionality.

so I have tried this:

 

var config_pre= {
  type: 'report',
  embedUrl: embedUrl,
};
var element = powerbi.preload(config_pre);
element.on('preloaded', function() {
  var report = powerbi.embed(reportContainer, config);
});

It doesn't work and throws me an error on js level:

 

303:547 Uncaught TypeError: element.on is not a function
    at Object.biResponse [as success] (303:547)
    at l (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at T (jquery.min.js:2)
    at XMLHttpRequest.r (jquery.min.js:2)

Do you think mine approach on that is a logical one, and maybe you do know anything about that error?

Thanks a lot!

  • Here is the basic structure I used for this technique.

     

    // preload preload pbie scripts on this page
    var preloadConfig = {
      type: 'report',
      baseUrl: 'https://embedded.powerbi.com/reportEmbed',
    };
    
    var preloadElement = powerbi.preload(preloadConfig);
    
    preloadElement.onload(function () {
      console.log("pbie scripts now preloaded into this page");
    });
    
    
    // data required for embedding Power BI report
    var embedReportId = "2cf7c5c5-4e1a-4df7-a2a6-21930aeb6fb6";
    var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c5-4e1a-4df7-a2a...";
    var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o8076K7qgn__WOkzzGn...";
    
    // Get models object to access enums for embed configuration
    var models = window['powerbi-client'].models;
    
    var config = {
      type: 'report',
      id: embedReportId,
      embedUrl: embedUrl,
      accessToken: accessToken,
      tokenType: models.TokenType.Embed,
    };
    
    // Get a reference to the embedded report HTML element
    var reportContainer = document.getElementById('embedContainer');
    
    // call load() instead of embed() to load the report while delaying the rendering process
    var report = powerbi.load(embedContainer, config);
    
    // when loaded event occurs, set current page then call render()
    report.on("loaded", function () {
      console.log("loaded event executing");
      // call to get Pages collection
      report.getPages().then(
        function (pages) {
          // inspect pages in browser console
          console.log(pages);
          // display specific page in report
          var startPage = pages[0]; // this select first page
          config.pageName = startPage.name;
          // Call report.render() to display report
          report.render(config);
        });
    });
    
    report.on('rendered', function () {
      console.log("rendered event executing");
    });

15 Replies

  • TedPattison's avatar
    TedPattison
    Icon for Microsoft Employee rankMicrosoft Employee

    Here is the basic structure I used for this technique.

     

    // preload preload pbie scripts on this page
    var preloadConfig = {
      type: 'report',
      baseUrl: 'https://embedded.powerbi.com/reportEmbed',
    };
    
    var preloadElement = powerbi.preload(preloadConfig);
    
    preloadElement.onload(function () {
      console.log("pbie scripts now preloaded into this page");
    });
    
    
    // data required for embedding Power BI report
    var embedReportId = "2cf7c5c5-4e1a-4df7-a2a6-21930aeb6fb6";
    var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c5-4e1a-4df7-a2a...";
    var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o8076K7qgn__WOkzzGn...";
    
    // Get models object to access enums for embed configuration
    var models = window['powerbi-client'].models;
    
    var config = {
      type: 'report',
      id: embedReportId,
      embedUrl: embedUrl,
      accessToken: accessToken,
      tokenType: models.TokenType.Embed,
    };
    
    // Get a reference to the embedded report HTML element
    var reportContainer = document.getElementById('embedContainer');
    
    // call load() instead of embed() to load the report while delaying the rendering process
    var report = powerbi.load(embedContainer, config);
    
    // when loaded event occurs, set current page then call render()
    report.on("loaded", function () {
      console.log("loaded event executing");
      // call to get Pages collection
      report.getPages().then(
        function (pages) {
          // inspect pages in browser console
          console.log(pages);
          // display specific page in report
          var startPage = pages[0]; // this select first page
          config.pageName = startPage.name;
          // Call report.render() to display report
          report.render(config);
        });
    });
    
    report.on('rendered', function () {
      console.log("rendered event executing");
    });
  • Dan_Cundy's avatar
    Dan_Cundy
    Frequent Visitor

    For me neither method works.

     

     

    The below throws : TypeError: element.on is not a function

     

    element.on('preloaded', function() {});

     

     The below never fires.

     

    element.onload(function() {});

     

    Anyone else got this to work, or having the same issue?

     

    The offical documentation states the following: "A ‘ready’ event will be fired once the preload is completed."

     

    element.on('preloaded', function() {
       // do whatever you like here
    });

     https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API

     

    • TedPattison's avatar
      TedPattison
      Icon for Microsoft Employee rankMicrosoft Employee

      I just added the same code in another post today. But here is the basic structure that you should use.

       

      // preload preload pbie scripts on this page
      var preloadConfig = {
        type: 'report',
        baseUrl: 'https://embedded.powerbi.com/reportEmbed',
      };
      
      var preloadElement = powerbi.preload(preloadConfig);
      
      preloadElement.onload(function () {
        console.log("pbie scripts now preloaded into this page");
      });
      
      
      // data required for embedding Power BI report
      var embedReportId = "2cf7c5c5-4e1a-4df7-a2a6-2193...";
      var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c..";
      var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o80...";
      
      // Get models object to access enums for embed configuration
      var models = window['powerbi-client'].models;
      
      var config = {
        type: 'report',
        id: embedReportId,
        embedUrl: embedUrl,
        accessToken: accessToken,
        tokenType: models.TokenType.Embed,
      };
      
      // Get a reference to the embedded report HTML element
      var reportContainer = document.getElementById('embedContainer');
      
      // call load() instead of embed() to load the report while delaying the rendering process
      var report = powerbi.load(embedContainer, config);
      
      // when loaded event occurs, set current page then call render()
      report.on("loaded", function () {
        console.log("loaded event executing");
        // call to get Pages collection
        report.getPages().then(
          function (pages) {
            // inspect pages in browser console
            console.log(pages);
            // display specific page in report
            var startPage = pages[0]; // this select first page
            config.pageName = startPage.name;
            // Call report.render() to display report
            report.render(config);
          });
      });
      • Dan_Cundy's avatar
        Dan_Cundy
        Frequent Visitor

        I can see your code differs from their example.

         

        They are suggesting you create your config like this.

         

        // Create embedding config
        var config= {
            type: 'report',
            embedUrl: '.....',
        };

         

        Note that you are using baseUrl instead. 

         

        I'm going to give that a go and see what happens.. 

  • The above the woking, but report is not loaded in power bi playground

  • Change the code like this 

    var element = powerbi.preload(config_pre);
    $(element).on('preloaded', function() {
      var report = powerbi.embed(reportContainer, config);
    });