Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
Hi everyone,
I am trying to change the default hyperlink click behavior in a table visual.
I am doing it as described here: https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/configure-report-settings#hyperlink...
I am trying to change the behavior from 0 - "Navigate", to 1 - "NavigateAndRaiseEvent " or 2 - "RaiseEvent" with no success.
It continues to behave like "Navigate" is selected. When clicking on a link inside of a table visual in a report a new tab is opened in the browser and the provided URL is opened, but no event is dispatched.
Did any of you try to change the default behavior of a URL in the table visual in a report?
Here is some sample code:
var config = {
....
settings: {
hyperlinkClickBehavior: window['powerbi-client'].models.HyperlinkClickBehavior.RaiseEvent
}
};
var report = powerbi.embed(embedContainer, config);
report.on('dataHyperlinkClicked', function(event) {
console.log('dataHyperlinkClicked', arguments);
});
Solved! Go to Solution.
Hi @egr,
I copied the sample code for Power BI Embedded Playground and add the hyperlink click events. You can replace variables and try it if helps:
// Read embed application token from textbox
var txtAccessToken = 'token';
// Read embed URL from textbox
var txtEmbedUrl = 'url';
// Read report Id from textbox
var txtEmbedReportId = 'id';
// Read embed type from radio
var tokenType = 'type';
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
// 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 config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: models.Permissions.All /*gives maximum permissions*/ ,
viewMode: models.ViewMode.Edit,
settings: {
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
},
hyperlinkClickBehavior: models.HyperlinkClickBehavior.RaiseEvent
}
};
// Get a reference to the embedded report HTML element
var embedContainer = 'container';
// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, config);
// Report.off removes a given event handler if it exists.
report.off("loaded");
// Report.on will add an event handler which prints to Log window.
report.on("loaded", function() {
console.log("Report loaded","Loaded");
});
// Report.off removes a given event handler if it exists.
report.off("rendered");
// Report.on will add an event handler which prints to Log window.
report.on("rendered", function() {
console.log('Event Rendered',"Rendered");
});
report.off("error");
report.on("error", function(event) {
console.log('Error', event.detail);
});
report.on('dataHyperlinkClicked', function(event) {
console.log('dataHyperlinkClicked', event.detail);
});
Regards,
Xiaoxin Sheng
Hello,
Out of curiosity I tried the discussed options and they do not seem to work as per the docs. I wonder if there is something missing and if someone managed to implement this functionality in general or this is an issue with the JS library.
Hi @egr,
I copied the sample code for Power BI Embedded Playground and add the hyperlink click events. You can replace variables and try it if helps:
// Read embed application token from textbox
var txtAccessToken = 'token';
// Read embed URL from textbox
var txtEmbedUrl = 'url';
// Read report Id from textbox
var txtEmbedReportId = 'id';
// Read embed type from radio
var tokenType = 'type';
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
// 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 config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: models.Permissions.All /*gives maximum permissions*/ ,
viewMode: models.ViewMode.Edit,
settings: {
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
},
hyperlinkClickBehavior: models.HyperlinkClickBehavior.RaiseEvent
}
};
// Get a reference to the embedded report HTML element
var embedContainer = 'container';
// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, config);
// Report.off removes a given event handler if it exists.
report.off("loaded");
// Report.on will add an event handler which prints to Log window.
report.on("loaded", function() {
console.log("Report loaded","Loaded");
});
// Report.off removes a given event handler if it exists.
report.off("rendered");
// Report.on will add an event handler which prints to Log window.
report.on("rendered", function() {
console.log('Event Rendered',"Rendered");
});
report.off("error");
report.on("error", function(event) {
console.log('Error', event.detail);
});
report.on('dataHyperlinkClicked', function(event) {
console.log('dataHyperlinkClicked', event.detail);
});
Regards,
Xiaoxin Sheng
HI @HeyYa1,
How you try to remove the 'Prefix' of 'HyperlinkClickBehavior'?
According to the document, it seems to used an enum value and not used the parent parts. You can try to use the below code if it helps:
var config = {
....
settings: {
hyperlinkClickBehavior: HyperlinkClickBehavior.RaiseEvent,
}
};
var report = powerbi.embed(embedContainer, config);
report.on('dataHyperlinkClicked', function(event) {
console.log('dataHyperlinkClicked', event.arguments);
});
Regards,
Xiaoxin Sheng
User | Count |
---|---|
5 | |
4 | |
3 | |
2 | |
2 |
User | Count |
---|---|
8 | |
7 | |
4 | |
4 | |
4 |