Hello everyone,
I am embedding a Power BI report in a web application using the Power BI REST API and JavaScript SDK. My goal is to open multiple instances of the same report at the same time, each with different filters applied at the dataset level.
How It Works:
- The C# code authenticates with Azure AD, retrieves an access token, and generates an embed token for the report.
- It updates dataset parameters before generating the embed token.
- The HTML/JS file then embeds the report using the Power BI JavaScript SDK, ensuring each instance has a unique session ID.
The Problem:
Even though I apply different filters to the dataset before opening the report, when multiple reports are opened simultaneously, they share the same filter state. This means that applying a filter in one instance affects the others.
Questions:
- What am I doing wrong?
- How can I ensure that each report instance keeps its own dataset filters without interfering with the others?
- Is there a way to generate independent dataset snapshots per session?
- Would using separate datasets or duplicate reports be the only workaround?
This is my embed code:
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Fabric SandBox</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="powerbi.js"></script>
</head>
<body>
<h2>Fabric Sandbox</h2>
<div id='{{CONTAINER_ID}}' style='width:100%;height:800px;'></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof powerbi === 'undefined' || !window.powerbi) {
console.error('❌ Power BI Client SDK no se cargó correctamente.');
return;
}
var models = window['powerbi-client'].models;
var embedConfig = {
type: 'report',
id: '{{REPORT_ID}}',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId={{REPORT_ID}}&groupId={{WORKSPACE_ID}}',
accessToken: '{{EMBED_TOKEN}}',
tokenType: models.TokenType.Embed,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
// Agrega el parámetro a la URL de embed
var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId={{REPORT_ID}}&groupId={{WORKSPACE_ID}}&rs:embedsessionid={{UNIQUESESSIONID}}';
embedConfig.embedUrl = embedUrl;
if (report) {
report.destroy().then(function () {
var oldContainer = document.getElementById('{{CONTAINER_ID}}');
oldContainer.parentNode.removeChild(oldContainer);
var newContainer = document.createElement('div');
newContainer.id = '{{CONTAINER_ID}}';
newContainer.style.width = '100%';
newContainer.style.height = '800px';
document.body.appendChild(newContainer);
embedConfig.embedUrl = 'https://app.powerbi.com/reportEmbed?reportId={{REPORT_ID}}&groupId={{WORKSPACE_ID}}&cb=' + new Date().getTime();
report = powerbi.embed(newContainer, embedConfig);
});
}
var reportContainer = document.getElementById('{{CONTAINER_ID}}');
var powerbiService = powerbi
powerbiService.reset(reportContainer);
var report = powerbiService.embed(reportContainer, embedConfig);
});
</script>
</body>
</html>
Any suggestions would be greatly appreciated! 🚀
Thanks 🤗
