API de inserción por fases con error de precarga

Un usuario Pregunto ✅

Zuv

Hola,

En la última actualización, MS anunció API de incorporación por fases (https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API), así que lo he probado.

No estoy seguro como Precarga (arranque en caliente) realmente funciona.

Por lo que tengo entendido, primero realiza la precarga, una vez que finaliza, puede incrustar su informe de la forma anterior o con la nueva funcionalidad .load.

así que he intentado esto:

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

No funciona y me arroja un error en el nivel js:

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)

¿Crees que mi enfoque al respecto es lógico, y tal vez sabes algo sobre ese error?

¡Muchas gracias!

Aquí está la estructura básica que utilicé para esta técnica.

// 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

Para mí ninguno de los métodos funciona.

Los siguientes lanzamientos: TypeError: element.on no es una función

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

El de abajo nunca se dispara.

element.onload(function() {});

¿Alguien más consiguió que esto funcionara o tiene el mismo problema?

La documentación oficial establece lo siguiente: «Se activará un evento ‘listo’ una vez que se complete la precarga «.

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

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

En respuesta a Dan_Cundy

Acabo de agregar el mismo código en otra publicación de hoy. Pero aquí está la estructura básica que debe utilizar.

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

Plata

En respuesta a TedPattison

Tengo los mismos problemas que todos los demás. Una cosa que noté en su código es que usa baseUrl en «https: // embedded …. no https: // api como sugieren los documentos. ¿Puede explicar esto? Sin embargo, incluso cuando modifiqué mi URL a» embedded «todavía no funcionó.

Anónimo

En respuesta a TedPattison

Hola, probé esta solución, pero no funciona. La documentación oficial establece lo siguiente: «Se activará un evento ‘listo’ una vez que se complete la precarga». pero no está sucediendo. Tampoco obtengo ningún error.

En respuesta a Anónimo

¿Puedes publicar el código que no funciona?

Anónimo

En respuesta a TedPattison

Hola,

Busque el código;

var preloadConfig = {
  type: 'report',
  baseUrl:'https://app.powerbi.com/reportEmbed',
};

var preloadElement = powerbi.preload(preloadConfig);

preloadElement.onload(function () {
	  console.log("pbie scripts now preloaded into this page");
	});

var accessToken = data.embededToken;
var embedUrl = data.embedUrl; 
var embedReportId = data.reportId;

var models = window['powerbi-client'].models;
var config = {
	type: 'report',
	tokenType: models.TokenType.Embed,
	accessToken: accessToken,
	embedUrl: embedUrl,
	viewMode: models.ViewMode.View,
	id: embedReportId,
	settings: {
		filterPaneEnabled: false,
		background: models.BackgroundType.Transparent
	}
};

// Get a reference to the embedded dashboard HTML element
var reportContainer = $('#reportHolder')[0];

// Embed the dashboard and display it within the div container.
var report = powerbi.load(reportContainer,config);
report.fullscreen();

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

En respuesta a Anónimo

No veo ningún problema con tu código. Sin embargo, ejecuté el código a continuación y el prestados El controlador de eventos se activa como se esperaba. No puedo reproducir el problema donde el los prestados el controlador de eventos no se activa.

// data required for embedding Power BI report
var embedReportId = "@Model.reportId";
var embedUrl = "@Model.embedUrl";
var accessToken = "@Model.accessToken";

// 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,
  permissions: models.Permissions.All,
  viewMode: models.ViewMode.View,
  settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: true,
  }
};

// Get a reference to HTML element that will be embed container
var reportContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.load(reportContainer, config);

console.log(report);

report.on("loaded", function (event) {
  console.log("loaded: " + event);
  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 (event) {
  console.log("rendered: " + event);
});

Anónimo

En respuesta a TedPattison

Hola,

Según el ejemplo, el controlador de eventos de powerbi.preload(config) no está siendo despedido. ¿Hay alguna solución para eso?

Anónimo

En respuesta a TedPattison

Hola,

Está bien, gracias. Tengo una duda más, ¿qué debo usar en lugar de powerbi.embedNew ()?

Estamos usando embed.New () para reemplazar el informe incrustado actual por uno nuevo en la misma página.

En respuesta a Anónimo

Para agregar un nuevo objeto incrustado en un div que ya contiene un objeto incrustado existente, he estado usando este código.

powerbi.reset(embedContainer);
powerbi.embed(embedContainer, config);

Agregar Hoy miré la API de JavaScript de Power BI, noté que hay un nuevo método en la raíz powerbi objeto nombrado

addOrOverwriteEmbed. No lo he usado, pero tengo curiosidad por saber si eso también se puede usar en este escenario.

Dan_Cundy

En respuesta a TedPattison

Puedo ver que su código difiere de su ejemplo.

Sugieren que cree su configuración de esta manera.

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

Tenga en cuenta que está utilizando baseUrl en su lugar.

Voy a intentarlo y ver qué pasa …

Dan_Cundy

En respuesta a Dan_Cundy

De acuerdo, mi problema era que necesitaba envolver el objeto de elemento como se muestra a continuación debido a que no es un objeto de JQuery.

  $(PreloadElement).on('preloaded', function() {
         console.log("scripts now preloaded into this page");
    });

Aquí está la estructura básica que utilicé para esta técnica.

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *