Popup Panel Widget Customization

3368
23
Jump to solution
04-21-2016 07:15 AM
NatashaManzuiga
Occasional Contributor

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

23 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Naty,

  That is because line 10 is inside a function that is not scoped:

See line 6 and 13

startup: function () {

    this.inherited(arguments);

     //I don't understand why people add a local var for map when they have access to the map using this.map...

    //var map = this.map;

    LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(function(operLayerInfos) {

    operLayerInfos.getLayerInfoArray().forEach(lang.hitch(this, 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());

},

0 Kudos
NatashaManzuiga
Occasional Contributor

Robert, I made changes and I removed local var "map"

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

      },

It runs without error but onMapClick doesnt run when I click on the map..
I tried to log something:
console.log("onMapClick runs");

but nothing happened...

Naty

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Naty,

  Have you tried a console.info(layer); to be sure that you sound the layer?

0 Kudos
NatashaManzuiga
Occasional Contributor

Robert, I tried with this code:

     startup: function () {

        this.inherited(arguments);   

        var layer,layerId;

        LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(function(operLayerInfos) {

        operLayerInfos.getLayerInfoArray().forEach(lang.hitch(this, function(layerInfo) {

        if (layerInfo.title == 'Map') {

            layerId = layerInfo.id;

            console.log('layer ID = ', layerId); 

        }

        }));     

            } 

       

            )); 

        layer = this.map.getLayer(layerId); 

        console.info(layer);

        this.own(on(layer, "click", lang.hitch(this, this.onMapClick))); 

        this.displayPopupContent(this.popup.getSelectedFeature()); 

      },

console write all the info of the layer...but...nothing happens on onMapClick event...

Thanks,

Naty

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Naty,

  Well I should have asked if that layer is a sublayer of a dynamic map service or is it an actual featurelayer?

0 Kudos
NatashaManzuiga
Occasional Contributor

i has sublayers and i need to use this popup in one of them.

thanks,

Naty

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Naty,

  Then I was wrong you do need to switch back to the map on click instead of the layer as then is nothing to fire a click event for when using a dynamic map service.

0 Kudos
NatashaManzuiga
Occasional Contributor

Robert thanks for your patience with me..

So, what can I do? I can change my Services, too...

Thanks,

Naty

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Naty,

Re-evaluating what your goal is this is actually much simpler than you road we started down. Update this portion of the Widget.js:

this.own(on(this.popup, "selection-change", lang.hitch(this, function () {

          var gra = this.popup.getSelectedFeature();

          var layer = gra.getLayer();

          console.info(layer.name);

          if(layer.name === "map"){

            var URL = "theWebServiceUrl" + gra.attributes.NAME;

            //this will prevent it from going to the function that displays the popup info

            return;

          }

          this.displayPopupContent(this.popup.getSelectedFeature());

        })));