topic Re: How to add button with click event on popupTemplate in ACGIS JavaScript in ArcGIS JavaScript Maps SDK Questions

How to add button with click event on popupTemplate in ACGIS JavaScript

AbramhumHsu — Fri, 12 Jan 2024 01:27:35 GMT

I meet a problem when trying to add button on popupTemplate in ARCGIS JavaScript;My environment is node.js, and the version of ARCGIS JavaScript is 4.28.
The code snippet is as following:

const popupTemplate = {
title: "{Name}",
content: "{Description}"
}

var graphicID = "testing_1";
const buttonHTML = `<button class="btn btn-danger" onclick="DeleteSelectedDiagram('${graphicID}')">Delete the Diagram</button>`;

graphic = new Graphic({
geometry: new geometry.Polygon({
rings: coordinates,
spatialReference: {
wkid: 3826
},
id:"testing_1"
}),
symbol: {
type: "simple-fill",
color: [255, 0, 0, 0.3], // Red color with 0.3 opacity
outline: {
color: [255, 0, 0], // Red color
width: 1
}
},
attributes: {
Name: "Diagram Infos",
Description: buttonHTML
},
popupTemplate: popupTemplate
});

However, it is not working,the css style of button is disappear and popupTemplate only show the words "Delete the Diagram".
Is there any method to add button with click event to popupTemplate? any instruction is highly appreciated, thanks a lot.

Re: How to add button with click event on popupTemplate in ACGIS JavaScript

UndralBatsukh — Fri, 12 Jan 2024 04:07:51 GMT

Hi there,

Please check out this post as it discusses about adding button to popupTemplate. I have updated the app to work with 4.28: https://codepen.io/U_B_U/pen/KKENPpZ?editors=1000

Re: How to add button with click event on popupTemplate in ACGIS JavaScript

AbramhumHsu — Fri, 12 Jan 2024 07:36:10 GMT

Thanks for your reply, and I have some messing on the code snippet that need to confirm.
The first is what is the type: "custom" and creator use for, And the second is the following, this will cause
invoking popup automatically each time:

reactive.watch(
() => [...view.graphics.toArray()],
(graphics) => {
if (graphics.includes(pointGraphic)) {
view.popup.open({
features: [pointGraphic]
});
}
}
);

I see another code snippet like this:

view.popup.on("trigger-action", function(evt){
if(evt.action.id === "actionA"){
doSomething();
}
else if(evt.action.id === "actionB"){
doSomethingElse();
}
});

what is their difference, and why using features: [pointGraphic], thanks a lot.

Re: How to add button with click event on popupTemplate in ACGIS JavaScript

UndralBatsukh — Fri, 12 Jan 2024 16:06:03 GMT

Hi there,

You can create different elements to be displayed in popupTemplate's content. You can learn more about custom content from here. In this case we are creating a custom content to host the HTML button.

Trigger action is different from opening the popup. Trigger action is an event that fires in response to user clicks an action. This sample shows how to create custom actions for your popupTemplate. The action buttons are displayed like so in the popup.

The codepen was using deprecated method view.popup.open. I have updated the codepen to use MapView.openPopup method. We are passing the features parameter to the openPopup method so that the popup displays the popupTemplate associated with the graphics. Please take a look at the links I included in this response to learn about different parts of working with popup.