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 ?
Solved! Go to 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);
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);
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.
Raviteja Viswanadha The more results HTML can't be customized at this time. It just displays the name of the features in a list.
Thank you Matt. This is helpful.
If searchMoreResultsHtml is showing duplicates, Than you can completely remove if by removing the line
tpl +=</div><div>${searchMoreResultsHtml}</div></div></div>"
Is this also possible when using a PopupTemplate instead of an InfoTemplate? I want to do this but also display a photo.
Thanks
yes. that should work
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", "${*}"),
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>")