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

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
HeyYa1
New Member

Issue with hyperlink click behavior

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);
            }); 

 

1 ACCEPTED SOLUTION
Anonymous
Not applicable

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

View solution in original post

3 REPLIES 3
egr
New Member

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.

Anonymous
Not applicable

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

Anonymous
Not applicable

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

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.