topic Re: Custom Link in Local Data Popup Click on the Map in Web AppBuilder Custom Widgets Questions

Custom Link in Local Data Popup Click on the Map

GilbertoMatos — Fri, 11 May 2018 19:43:20 GMT

Hello friends!

I need to include a link to a url from another system, where I need to include a parameter in the url's formation. This parameter appears by default in the data that is in the popup, but I can not find a correct way to search for this information. Another detail is that this link option should appear only for a specific layer, that is, if the user clicks on the active point of another layer, I need to check if the layer he is clicking on is the one that should provide that link with to url. I was able to implement in the file "application folder \ jimu.js \ PopupManager.js", inside the function "_createPopupMenuButton" according to the code that follows just below:

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

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

...

This code only puts the link with the url without the parameter I need, and in addition, displays the option whenever the popup is opened and not only for the layer that I want.

Attached is an example of how it was. I am from Brazil, in the state of Rio Grande do Sul.

Thanks for any help.
Gilberto

Re: Custom Link in Local Data Popup Click on the Map

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:04:54 GMT

Gilberto,

Here is one way you would do that:

Make sure you read my comments in the code for how to add the selected features attribute to the link.

      _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){
        //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();
        if(selFeat && selFeat.getLayer().name === 'TrafficCams'){
          //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();
        //now do something
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Custom Link in Local Data Popup Click on the Map

GilbertoMatos — Mon, 14 May 2018 15:53:18 GMT

Robert,

Worked perfectly. Thanks again for the help. I really would not know how to do it without your help.

Thank you!
Gilberto.