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

[AbramhumHsu]

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.

[UndralBatsukh · Accepted solution]

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

[AbramhumHsu]

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. 

[UndralBatsukh]

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.