Pass data to a visual in an embedded report

pietrodig — Mon, 15 Jul 2024 11:04:03 GMT

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>

Re: Pass data to a visual in an embedded report

Anonymous — Tue, 16 Jul 2024 02:19:39 GMT

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

javascript - PowerBI custom visuals - How to programmatically switch between report pages in a custom visual using PowerBI API? - Stack Overflow

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.

topic Pass data to a visual in an embedded report in Developer

Pass data to a visual in an embedded report

Re: Pass data to a visual in an embedded report