Multiple Display Fields for WAB Search Widget

1239
3
06-28-2018 04:39 AM
PatrickMcKinney1
Occasional Contributor III

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.

0 Kudos
3 Replies
DavidMartinez
Esri Regular Contributor

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 

PatrickMcKinney1
Occasional Contributor III

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 || "" 
    };
   })));
}
ScottThomas1
New Contributor III

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.

0 Kudos