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?

ReneRubalcava

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>