Search multiple sources - Format using infoTemplate for More Search Results

[RavitejaViswanadha1]

While using the Search Multiple Sources widget provided in the ArcGIS API for JavaScript Latest Samples

Search multiple sources | ArcGIS API for JavaScript

In this widget we have an observation on the search results return using the infoTemplate().

Where ever we use the sources as

sources.push({
            featureLayer: new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServe..."),
            searchFields: ["DISTRICTID"],
            displayField: "DISTRICTID",
            exactMatch: false,
            outFields: ["DISTRICTID", "NAME", "PARTY"],
            name: "Congressional Districts",
            placeholder: "3708",
            maxResults: 6,
            maxSuggestions: 6,
            //Create an InfoTemplate and include three fields
            infoTemplate: new InfoTemplate("Congressional District", "District ID: ${DISTRICTID}</br>Name: ${NAME}</br>Party Affiliation: ${PARTY}"),
            enableSuggestions: true,
            minCharacters: 0
         });

In the Line #12  we could see the info template has been configured.

and this going to return us the results in the below format:

and when we customize the Info template as below as

         sources.push({
            featureLayer: new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServe..."),
            searchFields: ["DISTRICTID"],
            displayField: "DISTRICTID",
            exactMatch: false,
            outFields: ["DISTRICTID", "NAME", "PARTY"],
            name: "Congressional Districts",
            placeholder: "3708",
            maxResults: 6,
            maxSuggestions: 6,
            //Create an InfoTemplate and include three fields
            infoTemplate: new InfoTemplate("", ""),
            enableSuggestions: true,
            minCharacters: 0
         });

In the Line #12  we could see the info template has been configured to default which are null.

and this going to return us the results in the below format:

Here my query is can we customize the info Template to show the certain attributes and Show more results as like in the image#2.

So I am expecting the results to be in the below format

DistrictID	Name	Party
3705	Virginia Fox	republican
3706	xxxxx	xxxxx

Where when user clicks on the DistrictID it navigate to the respective district.

Can some one please help in getting this designed ?

Did some one have seen this before ?

Robert Scheitlin, GISP​

TAPAS DAS​

Stan McShinsky​

[MattDriscoll · Accepted solution]

Hello,

yes, this is possible if you modify the default infoTemplate to display your custom attributes as well as have the more results HTML.

default:

infoTemplate: new InfoTemplate(i18n.widgets.Search.main.searchResult, "<div class=\"${searchTheme}\"><div id=\"${searchMoreResultsId}\" class=\"${searchMoreResults}\"><div class=\"${searchMoreResultsItem}\">${searchResult}</div><div>${searchMoreResultsHtml}</div></div></div>")

Modified example:

var tpl = "";
tpl += "<div class=\"${searchTheme}\"><div id=\"${searchMoreResultsId}\" class=\"${searchMoreResults}\"><div class=\"${searchMoreResultsItem}\">";


// table
tpl += "<table>";
tpl += "<thead>";
tpl += "<tr><th><strong>DistrictID<br /></strong></th><th><strong>Name<br /></strong></th><th>";
tpl += "<strong>Party<br /></strong></th></tr>";
tpl += "</thead>";
tpl += "<tbody>";
tpl += "<tr>";
tpl += "<td><strong>${DISTRICTID}</strong></td>";
tpl += "<td>Virginia Fox</td>";
tpl += "<td>";
tpl += "<p>${PARTY}</p>";
tpl += "</td>";
tpl += "</tr>";
tpl += "<tr>";
tpl += "<td><strong>3706</strong></td>";
tpl += "<td>xxxxx</td>";
tpl += "<td>xxxxx</td>";
tpl += "</tr>";
tpl += "</tbody>";
tpl += "</table>";




tpl += "</div><div>${searchMoreResultsHtml}</div></div></div>";

infoTemplate: new InfoTemplate("My Popup", tpl);

[RavitejaViswanadha1]

Thank you @Matt Driscoll . This is helpful.Appreciate your response.

Here I have another Query that Can we customize the ${searchMoreResultsHtml}

As we see that we are showing all the results in tabular format and it gonna duplicate the results as in tabular format and also in the SearchMoreResultsHTML.

[MattDriscoll]

Raviteja Viswanadha​ The more results HTML can't be customized at this time. It just displays the name of the features in a list.

[RavitejaViswanadha1]

Thank you Matt. This is helpful.

[thejuskambi]

If searchMoreResultsHtml is showing duplicates, Than you can completely remove if by removing the line

tpl +=</div><div>${searchMoreResultsHtml}</div></div></div>"

[PaigeKercher]

Is this also possible when using a PopupTemplate instead of an InfoTemplate? I want to do this but also display a photo.

Thanks

[MattDriscoll]

yes. that should work

[SimonFisher]

I also noticed the bad info window with the searchTheme, searchMoreResults junk in it as shown in the 2nd screenshot above when limiting the outfields to certain fields, but setting the infoTemplate to everything.

For example, this shows a bad info window;

outFields: ["PARCELID","WARD"],

infoTemplate: new esri.InfoTemplate("Search Result", "${*}"),

Setting like this works, but has no "Show more results"

outFields: ["*"],

infoTemplate: new esri.InfoTemplate("Search Result", "${*}"),

[MattDriscoll]

Yeah, since those are just attributes of the search results, it will display like that. If you want to use a custom info template, the default info template looks like this:

new InfoTemplate(i18n.widgets.Search.main.searchResult, "<div class=\"${searchTheme}\"><div id=\"${searchMoreResultsId}\" class=\"${searchMoreResults}\"><div class=\"${searchMoreResultsItem}\">${searchResult}</div><div>${searchMoreResultsHtml}</div></div></div>")