topic Re: Popup Panel Widget Customization in Web AppBuilder Custom Widgets Questions

Popup Panel Widget Customization

NatashaManzuiga — Sun, 12 Dec 2021 09:34:14 GMT

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

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:34:17 GMT

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());
},

Re: Popup Panel Widget Customization

NatashaManzuiga — Thu, 21 Apr 2016 14:56:51 GMT

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

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Thu, 21 Apr 2016 15:17:17 GMT

Naty,

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

Re: Popup Panel Widget Customization

NatashaManzuiga — Thu, 21 Apr 2016 17:53:19 GMT

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

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Thu, 21 Apr 2016 18:23:26 GMT

Naty,

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

Re: Popup Panel Widget Customization

NatashaManzuiga — Thu, 21 Apr 2016 19:51:17 GMT

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

thanks,

Naty

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Thu, 21 Apr 2016 20:08:10 GMT

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.

Re: Popup Panel Widget Customization

NatashaManzuiga — Thu, 21 Apr 2016 22:11:26 GMT

Robert thanks for your patience with me..

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

Thanks,

Naty

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:34:20 GMT

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());
        })));

Re: Popup Panel Widget Customization

NatashaManzuiga — Fri, 22 Apr 2016 11:34:28 GMT

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

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:34:23 GMT

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());
})));

Re: Popup Panel Widget Customization

NatashaManzuiga — Fri, 22 Apr 2016 12:42:11 GMT

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

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Fri, 22 Apr 2016 12:52:51 GMT

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?

Re: Popup Panel Widget Customization

NatashaManzuiga — Fri, 22 Apr 2016 13:18:06 GMT

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

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Fri, 22 Apr 2016 13:30:48 GMT

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();?

Re: Popup Panel Widget Customization

NatashaManzuiga — Fri, 22 Apr 2016 13:48:20 GMT

Yes

Re: Popup Panel Widget Customization

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:34:25 GMT

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.

Re: Popup Panel Widget Customization

NatashaManzuiga — Fri, 22 Apr 2016 15:06:29 GMT

PERFECT!!!!!

Thanks, Thanks, Thanks,

Naty

Re: Popup Panel Widget Customization

NatashaManzuiga — Wed, 27 Jul 2016 09:21:36 GMT

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

	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());

	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());
	})));