Select to view content in your preferred language

PopupTemplate FieldInfo with HTML onclick no longer available

651
2
Jump to solution
03-09-2023 04:14 PM
YimYean
Emerging Contributor

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.

YimYean_1-1678406825562.png

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>

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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

View solution in original post

2 Replies
JoelBennett
MVP Regular Contributor

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

YimYean
Emerging Contributor

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

0 Kudos