Search widget transition to components

[JaredPilbeam2]

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?

[JaredPilbeam2]

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

[JaredPilbeam2]

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

[ReneRubalcava · Accepted solution]

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>