topic Re: Multiple Display Fields for WAB Search Widget in ArcGIS Web AppBuilder Questions

Multiple Display Fields for WAB Search Widget

PatrickMcKinney1 — Sat, 11 Dec 2021 13:36:40 GMT

I was wondering if it is possible to have more than one field, or a combination of multiple fields and strings for the displayField property for the standard search widget for Web AppBuilder? For one of my searches, I would like to include two fields so users would see both the address and municipality for the suggested result, as some addresses are in more than one municipality. This code is from the config_Search.json file in the configs\Search directory of WAB.

Here is the current snippet:

{
 "layerId": null,
 "url": "https://gis.ccpa.net/arcgiswebadaptor/rest/services/Tax_Assessment/Parcels/MapServer/42",
 "name": "Property Address",
 "placeholder": "310 Allen Road",
 "searchFields": [
 "SITUS"
 ],
 "displayField": "SITUS",
 "exactMatch": false,
 "searchInCurrentMapExtent": false,
 "zoomScale": 50000,
 "maxSuggestions": 8,
 "maxResults": 8,
 "type": "query"
 },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I know working with the Leaflet.js library and Esri's geocoder plugin, you can have multiple fields show in the suggested text. So I'm guessing it is possible with the JS API as well.

Re: Multiple Display Fields for WAB Search Widget

DavidMartinez — Thu, 28 Jun 2018 20:50:02 GMT

Hey Pat,

You can use suggestionTemplate property to set this parameter. Unfortunately, it is not supported in the current version of Web AppBuilder. However, if you have the developer edition, you can modify the widget.js for the search widget. You can add the this code after line 328 and before 330 suggestionTemplate: source.suggestionTemplate || "", in the widget.js for search. Then you can add suggestionTemplate: "${SITUS}, ${MUNICIPALITY}", to your config_search.json and it will accomplish the workflow you mentioned above.

Cheers,

David

Re: Multiple Display Fields for WAB Search Widget

PatrickMcKinney1 — Sat, 11 Dec 2021 13:36:42 GMT

David,

Thanks for the advice. It worked, although the line number references didn't match. I'm pasting the code for reference to others:

config_Search.json ([app]/configs/Search]):

{
 "allPlaceholder": "Property Search",
 "showInfoWindowOnSelect": true,
 "sources": [
   {
      "layerId": null,
      "url": "https://[website]/arcgis/rest/services/Tax_Assessment/Parcels/MapServer/0",
      "name": "Property Address",
      "placeholder": "310 Allen Road",
      "searchFields": [
      "SITUS"
      ],
      "displayField": "SITUS",
      "suggestionTemplate": "${SITUS}, ${MUNI_NAME}", 
      "exactMatch": false,
      "searchInCurrentMapExtent": false,
     "zoomScale": 50000,
     "maxSuggestions": 8,
     "maxResults": 8,
     "type": "query"
   },
   {
      // other search fields
   }
]
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.js ([app]/widgets/Search):

// Within _convertConfig, around line 254:
 _convertConfig: function(config) {
   // within else if statement
   else if (source && source.url && source.type === 'query') {
      // within this.own
      this.own(on(searchLayer, 'load', lang.hitch(this, function(results) {
         var convertedSource = {
         featureLayer: flayer,
         outFields: ["*"],
         searchFields: fNames,
         displayField: source.displayField || "",
         exactMatch: !!source.exactMatch,
         name: jimuUtils.stripHTML(source.name || ""),
         placeholder: jimuUtils.stripHTML(source.placeholder || ""),
         maxSuggestions: source.maxSuggestions || 6,
         maxResults: source.maxResults || 6,
         zoomScale: source.zoomScale || 50000,
         infoTemplate: template,
         useMapExtent: !!source.searchInCurrentMapExtent,
        _featureLayerId: source.layerId,
        // allow suggestions to include two fields
        suggestionTemplate: source.suggestionTemplate || "" 
    };
   })));
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Multiple Display Fields for WAB Search Widget

ScottThomas1 — Tue, 09 Apr 2019 19:20:49 GMT

This is very useful. I'm doing a very similar search and this allowed me to view the municipality associated with a tax map number in the suggestions.

Is there a way to get the second field (municipality in this case) to also display in the search results? If a user hits the search button rather than select a suggestion, they currently see the tax map number results with no way to differentiate them based on municipality.

Re: Multiple Display Fields for WAB Search Widget

GISFunctionalGroup — Mon, 26 Jun 2023 10:17:25 GMT

Hi @PatrickMcKinney1 ,

Will it works with the ArcGIS enterprise 11.0 version as well. If it works then kindly post the Path of the Widget.js & config_Search.json .

It would be very much appreciated for your help.

Regards

GIS Functional Group