Forum Discussion
Pass value to the embedded app from custom visual
Hi all,
I want to pass values to the embedded app from the custom visual used in my report. For eg. I want to raise an event when a click event occurs inside the custom visual so that I can take necessary actions in my embedding app.
For eg. I'll be having different player photos shown in a grid, 2 * 3 grid. So there will be a menu icon besides the photos of each photos. These menu icon are custom visuals. And when I click on these custom visuals, I will try to raise an event, or send a message to the parent window, i.e. the parent app where the page is embedded and take necessary actions in the parent app.
Necessary actions might be a popup with the player details like age, speed etc. How can I do this?
16 Replies
Have you tried window.window.postMessage to send data from ifame into main window?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Tried, but not working. Is there any other solution? Is the sandboxed iframe blocking these events?
As far as I know, Power BI doesn't block such events since it's used for communication between main window and other custom visuals.
Can you share the code for furhter debugging?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Has this problem ever been solved?
We are building a web-app that integrates Power BI reports and we would like to trigger certain actions inside our app depending on what the user clicks or selects, e.g. to show pop-ups with external information or to switch a filter of a non-PowerBI element.
Is this possible v-viig ?
Our app has a very extensive postMessage interface to communicate with Iframes.
Great! So a simple 'postMessage' from inside a custom visual will arrive in the parent window that embeds the report? I was afraid there might be some layers in between to prevent this.
Hello,
I'm looking to acheive something similar within my custom visual. Can anyone please confirm whether or not it is possible to emit a custom message from the visual and have it be consumbed by the embedding application via the window.postMessage mechanism? If it is in fact possible, can anyone provide some tips or pointers on how to acheive this? I've tried the obvious `window.postMessage('my message')` which does not seem to be received by the embedding application. I'm thinking there may be some gotcha's somewhere that I'm not aware of.
Thanks in advance for the help!
Hi,
has anyone been able to find a solution for this case?
I was able to "postMessage" from "visual" and receive it in my host app like this:
constructor(options: VisualConstructorOptions) {
this.target = options.element;
}public update(options: VisualUpdateOptions) {
const value = dataView.single.value.toString();
(this.target as any).ownerDocument.defaultView.parent.parent.postMessage(value, "*");
}Basically: visual sandbox iframe window -> embed report iframe window -> app window.
However, it already looks rather hacky, and they might one day decide to introduce another iframe or remove one, causing this postMessage communication to fail.
The Local Storage API ( https://learn.microsoft.com/en-us/power-bi/developer/visuals/local-storage?tabs=v1 ) might be an alternative for communication, but I haven't tried it yet.
