topic Re: Limiting popup link to individual features in Web AppBuilder Custom Widgets Questions

Limiting popup link to individual features

MarkEastwood — Fri, 03 Nov 2017 16:13:18 GMT

I have modified the PopupManager.js in WAB 2.5 to have a link that runs a geoprocessing script when clicked. The issue that I am having now is that the link appears for all features in my map but the geoprocessing script only relates to one feature. I have added a check that throws an error if a user tries to run the link from a incorrect feature but ideally the link wouldn't appear at all. Is there a way to only show the link when a particular feature is selected? I have attached my popupManager.js.

Re: Limiting popup link to individual features

RobertScheitlin__GISP — Fri, 03 Nov 2017 16:51:51 GMT

M E,

Then you want to change how you are doing it. I have made changes where only a certain layer will get the link. You just need to change the layer name to your layers name (line 108).

Re: Limiting popup link to individual features

MarkEastwood — Fri, 03 Nov 2017 19:10:50 GMT

Thank you, Robert. I am noticing some odd behaviour. The feature layer name that I want the link to appear for is 'Bridge'. If I click on a Bridge the link appears but when I click on a bridge a second time two links appear and so on. Then when I start clicking on features that are not Bridges the links appear and are destroyed on every subsequent click.

After first click - on a Bridge

After second click - on a Bridge

After third click - on a feature that is not a Bridge

I added a second html.destroy(actions); line so that the initial link is destroyed when a Bridge is selected for a second time in the _onSetFeatures and things seem to be working now. This is what the _onSetFeatures looks like now:

_onSetFeatures: function(evt){
this.selectedFeature = evt.target.getSelectedFeature();
if(!this.selectedFeature){
return;
}
var actions = query(".action.bridge", this.popupUnion.bigScreen.domNode)[0];
html.destroy(actions);
var selectedFeatureLayer = this.selectedFeature.getLayer();
if(selectedFeatureLayer.name === "Bridges"){
var link = html.create("a", {
"class": "action bridge",
"id": "statsLink",
"innerHTML": "Bridge Report", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".actionList", this.popupUnion.bigScreen.domNode)[0]);

//when the link is clicked register a function that will run
on(link, "click", lang.hitch(this, this.calculateBridgeReport));
}else{
html.destroy(actions);
}
},

Let me know if there is a better way to deal with this issue.

Cheers

Re: Limiting popup link to individual features

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:09:48 GMT

M E,

Here is an update to fix that:

      _onSetFeatures: function(evt){
        this.selectedFeature = evt.target.getSelectedFeature();
        if(!this.selectedFeature){
          return;
        }
        var selectedFeatureLayer = this.selectedFeature.getLayer();
        if(selectedFeatureLayer.name === "TrafficCams"){
          var action = query(".action.bridge", this.popupUnion.bigScreen.domNode)[0];
          if(!action){
            var link = html.create("a", {
              "class": "action bridge",
              "id": "statsLink",
              "innerHTML": "Bridge Report", //text that appears in the popup for the link
              "href": "javascript: void(0);"
            }, query(".actionList", this.popupUnion.bigScreen.domNode)[0]);

            //when the link is clicked register a function that will run
            on(link, "click", lang.hitch(this, this.calculateBridgeReport));
          }
        }else{
          var actions = query(".action.bridge", this.popupUnion.bigScreen.domNode)[0];
          html.destroy(actions);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Limiting popup link to individual features

MarkEastwood — Fri, 03 Nov 2017 19:54:41 GMT

Thanks again Robert. I will mark your initial response as correct

Re: Limiting popup link to individual features

MichaelPotter1 — Wed, 06 May 2020 13:54:35 GMT

Hi there,

So I am trying to accomplish something similar but in my case I have multiple different layers that all have popups enabled but I only want to generate a link for one particular layer (Layer C). I am using the code in this thread to check for the selected features layer name so that it only generates the link for Layer C but if I click in an area with multiple layer popups (Layer A, Layer B and Layer C) then a link for Layer C gets added to all 3 popups since Layer C is technically selected along with Layer A and Layer B. Is there any way to refine this process so that it can check not just the selected feature but the feature that is actively being displayed in the popup?

Any help with this would be greatly appreciated!

Regards,

Mike

Re: Limiting popup link to individual features

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:09:51 GMT

Mike,

I just tested this code in WAB 2.15 and it only adds the link to the trafficCams layer. even if there are other layers selected in the popup.

      _onSelectionChange: function(evt){
        this.selectedFeature = evt.target.getSelectedFeature();
        if(!this.selectedFeature){
          this._disablePopupMenu();
          return;
        }
        this.initPopupMenu([this.selectedFeature]);

        var selectedFeatureLayer = this.selectedFeature.getLayer();
        var hasInfoTemplate = this.selectedFeature.infoTemplate ||
                              (selectedFeatureLayer && selectedFeatureLayer.infoTemplate);
        if(hasInfoTemplate) {
          this._createRelatedRecordsPopupProjector(this.selectedFeature);
        }

        var selectedFeatureLayer = this.selectedFeature.getLayer();
        if(selectedFeatureLayer.name === "TrafficCams"){
          var action = query(".action.bridge", this.popupUnion.bigScreen.domNode)[0];
          if(!action){
            var link = html.create("a", {
              "class": "action bridge",
              "id": "statsLink",
              "innerHTML": "Bridge Report", //text that appears in the popup for the link
              "href": "javascript: void(0);"
            }, query(".actionList", this.popupUnion.bigScreen.domNode)[0]);

            //when the link is clicked register a function that will run
            on(link, "click", lang.hitch(this, function(evt){
              console.info("yah!")
            }));
          }
        }else{
          var actions = query(".action.bridge", this.popupUnion.bigScreen.domNode)[0];
          html.destroy(actions);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Limiting popup link to individual features

MichaelPotter1 — Fri, 08 May 2020 18:10:51 GMT

Hi Robert,

I had this setup within the onSetFeatures function but once I moved it within the onSelectionChange function like you indicated it worked like a charm.

Appreciate your help as always!

Take care,

Mike