topic Re: Hyperlink not clickable with custom visual. in Developer

Hyperlink not clickable with custom visual.

dhavalu — Tue, 31 May 2016 12:31:33 GMT

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?

Re: Hyperlink not clickable with custom visual.

vincent_1234 — Tue, 31 May 2016 13:29:05 GMT

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'.

Re: Hyperlink not clickable with custom visual.

dhavalu — Wed, 01 Jun 2016 08:20:11 GMT

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.

Re: Hyperlink not clickable with custom visual.

vincent_1234 — Wed, 01 Jun 2016 09:27:38 GMT

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.

Re: Hyperlink not clickable with custom visual.

dhavalu — Thu, 02 Jun 2016 06:19:28 GMT

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

Thanks for the insight.

Re: Hyperlink not clickable with custom visual.

Sreejith — Thu, 02 Jun 2016 07:21:02 GMT

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.

Re: Hyperlink not clickable with custom visual.

vincent_1234 — Thu, 02 Jun 2016 07:45:33 GMT

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

Re: Hyperlink not clickable with custom visual.

dhavalu — Mon, 06 Jun 2016 06:39:13 GMT

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.

Re: Hyperlink not clickable with custom visual.

Mcburn — Tue, 04 Oct 2016 08:39:47 GMT

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?

Re: Hyperlink not clickable with custom visual.

Luisa — Thu, 22 Feb 2018 23:13:27 GMT

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