topic Re: Adding a button to a popup in ArcGIS Web AppBuilder Questions

Adding a button to a popup

Anonymous User — Mon, 23 May 2022 16:02:19 GMT

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.

Re: Adding a button to a popup

JeffreyWilkerson — Mon, 23 May 2022 16:31:58 GMT

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.

Re: Adding a button to a popup

LaurenBoyd — Mon, 23 May 2022 16:38:54 GMT

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!

Re: Adding a button to a popup

Anonymous User — Mon, 23 May 2022 18:17:20 GMT

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?

Re: Adding a button to a popup

Anonymous User — Mon, 23 May 2022 18:50:03 GMT

@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.

Re: Adding a button to a popup

Anonymous User — Mon, 23 May 2022 18:58:20 GMT

@LaurenBoyd

My post above is not a solution 🙂

Re: Adding a button to a popup

RobertScheitlin__GISP — Mon, 23 May 2022 19:15:16 GMT

@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

Re: Adding a button to a popup

Anonymous User — Mon, 23 May 2022 19:22:17 GMT

@RobertScheitlin__GISP

Apologies, I'll ask in the correct space.

Re: Adding a button to a popup

RobertKirkwood — Fri, 23 Jun 2023 14:39:14 GMT

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

Re: Adding a button to a popup

JeffreyWilkerson — Fri, 23 Jun 2023 16:13:59 GMT

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

Re: Adding a button to a popup

RobertKirkwood — Tue, 27 Jun 2023 16:17:49 GMT

Thanks for the information! I did try the Popup Actions. I need to work with it a bit more to get it to work.