topic Re: Enhanced Search: Search Link(s) encoding? in Web AppBuilder Custom Widgets Questions

Enhanced Search: Search Link(s) encoding?

JamesCrandall — Tue, 28 Jan 2020 18:08:23 GMT

WAB Developer 2.7

Enhanced Search 2.7

Just now realizing that the Search Link(s) property of the enhanced search widget is not encoding the url value. Per this image, the {NAME} value would be "STA-5/6" and the resulting clickable link is https://oursite.com/#/sta/STA-5/6 which fails to navigate.

Since the resulting url link in the search widget panel would be literal and not encoded, it does not properly navigate to the destination. The same url link displayed in the popup when hovering over the selected feature is correctly encoded as,

https://oursite.com/#/sta/STA-5%2F6

Re: Enhanced Search: Search Link(s) encoding?

RobertScheitlin__GISP — Tue, 28 Jan 2020 18:24:17 GMT

James,

Correct there is nothing in the widget code that tells it to encode the value of the field. I can fix this for the latest version of eSearch widget.

Re: Enhanced Search: Search Link(s) encoding?

JamesCrandall — Tue, 28 Jan 2020 18:29:52 GMT

Thanks Robert! Is there any patch I can apply quickly? We have a production app that is experiencing this issue.

Re: Enhanced Search: Search Link(s) encoding?

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:00:27 GMT

James,

In the widget.js replace the current _substitute function with this one:

      _substitute: function (string, Attribs, currentLayer, urlEncode) {
        var lfields = this._getFieldsfromLink(string);
        for (var lf = 0; lf < lfields.length; lf++) {
          if (Attribs[lfields[lf]]) {
            var fld = this._getField(currentLayer, lfields[lf]);
            var val;
            if (fld.type === "esriFieldTypeString") {
              if(urlEncode){
                val = encodeURIComponent(lang.trim(Attribs[lfields[lf]]));
              }else{
                val = lang.trim(Attribs[lfields[lf]]);
              }
              string = string.replace(new RegExp('{' + lang.trim(lfields[lf]) + '}', 'g'), val);
            } else {
              if(urlEncode){
                val = encodeURIComponent(Attribs[lfields[lf]]);
              }else{
                val = Attribs[lfields[lf]];
              }
              string = string.replace(new RegExp('{' + lang.trim(lfields[lf]) + '}', 'g'), val);
            }
          }
        }
        return string;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And then search the widget.js for "this._substitute".

OLD CODE

            if (linkFieldNull) {
              link = "";
            } else {
              link = this._substitute(qLinks[a].content, featureAttributes, results);
            }
            var sub = this._substitute(qLinks[a].alias, featureAttributes, results);
            alias = (sub) ? sub : qLinks[a].alias;
            linkicon = this._substitute((qLinks[a].icon || this.folderUrl + 'images/w_link.png'), featureAttributes, results);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and add the fourth parameter like this:

NEW CODE

            if (linkFieldNull) {
              link = "";
            } else {
              link = this._substitute(qLinks[a].content, featureAttributes, results, true);
            }
            var sub = this._substitute(qLinks[a].alias, featureAttributes, results, false);
            alias = (sub) ? sub : qLinks[a].alias;
            linkicon = this._substitute((qLinks[a].icon || this.folderUrl + 'images/w_link.png'), featureAttributes, results, false);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Enhanced Search: Search Link(s) encoding?

JamesCrandall — Tue, 28 Jan 2020 19:02:25 GMT

Big save there Robert. Much appreciated!

...Off to emergency change control I go.