Hyperlink not clickable with custom visual.

[dhavalu]

Hello,

I am working on creating custom visual which creats simple hyperlink using d3js.

Some how when its clicked it dosent open the browser even though the link has proper href and target tags.

I also tried by giving the column appropriate Data Category of Web Url.

Is this due to any security reasons?

Isnt that possible in custom visual?

[Luisa]

For anyone still searching for the answer to this (as I was), there is a utility in Power BI to do this called Launch URL. You can use it as simply as follows.

.on("click", data => {

     (d3.event as MouseEvent).preventDefault();

     this.host.launchUrl("https://example.com/" + data.<yourField>);

});

Here are the docs about it:

https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/LaunchURL.md

[Sreejith]

The following code worked for me while trying to create a custom visual that have a Resolve link which redirects to an API on click. I used the default YourVisual template and added the link as 

tr.selectAll("td")
.data(d=> d)
.enter().append("td")
.attr('data-th',(d, i) => viewModel.categories[i].value)
.text(d => this.format(d)).append('a')
.attr("href", "https://www.google.com")
.attr("target","_top")
.text(" Resolve");

Hope this helps.

[vincent_1234]

This doesn't work for me (either _top or _blank) in both designer and portal

[vincent_1234]

It is because of sandboxed iframes are blocking this behavior

When clicking hyperlink:

Blocked opening url in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

When embedding in iframe:

Refused to display url in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

[dhavalu]

Hey Vincent, Thanks for the reply.

Is there any alternative to this. How come the exiting table control render link tag when the column is "Web Url"? Any Idea?

Thanks.

[vincent_1234]

I have not found any alternative.

Native visuals can use urls because they are not sandboxed in iframes.

I understand Microsoft does this for safety so improper developed custom visuals can't collide but it would be nice if we wern't limited in functionality.

[dhavalu]

Yes. There are certain restrictions with the desktop version and web version like link, loading scripts etc.

Thanks for the insight.

[dhavalu]

Desktop Power Bi restricts hyperlinks.

Below code works for Power Bi Web.

var val = 'https://powerbi.microsoft.com';

tr.append("td").append("a").attr("href", val).attr("title", val).attr("target", "_blank").text(val);

Make sure that url is valid http or https protocol. Without the protocol the link would try searching within subdomain of https://app.powerbi.com and the page wont get displayed.

Try this out.

[Mcburn]

I got a solution on last Friday 30. Sep 2016.

I try out window.open in the onClick method. 

            bars.on('click', function(d) {
                selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
                    bars.attr({
                        'fill-opacity': ids.length > 0 ? BarChart.Config.transparentOpacity : BarChart.Config.solidOpacity
                    });
                    window.top.location.href = "https://www.google.com";
                    //window.open("https://google.de");
                    d3.select(this).attr({
                        'fill-opacity': BarChart.Config.solidOpacity
                    });
                });

                (<Event>d3.event).stopPropagation();
            });

            bars.exit()
               .remove();

But today i got the sandbox error in my chrome console. Did the Power BI Developer change something on the IFrame?