Multiple Display Fields for WAB Search Widget

Question

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.

GISFunctionalGroup · Answer

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

ScottThomas1 · Answer

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.

pmckinney · Answer

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 || "" }; }))); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍