Adding a button to a popup

[Anonymous User]

What is the best way to add a button to the popup? I need a button that calls a function in the popup.

Something similar to the "Zoom To" button or the same. 

[JeffreyWilkerson]

Per the Esri example of a 'Popup with Edit Action' (https://developers.arcgis.com/javascript/latest/sample-code/popup-editaction/ ), you should start by creating the object that will show up on the popup:

const editThisAction = {
    title: "Edit",
    id: "edit-this",
    className: "esri-icon-edit"
};

Then add it to the 'actions' setting in your featureLayer template:

const myTemplate = {
    title: "My Template: <font style='color: #A9C332;'>{Field1}</font>",
    fieldInfos: [
        { fieldName: "Field1", label: "Field1" },
        { fieldName: "Field2", label: "Field2" }
    ],
    outFields: ["*"],
    actions: [editThisAction]
};

Connect the template to your featureLayer:

const theLayer = new FeatureLayer({
    url: theURL,
    outFields: ["*"],
    popupTemplate: theTemplate,
    id: "theLayer",
    title: "The Layer"
});

And finally, make sure to handle the 'trigger-action' event:

view.when(function () {
    // Event handler that fires each time an action is clicked
    view.popup.on("trigger-action", function (event) {
        if (event.action.id === "edit-this") {
            // Attach to a function that does what you want
            //editThis();
        }   
    }     
});

The only problem with the Esri sample is that they have gone to a Calcite rendition of the Editor, which makes it impossible now to figure out the Dom attachment point on the Editor widget.  I created a ticket with Esri support but they seem to have moved on to more important things.  The functionality to create an extra button and perform an action with it's click on the Popup works well though. If you want to use the functionality to add a button to the Editor you need to use version 4.22 or earlier.

[Anonymous User]

The thing is, my current popup is generated out of the box. I have not edited it what so ever and is shows most of the stuff I need. 

Here's what the code looks like

this._mapMobileInfoWindow =
new Popup(null, html.create("div", null, null, this.map.root));

and it generates this

Is there a way to add a button without editing the title or making other changes?

[LaurenBoyd]

Hi @Anonymous User -

It looks like you may be using 3.x? If so, you can add a custom action on the Popup using the addActions method. Check out this example: https://codepen.io/laurenb14/pen/qBxPWmK?editors=1000

If using 4.x, you can also add custom actions to the popup. This sample shows how to add your own actions: https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/ 

Hope this helps!

[Anonymous User]

@LaurenBoyd 

I am trying to edit the Popup in the resetInfoWindow and from what I have figured out I cannot add a button here. Is there a way to add a custom action here:

resetInfoWindow: function(isNewMap) {
          if (isNewMap) {

          this._mapInfoWindow = this.map.infoWindow;
          if(this._mapMobileInfoWindow){
            this._mapMobileInfoWindow.destroy();
            // working around for bug of destroying _mapMobileInfoWindow is not completely.
            query("div.esriMobileInfoView.esriMobilePopupInfoView").forEach(function(node){
              html.destroy(node);
            });
            query("div.esriMobileNavigationBar").forEach(function(node){
              html.destroy(node);
            });
            }
          this._mapMobileInfoWindow =
          new Popup(null, html.create("div", null, null, this.map.root));
          this.isMobileInfoWindow = false;
        }
        if (jimuUtils.inMobileSize() && !this.isMobileInfoWindow) {
          this.map.infoWindow.hide();
          this.map.setInfoWindow(this._mapMobileInfoWindow);
          this.isMobileInfoWindow = true;
        } else if (!jimuUtils.inMobileSize() && this.isMobileInfoWindow) {
          this.map.infoWindow.hide();
          this.map.setInfoWindow(this._mapInfoWindow);
          this.isMobileInfoWindow = false;
        }
      }

I already have all of the correct attributes for the Popup in this.map.root 

this._mapMobileInfoWindow =
new Popup(null, html.create("div", null, null, this.map.root));

and if there's a way to add a custom action button here, it'd be great.

[Anonymous User]

@LaurenBoyd 

My post above is not a solution 🙂

[RobertScheitlin__GISP]

@Anonymous User  You need to post questions that are specific to WAB in the WAB space (you are currently posting to the Javascript API community)

https://community.esri.com/t5/arcgis-web-appbuilder-questions/bd-p/arcgis-web-appbuilder-questions

If you search that community in in GeoNet then you would find these two posts that answer your question. 

Read the whole threads. One starts out thanking about a very old version of WAB but then get more current.

https://community.esri.com/t5/arcgis-web-appbuilder-questions/add-button-to-info-window-pop-up/m-p/120461

https://community.esri.com/t5/web-appbuilder-custom-widgets-questions/custom-link-in-local-data-popup-click-on-the-map/m-p/791733#M4217

[Anonymous User]

@RobertScheitlin__GISP 

Apologies, I'll ask in the correct space.