Is it possible to edit or customize Search Result Popup, in your webmap? I have a application in which user search for a location, and the search result pop up open, I want to customize that window is it possible, if yes, How can I do that, if no, is ther

DeepakBegrajka1 · ‎01-09-2018

Is it possible to edit or customize Search Result Popup, in your web map? I have an application in which user search for a location, and the search result pop up open, I want to customize that window is it possible, if yes, How can I do that, if no, is there any other way to do it?

DeepakBegrajka1 · ‎01-10-2018

Okay, Thanks

I am looking into it.

RobertScheitlin__GISP · ‎01-10-2018

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

DeepakBegrajka1 · ‎01-29-2018

Hey Robert is there anyway, I can edit search widget?

I want to change the placeholder of the search widget, is there any way to do it?

My current Code:

// Adds the search widget to the top right corner of the view Search widget
search = new Search({
view: view,
popupOpenOnSelect: false,
id: "searchLoc",

});
search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
view.ui.add(search, "top-right"); // Add to the view

Thanks,

Deepak.

RobertScheitlin__GISP · ‎01-29-2018

Deepak,

See this:

https://developers.arcgis.com/javascript/3/jsapi/search-amd.html#allplaceholder

DeepakBegrajka1 · ‎01-29-2018

Thanks for the reply Robert, but the URL you send me is for the Javascript 3.23 version of ArcGIS, and I am using Javascript 4.6 version, can you redirect me to the URL for 4.6 or share some sample code if possible.

Thanks.

RobertScheitlin__GISP · ‎01-29-2018

Deepak,

Here is the same reference for 4.6:

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

      var searchWidget = new Search({
        view: view,
        allPlaceholder: "blah blah",
        popupOpenOnSelect: false
      });

DeepakBegrajka1 · ‎01-29-2018

I have added the line which you send me, but still, it does not change the placeholder text.

RobertScheitlin__GISP · ‎01-29-2018

Deepak,

That is because you have not defined multiple sources in the Search widget so that text is not displayed:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search widget with multiple sources - 4.6</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], function(
      Map,
      MapView,
      Search) {

      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-97, 38], // lon, lat
        scale: 10000000
      });

      var searchWidget = new Search({
        view: view,
        popupOpenOnSelect: false,
        allPlaceholder: "blah blah",
        sources: [{
          featureLayer: {
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ...",
          },
          searchFields: ["DISTRICTID"],
          displayField: "DISTRICTID",
          exactMatch: false,
          outFields: ["DISTRICTID", "NAME", "PARTY"],
          name: "Congressional Districts",
          placeholder: "example: 3708",
        }, {
          featureLayer: {
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0",
          },
          searchFields: ["Name", "Party"],
          suggestionTemplate: "{Name}, Party: {Party}",
          exactMatch: false,
          outFields: ["*"],
          name: "Senators",
        }]
      });

      searchWidget.on('select-result', function(evt) {
        console.info(evt);
        view.popup.open({
          location: evt.result.feature.geometry, // location of the click on the view
          title: "You clicked here", // title displayed in the popup
          content: "This is a point of interest" // content displayed in the popup
        });
      });

      // Add the search widget to the top left corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍