PopupTemplate FieldInfo with HTML onclick no longer available

YimYean — Fri, 10 Mar 2023 00:14:10 GMT

Hello,

I was originally on 4.11 and updated to 4.26 and noticed that the when displaying field attribute values it no longer renders HTML as expected. I did some Googling and saw that this is expected due to the added sanitize feature. I was able to fix up some of my popup HTML content using CustomContent, but I'm stuck on the FieldInfo portion for FieldsContent.

Below is my sample code. I was able to use CustomContent to display the HTML as expected, but not getting same outcome with Fields for onclick in populationChange function.

<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.26/"></script> <script> function alertTest(e) { e.preventDefault(); alert("test"); } </script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> let populationChange; require([ "esri/Map", "esri/views/MapView", "esri/layers/Layer", "esri/popup/content/FieldsContent", "esri/popup/content/CustomContent", "esri/popup/FieldInfo" ], (Map, MapView, Layer, FieldsContent, CustomContent, FieldInfo) => { const map = new Map({ basemap: "dark-gray-vector" }); // Create the MapView const view = new MapView({ container: "viewDiv", map: map, zoom: 6, center: [-87, 34] }); Layer.fromPortalItem({ portalItem: { // autocasts as new PortalItem() id: "e8f85b4982a24210b9c8aa20ba4e1bf7" } }).then((layer) => { // add the layer to the map map.add(layer); const popupTemplate = { // autocasts as new PopupTemplate() title: "Population in {NAME}", outFields: ["*"], content: populationChange, }; layer.popupTemplate = popupTemplate; function populationChange(feature) { let fieldInfo1 = new FieldInfo({ fieldName: "POP2013", label: "Test HTML", visible: true }); const attributes = feature.graphic.attributes; const fieldDiv = document.createElement("div"); const fieldA = document.createElement("a"); fieldA.href = "https://www.google.com"; fieldA.target = "_blank"; fieldA.innerHTML = "Click me!"; fieldA.onclick = "alertTest(event)"; fieldDiv.appendChild(fieldA); // Tried doing something like this for the field but still no luck //attributes["POP2013"] = fieldDiv.innerHTML; const customDiv = document.createElement("div"); customDiv.innerHTML = "<a target='_blank' href='https://www.google.com' style='color:blue' onclick='alertTest(event)'>Click Me!</a>"; // I also tried just assigning customDiv object but that just renders text [object HTMLDivElement] attributes["POP2013"] = customDiv.innerHTML; let fieldsElement = new FieldsContent({ fieldInfos: [fieldInfo1] }); let customContent = new CustomContent({ creator: customDiv }); return [fieldsElement, customContent]; } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: PopupTemplate FieldInfo with HTML onclick no longer available

JoelBennett — Fri, 10 Mar 2023 17:03:22 GMT

Have you seen this thread? You'll find various proposed solutions to this kind of problem there.

Re: PopupTemplate FieldInfo with HTML onclick no longer available

YimYean — Fri, 10 Mar 2023 17:16:31 GMT

Thank you so much. That was the solution I needed.

topic PopupTemplate FieldInfo with HTML onclick no longer available in ArcGIS JavaScript Maps SDK Questions

PopupTemplate FieldInfo with HTML onclick no longer available

Re: PopupTemplate FieldInfo with HTML onclick no longer available

Re: PopupTemplate FieldInfo with HTML onclick no longer available