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) reall...
  • TedPattison's avatar
    7 years ago

    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");
    });