Hi everyone,
I have a question regarding the possibility to send data to a visual inside an embedded report.
This can somehow be related to my other post, since for what I see and I have tested, the localstorage API is not working in embedded mode.
I am using the powerbi-client JS library in the HTML code used for embedding the report, but without success.
This is the demo code I have used for the tests:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed Power BI Custom Visual</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.23.1/powerbi.min.js"></script>
</head>
<body>
<div>
<input type="text" id="customParam" placeholder="Enter Custom Param">
<button onclick="updateReport()">Update Report</button>
</div>
<div id="reportContainer" style="height:600px;"></div>
<script>
var models = window['powerbi-client'].models;
var reportContainer = document.getElementById('reportContainer');
var embedConfig = {
type: 'report',
id: 'YOUR_REPORT_ID', // Replace with your report ID
embedUrl: 'YOUR_EMBED_URL', // Replace with your embed URL
accessToken: 'YOUR_ACCESS_TOKEN',
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: true
}
};
var report = powerbi.embed(reportContainer, embedConfig);
function updateReport() {
var customParam = document.getElementById("customParam").value;
console.log("update report!!!");
//report.on("loaded", function() {
console.log("loaded!");
report.getPages()
.then(function(pages) {
var activePage = pages[0]; // Assuming your visual is on the first page
activePage.getVisuals()
.then(function(visuals) {
console.log("visuals", visuals);
// Find custom visual by name or by custom identifier
var customVisual = visuals.find(visual => visual.type === 'myVisualF2AE6C1440294E95BE39535129C02025'); // Replace with your visual name
console.log("custom", customVisual);
console.log("report", report);
if (customVisual) {
customVisual.setProperties({
objects: {
settings: {
customString: {
value: customParam
}
}
}
});
}
});
});
//});
}
</script>
</body>
</html>
