Search widget transition to components

JaredPilbeam2 — Wed, 09 Apr 2025 20:27:25 GMT

After finding out about the transition to components, I'm wondering how I should proceed with the search widget? I'm about to build an app template (that will be followed by many) that includes searching a feature layer. As of now that's only possible with the widget as far as I can tell?

Re: Search widget transition to components

JaredPilbeam2 — Wed, 09 Apr 2025 20:43:36 GMT

Apologies, I think I've found the right documentation. Sometimes it's hard to know where to look.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#sources

Re: Search widget transition to components

JaredPilbeam2 — Wed, 09 Apr 2025 20:55:41 GMT

I take it back. This components page takes me to that widgets page... confusing.

Re: Search widget transition to components

ReneRubalcava — Thu, 10 Apr 2025 14:32:20 GMT

Since we have both the component and widget, the doc is pretty much the same for properties, so it's not copied between one and the other. The sources behave the same way. Here is a demo that updates the Search multiple sources sample to components.

https://codepen.io/odoe/pen/azbgEmB?editors=1000

<arcgis-map basemap="dark-gray" center="-97,38" scale="10000000" all-placeholder="District or Senator" include-default-sources-disabled> <arcgis-search></arcgis-search> </arcgis-map> <script type="module"> const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js"); const searchElement = document.querySelector("arcgis-search"); const featureLayerDistricts = new FeatureLayer({ url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_117th_Congressional_Districts_all/FeatureServer/0", popupTemplate: { title: "Congressional District {DISTRICTID} </br>{NAME}, ({PARTY})", overwriteActions: true } }); const featureLayerSenators = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators_2020/FeatureServer/0", popupTemplate: { title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ", overwriteActions: true } }); searchElement.sources = [{ layer: featureLayerDistricts, searchFields: ["DISTRICTID"], displayField: "DISTRICTID", exactMatch: false, outFields: ["DISTRICTID", "NAME", "PARTY"], name: "Congressional Districts", placeholder: "example: 3708" }, { layer: featureLayerSenators, searchFields: ["Name", "Party"], suggestionTemplate: "{Name}, Party: {Party}", exactMatch: false, outFields: ["*"], placeholder: "example: Casey", name: "Senators", zoomScale: 500000, resultSymbol: { type: "picture-marker", url: "https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-multiplesource/live/images/senate.png", height: 36, width: 36 } }, { name: "ArcGIS World Geocoding Service", placeholder: "example: Nuuk, GRL", apiKey: "%YOUR_ACCESS_TOKEN%", singleLineFieldName: "SingleLine", url: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer" } ]; </script>

topic Re: Search widget transition to components in ArcGIS JavaScript Maps SDK Questions

Search widget transition to components

Re: Search widget transition to components

Re: Search widget transition to components

Re: Search widget transition to components