Select to view content in your preferred language

Adding a button or a link to the Popup

1021
9
05-23-2022 12:47 PM
by Anonymous User
Not applicable

I am trying to add a button or a link to the popup that will do a custom action. As I have been directed to other questions, I did something like this

_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]);

          on(this.popupUnion.bigScreen, 'set-features, selection-change', lang.hitch(this, this._addPopupLink));

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

        _addPopupLink: function (evt) {
            console.log("created a popup link");
          ////if the link is added to the popup remove it.
          if (query(".action.action-relatorio", this.popupUnion.bigScreen.domNode)[0]) {
              html.destroy(query(".action.action-relatorio", this.popupUnion.bigScreen.domNode)[0]);
          }
          //get the popups selected feature
          //now that you have the slected feature you have access to its
          //attributes that you can add to the hrefs link
            var selFeat = this.popupUnion.bigScreen.getSelectedFeature();
            console.log("selFeat", selFeat);
              //Create link
              var linkRelatorio = html.create("a", {
                  "class": "action action-relatorio",
                  "id": "actionRelatorio",
                  "innerHTML": "Abrir Relatório",
                  "href": "localhost/SigFepamRelatorios/Relatorio.aspx?idRelatorio=1&atanId=",
                  "target": "_blank"
              }, query(".actionList", this.popupUnion.bigScreen.domNode)[0]);
              on(linkRelatorio, "click", this._onActionRelatorio);
        },

          _onActionRelatorio: function (evt) {
              var selFeat = this.popupUnion.bigScreen.selectedFeature();
            //TO DO
          },

but so far, I cannot see a button. I cannot even log the console.log on line 28 & line 37. Any pointers on what the issue could be?

0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Emeritus

If you want to see these changes in an existing app you have created then you have to make these changes to the PopupManager.js file in the app folder that you are working with (Not the client/stemApp folder).

0 Kudos
by Anonymous User
Not applicable

@RobertScheitlin__GISP 

Meaning PopupManager.js in the jimu.js folder?

NovicaJ_0-1653335957459.png

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Yes. For example if you are working with the 4 app in your WAB (you can see this by looking that the url of your WAB app), then it would be [WAB Install Dir]\server\apps\4\jimu.js\PopupupManger.js

0 Kudos
by Anonymous User
Not applicable

I have already created my WAB and I downloaded it. Afterwards I implemented it in a MVC structure. 

So now, I run my .NET web application and it works fine.

If I get you correctly, I need to go back to the WAB and edit the PopupManager.js?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Your case is pretty unusual. I have not direct experience in that type of workflow. But you mentioned that you developed the app in WAB and downloaded it so normally that means the code in minified/uglified. So changes to code become quite difficult. So yes going back to your original WAB app and making these changes would be best.

0 Kudos
by Anonymous User
Not applicable

I have made the changes you have suggested and in my WAB, I can see the changes

NovicaJ_0-1653340766459.png

but when I download the WAB app, the Gallery button is not there.

NovicaJ_1-1653340906241.png

 

Any ideas as to why?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

When you download the app does the zip file have todays date in it's attributes?

0 Kudos
by Anonymous User
Not applicable

Yes, the date is correct. Though the hour seems two hours late.

I have downloaded the WAB app at 11:30pm and when I extract it locally it says 09:30pm.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

go to your server directory and then apps and then zips and delete all files (zips) in that folder then download again and test.

0 Kudos