Geoprocessing Link in Popup WAB

[LesiMai3]

Hi,

I'm trying to execute a geoprocessing service via a link in the popup as shown in this sample ArcGIS API for JavaScript Sandbox. Which file do I need to modify in an app built using WAB developer edition to have an additional link shown up in the popup? And is there a way to make the popup stick after the gp service has been successfully run? In the sample, the result flashes on for a few seconds and then disappears.

Any pointers will be greatly appreciated!

Thank you,

Lesi

[RobertScheitlin__GISP · Accepted solution]

Lesi,

   The best place is in the jimu/PopupManager.js file (lines 24 -38):

      _createPopupMenuButton: function(){
        if(this.popupMenuButtonDesktop) {
          html.destroy(this.popupMenuButtonDesktop);
        }
        if(this.popupMenuButtonMobile) {
          html.destroy(this.popupMenuButtonMobile);
        }
        this.popupMenuButtonDesktop = html.create('span', {
          'class': 'popup-menu-button'
        }, query(".actionList", this.popupUnion.bigScreen.domNode)[0]);

        var mobileActionListNode =
          query("div.esriMobileInfoView.esriMobilePopupInfoView .esriMobileInfoViewItem").parent()[0];
        var mobileViewItem = html.create('div', {
            'class': 'esriMobileInfoViewItem'
          }, mobileActionListNode);
        this.popupMenuButtonMobile = html.create('span', {
          'class': 'popup-menu-button'
        }, mobileViewItem);

        on(this.popupMenuButtonMobile, 'click', lang.hitch(this, this._onPopupMenuButtonClick));
        on(this.popupMenuButtonDesktop, 'click', lang.hitch(this, this._onPopupMenuButtonClick));

        var link = html.create("a",{
          "class": "action",
          "id": "statsLink",
          "innerHTML": "Population", //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", this.calculatePopulation);
      },

      calculatePopulation: function(){

      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Be advised that you will have to do more coding to handle mobile popups though.

[LesiMai3]

Thank you so much, Robert! That gives me a good starting point!

[LesiMai3]

Hi Robert! I'm relatively new to JavaScript and have a follow-up question. The sample code uses window.map.infoWindow.getSelectedFeature() to get a hold on the selected feature. I tried to use window.map.popupUnion.bigScreen.selectedFeature() in the calculatePopulation function but I got an error message saying "Cannot read property 'bigScreen' of undefined". How can I achieve something similar as in the sample code?

Lesi

[RobertScheitlin__GISP]

Lesi,

  It would be:

this.popupUnion.bigScreen.selectedFeature();

[LesiMai3]

Thank you for the quick reply, Robert!

I pasted your line in and got an error of "Cannot read property 'bigScreen' of undefined at HTMLAnchorElement.calculatePopulation". Any idea? 

Thank you for your help!

Lesi

[RobertScheitlin__GISP]

Lesi,

   Sounds like your function you are calling is in a different scope then. You need to use lang.hitch.

[LesiMai3]

Thank you so much, Robert!

[LesiMai3]

Hi Robert! Sorry for keep bugging you. I made the changes in popupManager.js and would like to have the new link displayed in your popup panel widget. How should I go about that? 

Thank you!

Lesi

[RobertScheitlin__GISP]

Lesi,

   That is a completely different route. You should start a new question for that.