topic Re: Search multiple sources - Format using infoTemplate for More Search Results in ArcGIS JavaScript Maps SDK Questions

Search multiple sources - Format using infoTemplate for More Search Results

RavitejaViswanadha1 — Fri, 10 Dec 2021 20:48:31 GMT

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/FeatureServer/0"),
            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/FeatureServer/0"),
            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

DistrictID

Name

Party

3705

Virginia Fox

republican

3706

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

Re: Search multiple sources - Format using infoTemplate for More Search Results

MattDriscoll — Fri, 10 Dec 2021 20:48:33 GMT

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);

Re: Search multiple sources - Format using infoTemplate for More Search Results

RavitejaViswanadha1 — Wed, 01 Jul 2015 18:20:34 GMT

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.

Re: Search multiple sources - Format using infoTemplate for More Search Results

MattDriscoll — Wed, 01 Jul 2015 18:26:58 GMT

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

Re: Search multiple sources - Format using infoTemplate for More Search Results

RavitejaViswanadha1 — Wed, 01 Jul 2015 18:28:19 GMT

Thank you Matt. This is helpful.

Re: Search multiple sources - Format using infoTemplate for More Search Results

thejuskambi — Wed, 01 Jul 2015 19:03:13 GMT

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

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

Re: Search multiple sources - Format using infoTemplate for More Search Results

PaigeKercher — Thu, 30 Jul 2015 15:36:13 GMT

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

Thanks

Re: Search multiple sources - Format using infoTemplate for More Search Results

MattDriscoll — Thu, 30 Jul 2015 15:50:13 GMT

yes. that should work

Re: Search multiple sources - Format using infoTemplate for More Search Results

SimonFisher — Tue, 12 Apr 2016 19:26:03 GMT

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", "${*}"),

Re: Search multiple sources - Format using infoTemplate for More Search Results

MattDriscoll — Tue, 12 Apr 2016 20:36:19 GMT

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>")