Error in Power BI integrate tile documentation

[Roshna]

While going through the process of embedding a Power BI tile in app from the link : Integrate Power BI tile into an app and downloading the sample code from Git I was getting the following null reference error on clicking a Power BI tile to navigate to a report:

0x800a138f - JavaScript runtime error: Unable to get property 'id' of undefined or null reference

As a result of this, I was unable to navigate to the report.

Below is the code snippet for the function from the documentation:

function receiveMessage(event)
{
    if (event.data) {
    try {
        messageData = JSON.parse(event.data);
        if (messageData.event === "tileClicked")
        {
            //Get IFrame source and construct dashboard url
            iFramesrc=document.getElementById(event.srcElement.iframe.id).src;

            //Split IFrame source to get dashboard id
            var dashboardId = iFrameSrc.split("dashboardId=")[1].split("&")[0];

            //Get PowerBI service url
            urlVal = iFrameSrc.split("/embed")[0] + "/dashboards/{0}";
            urlVal = urlVal.replace("{0}", dashboardId);

            window.open(urlVal);
        }
    }
    catch (e) {
        // In a production app, handle exception
    }
}
}

The issue is with the way the source IFrame is being fetched from the DOM. This can be solved by replacing the highlighted line of code with the following statement:

iFramesrc=document.getElementById(event.srcElement.document.activeElement.id).src;

This gets the right DOM element and the navigation to report is successful.

[Anonymous]

Thanks Roshna,

I've passed this along to the writer of that topic.

Take care,

Michele