Popup Panel Widget Customization

[NatashaManzuiga]

Hi all,

I'm trying to set a different behavior of the Popup Panel Widget on map click for each layer.

For a particular layer, I need to retrieve data from a webservice passing a field value as parameter.

Is it right what I'm trying to do or you think I have to move this code somewhere else?
at the moment the line 10 gave me an error:
TypeError: this.own is not a function

startup: function () {
    this.inherited(arguments);        
    var map = this.map;          
    LayerInfos.getInstance(map, map.itemInfo).then(lang.hitch(function(operLayerInfos) {  
    operLayerInfos.getLayerInfoArray().forEach(function(layerInfo) {  
            if (layerInfo.title == 'Map') {  
                var layerId = layerInfo.id;  
                console.log('layer ID = ', layerId);
                var layer = map.getLayer(layerId);
                this.own(on(layer, "click", lang.hitch(this, this.onMapClick)));                
                }
            }    
            );  
        }    
        ));  
    this.displayPopupContent(this.popup.getSelectedFeature());
},

onMapClick: function(event) { 
//I want to disable the normal behavior of the click (retrieve data and populate the Popup Panel widget with my customized content)
  var queryTask = new QueryTask('*Service URL*'); 
  var query = new Query(); 
  query.returnGeometry = true; 
  query.outFields = ['*'];  
  query.geometry = event.mapPoint; 
  queryTask.execute(query, lang.hitch(this, this.showResults)); 

  }, 
showResults: function(results) { 
  var resultItems = []; 
  var resultCount = results.features.length; 
  for (var i = 0; i < resultCount; i++) { 
      var featureAttributes = results.features.attributes; 
      var URL = "theWebServiceUrl" + featureAttributes.NAME; 
    //and I want to pass this URL to call it with through esri/request and retrieve data and then populate the PopUp Panel
      } 
  }

Thanks,

Naty

[NatashaManzuiga]

Many Thanks Robert,
I edited your code as follows:

this.own(on(this.popup, "selection-change", lang.hitch(this, function () {
   var gra = this.popup.getSelectedFeature();
   if (gra){ 
 var layer = gra.getLayer();
 console.info(layer.name);
   //domConstruct.destroy("testnode");
if(layer.name === "Map"){
var URL = "../test.json?" + gra.attributes.NAME;
 console.log("../test.json?" + gra.attributes.NAME);
 var row = domConstruct.toDom('<tr id="testnode"><td>bar</td><td>'+ URL+'</td></tr>');
 domConstruct.place(row, this.actionsListDiv);
return;
}
 }
this.displayPopupContent(this.popup.getSelectedFeature());
})));

It works, but if I make a search through the Search Widget the console says "undefined" at line: "console.info(layer.name);" ..

Thanks again,

Naty

[RobertScheitlin__GISP]

Naty,

  So just check if the layer is not null then (line 5):

this.own(on(this.popup, "selection-change", lang.hitch(this, function () {
  var gra = this.popup.getSelectedFeature();
  if (gra){
    var layer = gra.getLayer();
    if(layer && layer.name === "Map"){
      var URL = "../test.json?" + gra.attributes.NAME;
      console.log("../test.json?" + gra.attributes.NAME);
      var row = domConstruct.toDom('<tr id="testnode"><td>bar</td><td>'+ URL+'</td></tr>');
      domConstruct.place(row, this.actionsListDiv);
      return;
    }
  }
  this.displayPopupContent(this.popup.getSelectedFeature());
})));

[NatashaManzuiga]

Robert, that's fine... but after the search executed by the search widget, the Popup Panel doesnt' show me what I added in this line
var row = domConstruct.toDom('<tr id="testnode"><td>bar</td><td>'+ URL+'</td></tr>'); 
because var layer is undefined and I dont know why...

Thanks,

Naty

[RobertScheitlin__GISP]

Naty,

  I don't know your workflow like you do. You will have to determine some other means of checking if the graphic belongs to your Map layer then. Maybe it has a certain attribute that you can check for to determine if it is the right layer to work with?

[NatashaManzuiga]

Robert, my goal is to add webservice (JSON) data at the Popup Panel.

Now it works fine if I click on the map and I'm able to get a field value and use it as parameter of the webservice (JSON).

But if I make an alphanumerical search by the Search Widget, nothing happens because the handle event inside the Popup Panel
(this.own(on(this.popup, "selection-change"....)

give me back nothing at this line :

this.popup.getSelectedFeature();

Thanks,

Naty

[RobertScheitlin__GISP]

Naty,

So you are saying that you do a search in the search widget and click on a search result and the map displays a popup and zooms the map and the "selection-change" event has a null for this.popup.getSelectedFeature();?

[NatashaManzuiga]

Yes

[RobertScheitlin__GISP · Accepted solution]

Naty,

  The search Widget adds the search result to the maps graphics layer and thus does not have a layer property.

Here is what I think you should do:

this.own(on(this.popup, "selection-change", lang.hitch(this, function () {
          var gra = this.popup.getSelectedFeature();
          if(gra){
            console.info(gra);
            var layer = gra.getLayer();
            if(layer && layer.name === "map"){
              console.info(layer.name);
              var URL = "theWebServiceUrl" + gra.attributes.NAME;
              console.info(URL);
              //this will prevent it from going to the function that displays the popup info
              return;
            }else if(gra.attributes.hasOwnProperty("yourspecificfieldname")){
              var URL2 = "theWebServiceUrl" + gra.attributes.NAME;
              console.info(URL2);
              //this will prevent it from going to the function that displays the popup info
              return;
            }
          }
          this.displayPopupContent(this.popup.getSelectedFeature());
        })));

On line 12 you will have to determine if this is a search result graphic and if so is it one you are interested in. The problem is you are using such a common field name "NAME" so many graphics beside your specific layer use that field name.

[NatashaManzuiga]

PERFECT!!!!!

Thanks, Thanks, Thanks,

Naty

[NatashaManzuiga]

Robert,

Now, I want to modify the default popup on "selection-change" instead of in the popuppanel.

Where should I change the code to capture this event?

Thanks,

Naty