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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Yaostha
Helper II
Helper II

dataSelected event not firing in IE

Hi,

   I am using below code to embed report.

 

var pbiconfig = {
type: 'report',
tokenType: models.TokenType.Aad,
accessToken: config.authToken,
embedUrl: embedUrl,
id: config.dashboardId,
pageView: 'fitToWidth',
pageName: 'Profile',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
var pbiconfigmessage = JSON.stringify(pbiconfig);


// Get a reference to the embedded dashboard HTML element
var dashboardContainer = $('#divDashBoardContainer')[0];

// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, pbiconfig);

var $dataSelectedContainer = $("#dataSelectedContainer");
//dashboard.off("rendered");

// dashboard.on("rendered", function (event) {
// alert("rendered!");
//});

dashboard.off("dataSelected");
dashboard.on("dataSelected", function (e) {
alert("dataSelected!");
var data = event.detail;
alert(data);
// JSON.stringify(data);
$dataSelectedContainer.text(JSON.stringify(data, null, ' '));
});

 

This code is working fine in Chrome but in our IE the dataSelected event is not firing.

My IE version 11 on Windows 7 machine. 

The page has <meta http-equiv="X-UA-Compatible" content="IE=edge" /> already.

 

Regards,

Yasotha

 

4 REPLIES 4
v-jiascu-msft
Employee
Employee

Hi Yasotha,

 

I tested it with almost the same code as yours. It worked fine in IE 11. 

1. Doesn't it work completely or partially? Was there an alert message?

2. Are your codes the same in your application? Or you abstract parts from many places?

3. Were there any warning messages in the IE?

 

Please refer to the attachment which can work.

 

Best Regards,

Dale

 

 

Community Support Team _ Dale
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Attached is my complete code.

when i was not adding reference to promise scripts, it was not working.

 

 

<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="~/js/adal.js"></script>
<script src="~/js/powerbi.js"></script>

<script type="text/javascript">
(function () {

"use strict";
$(document).attr("title", "Profile");


var subscriptionId = 'xyz.onmicrosoft.com';

// Copy the client ID of your AAD app here once you have registered one, configured the required permissions, and
// allowed implicit flow https://msdn.microsoft.com/en-us/office/office365/howto/get-started-with-office-365-unified-api
var clientId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
var config = {
subscriptionId: subscriptionId,
clientId: clientId,
postLogoutRedirectUri: window.location.origin,
resource: 'https://analysis.windows.net/powerbi/api',
prompt: 'none',
cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
embedUrlBase: 'https://app.powerbi.com/reportEmbed',
dashboardId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
response_type:'id_token'
};


// AuthenticationContext is coming from ADAL.min.js
var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);

authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

// If not logged in force login
var user = authContext.getCachedUser();

if (!user) {
//alert('user login required');
authContext.login();
//alert('user login completed');
}

// Acquire token for resource.
authContext.acquireToken(config.resource, function (error, token) {
/// debugger;
if (error) {
console.log('ADAL error occurred: ' + error);
}
if (!token) {
console.log('token is null');
}
// Store our token
config.authToken = token;

$(document).ready(function () {

var models = window['powerbi-client'].models;
//debugger;
// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
//var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=guidofreport&groupId=guidofgroup';
//var embedUrl = 'https://app.powerbi.com/dashboardEmbed?dashboardId=guidofdashboard&groupId=guidofgroup';
// var embedUrl = "https://app.powerbi.com/dashboardEmbed?dashboardId="+ config.dashboardId +"&groupId="+ config.groupId;
var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId='+config.dashboardId;
// alert(embedUrl);
var pbiconfig = {
type: 'report',
tokenType: models.TokenType.Aad,
accessToken: config.authToken,
embedUrl: embedUrl,
id: config.dashboardId,
pageView: 'fitToWidth',
pageName: 'Profile',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
var pbiconfigmessage = JSON.stringify(pbiconfig);


// Get a reference to the embedded dashboard HTML element
var dashboardContainer = $('#divDashBoardContainer')[0];

// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, pbiconfig);

var $dataSelectedContainer = $("#dataSelectedContainer");
//dashboard.off("rendered");

// dashboard.on("rendered", function (event) {
// alert("rendered!");
//});

dashboard.off("dataSelected");
dashboard.on("dataSelected", function (e) {
// alert("dataSelected!");
var data = event.detail;
// alert(data);
// alert(JSON.stringify(data));
$dataSelectedContainer.text(JSON.stringify(data));
});

});

});
})();

</script>

<div id="divDashBoardContainer" style="height:758px;"></div>
<pre id="dataSelectedContainer">
</pre>

hi 

   its part of the code i shared you but that is main in embed.

 

However i noticed i was getting Promise is undefined error in my IE (using developer tool i found).

 

I added CDN reference to promise script and tested. it seems to be working, however i will do complete testing and get back.

 

thanks for your quick reference.

 

I added CDN links as below immediately after my jquery script link and before my link adal.js and powerbi.js

 

<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> 

https://github.com/stefanpenner/es6-promise

Yaostha
Helper II
Helper II

 

@v-jiascu-msft, do you have any idea about this?

I referred this, https://microsoft.github.io/PowerBI-JavaScript/demo/dataselection.html even this is not working in IE.

 

Regards,

yasotha

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.

RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.