Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
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>
Hi @pietrodig ,
According to the description of your document, I can understand that the localstorage API can be applied to some SaaS platforms, but it is not certain that the localstorage API can be applied to all SaaS platforms, you can try to do the embedded operation on the common visual to check whether it is successful or not, and if only your custom visual cannot run successfully, and you confirm that the steps of passing parameters have been fully configured, you can also go to the developer forum of the corresponding custom visual to raise a related question if convenient. If only your custom visual fails to run successfully, and you confirm that the steps for passing parameters have been fully configured, you can also go to the developer's forum of the corresponding custom visual to ask a related question.
Custom Visuals Development Discussion - Microsoft Fabric Community
Best Regards,
Liu Yang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
User | Count |
---|---|
5 | |
5 | |
3 | |
2 | |
2 |
User | Count |
---|---|
9 | |
7 | |
5 | |
4 | |
4 |