Forum Discussion

pietrodig's avatar
pietrodig
Regular Visitor
2 years ago

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>

 

 

 

 

Need Help

1 Reply

  • Anonymous's avatar
    Anonymous
    Not applicable
    2 years ago

    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.