Disable the "Search result" pop up window

2004
9
Jump to solution
03-02-2017 12:56 PM
HlynurIngólfsson
New Contributor III

Hello.

So I am working with the 4.2 API and have a feature search feature in my current project. But I really do not need the automatic "search result" information pop-up to appear, the one that comes after i click on and zoom to my search results to appear (see below):

I however seem not to be able to find out how just to disable it, any suggestion?

I addition then how do I make the default pop-up for the respective layer appear instead of the dreaded "search result" window?

-Hlynur.

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Hlynur,

  You had the popupEnabled property in the wrongs place:

      var searchWidget = new Search({
        view: view,
        allPlaceholder: "Unit name",
        sources: [{
          featureLayer: new FeatureLayer({
            url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Test/FeatureServer",
            popTemplate: {
              title: "{CATEGORY}: {NAME}",
              overwriteActions: true,
            }
          }),
          searchFields: ["Name"],
          suggestionTemplate: "{NAME}, {OPERATION_}",
          excactMatch: false,
          outFields: ["*"],
          name: "Units",
          placeholder: "Type unit name",
          zoomScale: 200000,
          resultSymbol: false
        }],
        popupEnabled: false
      });

Notice I do not have it inside the sources array but as a property on the search widget itself.

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Hlynur,

  See the Search widget help for info on this:

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

It is possible to have popupOpenOnSelect=false but popupEnabled=true so the Popup can be opened by someone but not opened by default.

For the opening the default popup you use code like this:

      searchWidget.on("select-result", function(evt){
        view.popup.open({
          location: evt.result.extent.center,
          features:[evt.result.feature]
        });
      });
0 Kudos
HlynurIngólfsson
New Contributor III

Hey there Robert and thanks for this.

It is however not the popUp for the feature selected from the search that I am trying to disable, its the "search result" window itself. My code for the search tool looks like this:

var searchWidget = new Search({
 view: view,
 allPlaceholder: "Unit name",
 sources: [{
 featureLayer: new FeatureLayer({
 url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Test/FeatureServer",
 popupEnabled: false,
 popupOpenOnSelect: false,
 selecteResults: false,
 popTemplate: {
 title: "{CATEGORY}: {NAME}",
 overwriteActions: false,

But it still keeps on popping up even if I have all these false statements, any suggestions?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Hlynur,

   I would have to see a more complete sample. I just do not see what you are seeing.

0 Kudos
HlynurIngólfsson
New Contributor III

Ok, would you like me to send the whole code or you talking just a screenshot of what my problem is? 

And thanks so much for looking into this with me

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Hlynur,

   It would be best if you can send the code that you are using or even scale it down to remove any of the stuff that is not the problem.

0 Kudos
HlynurIngólfsson
New Contributor III

Thanks again

So here is my code.

Its basically referencing a simple featurelayer that is hosted on my ArcGIS online account, tits not the pop-up itself that is bothering me but the pop-up that appears after I have finished searching that shows up, that one I want to get rid of.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
  />
  <title>Multiple popup elements - 4.2</title>

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

  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: sans-serif;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "esri/widgets/Home",
      "esri/widgets/BasemapToggle",
      "dojo/dom-construct",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer, Search, Home, BasemapToggle, domConstruct) {

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

      var view = new MapView({
        container: "mapDiv",
        map: map,
        center: [-50.969, -14.178],
        zoom: 5,

        popup: {
          dockEnabled: true,
          dockOptions: {
            buttonEnabled: true,
            breakpoint: false
          }
        }
      });

      var featureLayer = new FeatureLayer({
        url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Test/FeatureServer",
        
        popupTemplate: {
          title: "<font color='#008000'>{OPERATION_}: {CATEGORY}",
          content: [{
            type: "text",
            text: "{NAME} <br/ > Installed capacity of {NOMOUTPUT}MW <br /> Annual production of {AVANNUALPR}GWh <br />  Statkraft ownership of {SKOWNERSHI}%"
          }, {
            type: "media",
            mediaInfos: [{
              title: "{NAME}",
              type: "image",
              value: {
                sourceURL: "{PICTURE_UR}"
              }
            }]
            }, {
            type: "attachments"
          }],
          actions: [{
            id: "See-more",
            className: "esri-icon-home",
            title: "Visit homepage"
          }]
        },
        outFields: ["*"]
      });
      
      var searchWidget = new Search({
        view: view,
        allPlaceholder: "Unit name",
        sources: [{
          featureLayer: new FeatureLayer({
            url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Test/FeatureServer",
            popupEnabled: false,
            popTemplate: {
              title: "{CATEGORY}: {NAME}",
              overwriteActions: true,
            }
          }),
          searchFields: ["Name"],
          suggestionTemplate: "{NAME}, {OPERATION_}",
          excactMatch: false,
          outFields: ["*"],
          name: "Units",
          placeholder: "Type unit name",
          zoomScale: 200000,
          resultSymbol: false
        }]
      });
      
      var homeBtn = new Home({
        view: view
      });
      
      var toggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"
      });
      
      var logo = domConstruct.create("img", {
        src: "https://statkraft.maps.arcgis.com/sharing/rest/content/items/b7aae3e22ec944ba9ce15005524ab6e0/data",
        id: "logo",
        title: "logo"
      });
      
      map.add(featureLayer);
      view.then(function() {
        var popup = view.popup;
        popup.viewModel.on("trigger-action", function(event) {
          if (event.action.id === "See-more") {
            var attributes = popup.viewModel.selectedFeature.attributes;
            var info = attributes.TEXT_EN;
            if (info !== null) {
              window.open(info.trim());
            } else {
              window.open("https://ww.google.com/search?q=" +
              attributes.NAME)
            }
          }
        });
        
        view.ui.add(searchWidget, {position: "top-right"});
        view.ui.add(homeBtn, "top-left");
        view.ui.add(toggle, "top-right");
        view.ui.add(logo, "bottom-right");
      });
      
    });
  </script>

</head>

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

</html>
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Hlynur,

  You had the popupEnabled property in the wrongs place:

      var searchWidget = new Search({
        view: view,
        allPlaceholder: "Unit name",
        sources: [{
          featureLayer: new FeatureLayer({
            url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Test/FeatureServer",
            popTemplate: {
              title: "{CATEGORY}: {NAME}",
              overwriteActions: true,
            }
          }),
          searchFields: ["Name"],
          suggestionTemplate: "{NAME}, {OPERATION_}",
          excactMatch: false,
          outFields: ["*"],
          name: "Units",
          placeholder: "Type unit name",
          zoomScale: 200000,
          resultSymbol: false
        }],
        popupEnabled: false
      });

Notice I do not have it inside the sources array but as a property on the search widget itself.

HlynurIngólfsson
New Contributor III

You hit the hammer on the head there Robert! Appreciate it it, thanks.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos