topic Re: Identify widget display field value as a hyperlink in Web AppBuilder Custom Widgets Questions

Identify widget display field value as a hyperlink

HelenZhou — Thu, 13 Sep 2018 21:53:38 GMT

I am trying to customize Robert Scheitlin's identify widget so that so that the identify result shows field value as a hyperlink if the field value is a url.

Here is what I add in the showIdentifyResults module in the widget.js after line 1297 ( I am using widget version 2.7)

     content = content + this.resultFormatString.replace('[attribname]', fld).replace('[attribvalue]', value);
    /////////customize to create a hyper link for a field if the value is a url. Field value start with http or https
      if (value.search("http:") == 0 || value.search("https:") == 0) {
       content.replace(value, '<a href="' + value + '">open link</a>');

}

The "content" doesn't change. Anybody has done that before?

Thanks

Helen

Re: Identify widget display field value as a hyperlink

AdrianWelsh — Thu, 13 Sep 2018 23:01:06 GMT

Helen,

When you put in that code, what does the popup show when you click on it? Are you at least seeing the words "open link" in your popup? Or is it something else (like the unclickable hyperlink? Is there a way to verify that the code is working by having it throw that variable into some kind of text to show that "open link" is the correct text and that it has the associated hyperlink with it?

Also, in your logical statement of checking for http: or https:, maybe you could just check for "http" since that would grab both cases and would cut down on any potential logical issues. So, this:

if (value.search("http") == 0) {
content.replace(value, '<a href="' + value + '">open link</a>');

}

Re: Identify widget display field value as a hyperlink

HelenZhou — Fri, 14 Sep 2018 12:47:04 GMT

Adrian,

I don't see "open link" anywhere in the identify pop up. It doesn't seem to work after the content.replace statement.

Thanks

Helen

Re: Identify widget display field value as a hyperlink

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:10:54 GMT

Helen,

I have never used "search" I always use indexOf

    content = content + this.resultFormatString.replace('[attribname]', fld).replace('[attribvalue]', value);
    /////////customize to create a hyper link for a field if the value is a url. Field value start with http or https
    if (value.indexOf("http") == 0) {
      content.replace(value, "<a href='" + value + "'>open link</a>");
    }‍‍‍‍‍‍‍‍‍‍

Re: Identify widget display field value as a hyperlink

HelenZhou — Fri, 14 Sep 2018 13:26:01 GMT

Hello Robert,

I have changed from "search" to "replace", it still not working. Any idea?

Thanks

Helen

Re: Identify widget display field value as a hyperlink

RobertScheitlin__GISP — Fri, 14 Sep 2018 13:31:14 GMT

Helen,

That is not what I said. I said replace search with indexOf

Re: Identify widget display field value as a hyperlink

HelenZhou — Fri, 14 Sep 2018 13:42:15 GMT

I am sorry, Robert. Typo - I did change search with indexOf. The code still not does anything to replace the url with "open link"

Re: Identify widget display field value as a hyperlink

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:10:57 GMT

Helen,

It could be a Case issue then try this:

content = content + this.resultFormatString.replace('[attribname]', fld).replace('[attribvalue]', value);
    /////////customize to create a hyper link for a field if the value is a url. Field value start with http or https
    if (value.toLowerCase().indexOf("http") > -1) {
      content.replace(value, "<a href='" + value + "'>open link</a>");
    }‍‍‍‍‍

Re: Identify widget display field value as a hyperlink

HelenZhou — Fri, 14 Sep 2018 14:44:10 GMT

Thanks Robert. It is not a case issue. But it is always a good idea to consider the case when compare strings

I am able to see the code is executed in the Chrome debugger. But after the code is executed, the "content" string doesn't change.

Re: Identify widget display field value as a hyperlink

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:10:59 GMT

So are you sure that you are getting inside the if condition? Maybe try this:

if (value.toLowerCase().indexOf("http") > -1) {
  value = "<a href='" + value + "'>open link</a>");
}
content = content + this.resultFormatString.replace('[attribname]', fld).replace('[attribvalue]', value);
    ‍‍‍‍‍

Re: Identify widget display field value as a hyperlink

HelenZhou — Fri, 14 Sep 2018 15:14:06 GMT

Hello Robert,

After applying your latest the code suggestion, the content is changed. But the identified panel doesn't render the hyper link - but the source code. Thanks

Re: Identify widget display field value as a hyperlink

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:11:02 GMT

Helen,

in the List.js find and this

attTitle.textContent = attTitle.innerText = attValArr[0].replace(/<[\/]{0,1}(em|EM|strong|STRONG|font|FONT|u|U)[^><]*>/g, "";‍

and replace with:

attTitle.textContent = attTitle.innerText = attValArr[0].replace(/<[\/]{0,1}(em|EM|strong|STRONG|font|FONT|u|U)[^><]*>/g, "") + ": ";‍

Then find:

          if (attValArr[1] === 'null') {
            attVal.textContent = attVal.innerText = ": ";
          } else {
            attVal.textContent = attVal.innerText = ": " + attValArr[1].replace(/<[\/]{0,1}(em|EM|strong|STRONG|font|FONT|u|U)[^><]*>/g, "");
          }
          domConstruct.place(attTitle, label);
          domConstruct.place(attVal, label);
          domConstruct.place(label, div);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and replace with:

          if (attValArr[1] === 'null') {
            attVal.textContent = attVal.innerText = ": ";
            domConstruct.place(attTitle, label);
            domConstruct.place(attVal, label);
          } else {
            var innerCont = domConstruct.toDom(attValArr[1].replace(/<[\/]{0,1}(em|EM|strong|STRONG|font|FONT|u|U)[^><]*>/g, ""));
            domConstruct.place(attTitle, label);
            domConstruct.place(innerCont, label);
          }
          //domConstruct.place(attTitle, label);
          //domConstruct.place(attVal, label);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
          domConstruct.place(label, div);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the Widget.js replace your if statement with this:

if (value.toLowerCase().indexOf("http") > -1) {
  value = "<a href='" + value + "' target='_blank'>" + value + "</a>";
}‍‍‍

The target _blank is the important part.

Re: Identify widget display field value as a hyperlink

HelenZhou — Fri, 14 Sep 2018 20:44:43 GMT

Hello Robert,

I have applied the codes. It works. To make the field value short, I change the code to

   if (value.toLowerCase().indexOf("http") > -1) {
                        value = "<a href='" + value + "' target='_blank'>" + "Open Link" + "</a>";
                    }

I will do more testing, making sure other functions in the identify widget will stay functional.

Thanks so much for helping.

Helen

Re: Identify widget display field value as a hyperlink

RobertScheitlin__GISP — Fri, 14 Sep 2018 20:57:56 GMT

Your welcome. Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.