Identify widget display field value as a hyperlink

[HelenZhou]

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

[HelenZhou]

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

[RobertScheitlin__GISP]

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.

[HelenZhou]

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

[RobertScheitlin__GISP · Accepted solution]

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.