Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
pietrodig
Regular Visitor

Pass data to a visual in an embedded report

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>

 

 

 

 

1 REPLY 1
Anonymous
Not applicable

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 custo...

 

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.

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.