Limiting popup link to individual features

1150
7
Jump to solution
11-03-2017 09:13 AM
MarkEastwood
Occasional Contributor II

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. 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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).

View solution in original post

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus

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).

0 Kudos
MarkEastwood
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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);
        }
      },
0 Kudos
MarkEastwood
Occasional Contributor II

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

0 Kudos
MichaelPotter1
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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);
        }
      },
0 Kudos
MichaelPotter1
New Contributor III

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

0 Kudos