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. 

[RobertKirkwood]

I used to be able to add a button to the pop code (see below and attachments). It worked until after ArcGIS API for JavaScript (legacy) 3.36. Anything after that the html tags do not work for buttons, inputs, etc. Is there a different way to do this? 

 countyTemplate = new PopupTemplate ({
                    title: "Counties",
                    description: "<button type='button'onClick=javascript&colon;countyAssessor('{jurisdicti}')>Click for {jurisdicti} County Assessor web page</button>"
                });

[JeffreyWilkerson]

Per this page (https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm ) which is for ArcGIS Online, I wonder if the 'button' tag is no longer accepted as an HTML Element. I was able to get an IMG tag to work by dropping it into some sample code, but not the 'onclick' action yet:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to PopupTemplate | Sample | ArcGIS Maps SDK for JavaScript 4.27
    </title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require([
        "esri/Map",
        "esri/layers/FeatureLayer",
        "esri/views/MapView",
        "esri/widgets/Legend"
      ], (Map, FeatureLayer, MapView, Legend) => {
        // Create the map
        const map = new Map({
          basemap: "gray-vector"
        });

        // Create the MapView
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-73.95, 40.702],
          zoom: 10
        });

        view.ui.add(new Legend({ view: view }), "bottom-left");

        /*************************************************************
         * The PopupTemplate content is the text that appears inside the
         * popup. {fieldName} can be used to reference the value of an
         * attribute of the selected feature. HTML elements can be used
         * to provide structure and styles within the content. The
         * fieldInfos property is an array of objects (each object representing
         * a field) that is use to format number fields and customize field
         * aliases in the popup and legend.
         **************************************************************/

        const template = {
          // autocasts as new PopupTemplate()
          title: "{NAME} in {COUNTY}",
          content: "<img src='https://images.freeimages.com/fic/images/icons/694/longhorn_r2/256/forward_button.png' height='50px;' onlick='javascript&colon;countyAssessor(''{COUNTY}'')>Click for {COUNTY} County Assessor web page'>"
            
          
        };

        // Reference the popupTemplate instance in the
        // popupTemplate property of FeatureLayer
        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
          popupTemplate: template
        });
        map.add(featureLayer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

I wonder if you can just use the Popup 'Actions' and change the icon to be what you want it to be:

https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#actions