Issue in PopupTemplate Content 4.14

7146
11
Jump to solution
01-02-2020 02:01 AM
MatthieuThery1
Occasional Contributor

Hi,

It seems I am now unable to set a class/id etc to a div using the content properties of the popuptemplate. It used to work fine in the 4.13. It's pretty annoying as it means we can't style our popups like we used to and have to keep using 4.13. 

Is there a workaround, or a reason why it changed?

Below is a Pen built using one of the API sample. As you can see the class property doesn't come through. If you switch back to 4.13, then it does.

https://codepen.io/mtrsklnkvMM/pen/rNaGEYo 

Tags (1)
1 Solution

Accepted Solutions
MattDriscoll
Esri Contributor

Hello,

In 4.14, we are using a HTML sanitizer (https://github.com/Esri/arcgis-html-sanitizer) which removes some HTML for security purposes. We may be able to do something for this in 4.15.

As an alternative workaround to a HTML string, you can do the following to modify a dom node directly.

var template = {
  content: function(){
    var div = document.createElement("div");
    div.className = "myClass";
    div.innerHTML = "<span>My custom content!</span>";
    return div;
  }
};

View solution in original post

0 Kudos
11 Replies
RobertScheitlin__GISP
MVP Emeritus

Matthieu,

  Seems like 4.14 has some popup widget content issues. If you use the https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=popuptemplate-... sample it no longer renders svg either. Best to report your bug to esri tech support.

0 Kudos
JackFairfield
Occasional Contributor II

I noticed the same issue.  Please let me know if you end up reporting your bug.  Otherwise, I'll report to tech support.  Thanks.

0 Kudos
MattDriscoll
Esri Contributor

Hello,

In 4.14, we are using a HTML sanitizer (https://github.com/Esri/arcgis-html-sanitizer) which removes some HTML for security purposes. We may be able to do something for this in 4.15.

As an alternative workaround to a HTML string, you can do the following to modify a dom node directly.

var template = {
  content: function(){
    var div = document.createElement("div");
    div.className = "myClass";
    div.innerHTML = "<span>My custom content!</span>";
    return div;
  }
};
0 Kudos
JackFairfield
Occasional Contributor II

Thanks for the reply.  This workaround seems to work ok for my use case.  It would have been nice to have this included in the Release Notes (Breaking Changes)

MatthieuThery1
Occasional Contributor

Hi,

The workaround seems to work for me too. I'll mark the answer as correct.

Using react components to display popups I'm now doing:

template.content = () => {
   const div = document.createElement('div');
   ReactDOM.render(<PopupContent />, div);
   return div;
}
0 Kudos
JayHill
Occasional Contributor II

Matt

Can I get some help on getting this old code to work in the new version of the api?

qfaultsPopup = function(feature) {
        var content = "";
        var faultZoneSum = feature.graphic.attributes.Summary;
        if (feature.graphic.attributes.FaultZone) {
            content += "<span class='bold' title='Longitude'><b>Fault Zone: </b></span><span id='faultTip'>{FaultZone}</span><br/>";
            query("#faultSum").html(faultZoneSum);
        }


        // assign click even to fault name so summary goes to Fault Summary panel
        $("#faultTip").click(function (e) {

            // hide visible panels, then show the fault summary panel
            showHideCalcitePanels("#panelLegend", "#collapseLegend");
            query("#customMessage").html(faultZoneSum);
        });

        return content;
    }
0 Kudos
MattDriscoll
Esri Contributor

Hi Jay, it would be something like this:

const popupTemplate = new PopupTemplate({
  content: (event) => {
    const { graphic } = event;
    const container = document.createElement("div");

    if (graphic.attributes.FaultZone) {
        const faultZone = document.createElement("strong");
        faultZone.textContent = "Fault Zone:";
        container.appendChild(faultZone);

        const faultZoneSum = graphic.attributes.Summary;
        const faultTip = document.createElement("span");
        faultTip.textContent = faultZoneSum;
        container.appendChild(faultTip);
        faultTip.onclick = () => {
          showHideCalcitePanels("#panelLegend", "#collapseLegend");
          query("#customMessage").html(faultZoneSum);
        };
    }

    return container;
  }
});
0 Kudos
JayHill
Occasional Contributor II

Thanks Matt! One question though. I only get the OBJECTID returned on that function in graphic.attributes

0 Kudos
MattDriscoll
Esri Contributor

Hey Jay, I think that is because either the layer you're using needs the `outFields` set on it to define what fields are needed or you can also set the `outFields` on the popupTemplate. 

https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#outFields

0 Kudos