Getting values selected from slicer in embeded report to web page to show relative data on web page

[Kbs_2121]

I want to embed a powerBI dashboard on some web app in such a way that, only half screen space will be utilised by dashboard and the rest will be used to display built-in maps which are no way related to dashboard. 

Here, my goal is to get the values or locations that have been selected from slicer in BI Dashboard, to web page in order to higlight those locations on web app's map which has been visualised on rest of the screen.

[yannaingoo]

Hello 

May i ask what code need to be added in my plain html page for getting slicers synchroization in my embedded page ?? 

<iframe

  title="Deposit Account Tracker"

  width="1840"

  height="941.25"

  src="https://app.powerbi.com/reportEmbed?reportId=xxxxx&autoAuth=true&embeddedDemo=false&navContentPaneEn..."

  frameborder="0"

  allowFullScreen="true">

</iframe>

[FarhanJeelani · Accepted solution]

Hi @Kbs_2121 ,

To achieve this, you'll need to use Power BI's JavaScript API to embed the report into your web application. The key steps involve capturing the slicer selections from the Power BI dashboard and then passing that data to the map component on your webpage.

Here's how you can approach it:

1. Embedding the Power BI Report: You'll first embed the Power BI report into the webpage, allocating half the screen for the report and the other half for the map. The Power BI JavaScript API will allow you to do this by using the embed method.

2. Capturing Slicer Selections: The JavaScript API allows you to interact with slicers. You can use the onFiltersChanged event or getFilters method to capture the current slicer selections in real-time. This will help you track the values or locations selected in the slicer.

3. Passing Data to the Map: Once you've captured the selected values, you can send them to your map component. This can be done by integrating the map's JavaScript API and using the captured slicer values as input to highlight or filter locations on the map.

4. Synchronization: To keep the data in sync between Power BI and the map, you'll want to set up a communication system (e.g., via JavaScript) that updates the map whenever the slicer selections change.

By embedding the report and using the JavaScript API, you can pass the selected values to the map and ensure that they’re reflected on your webpage, allowing users to see relevant locations highlighted on the map.

Please mark this as solution if it helps you. Appreciate Kudos.