topic Re: Issue in PopupTemplate Content 4.14 in ArcGIS JavaScript Maps SDK Questions

Issue in PopupTemplate Content 4.14

MatthieuThery1 — Thu, 02 Jan 2020 10:01:55 GMT

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

Re: Issue in PopupTemplate Content 4.14

RobertScheitlin__GISP — Thu, 02 Jan 2020 13:26:12 GMT

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-function sample it no longer renders svg either. Best to report your bug to esri tech support.

Re: Issue in PopupTemplate Content 4.14

JackFairfield — Fri, 03 Jan 2020 16:38:27 GMT

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

Re: Issue in PopupTemplate Content 4.14

MattDriscoll — Sat, 11 Dec 2021 06:14:14 GMT

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;
  }
};‍‍‍‍‍‍‍‍

Re: Issue in PopupTemplate Content 4.14

JackFairfield — Fri, 03 Jan 2020 17:59:33 GMT

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)

Re: Issue in PopupTemplate Content 4.14

MatthieuThery1 — Mon, 06 Jan 2020 10:09:36 GMT

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;

}

Re: Issue in PopupTemplate Content 4.14

ZacharyStauber1 — Thu, 07 May 2020 22:59:39 GMT

I have this same problem. Trying to port some stuff from 3.x to 4.x where I reference a div with an id and then fill it later with an asynchronous xhr query. In 4.13 I can set the id and class in a popupTemplate.content with no problem. In 4.15 I can set the class, but the id is stripped. Doing this with the workaround seems will require a ton of refactoring.

Re: Issue in PopupTemplate Content 4.14

JayHill — Sat, 11 Dec 2021 06:14:17 GMT

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;
    }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Issue in PopupTemplate Content 4.14

MattDriscoll — Sat, 11 Dec 2021 06:14:20 GMT

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;
  }
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Issue in PopupTemplate Content 4.14

JayHill — Tue, 11 Aug 2020 18:28:09 GMT

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

Re: Issue in PopupTemplate Content 4.14

MattDriscoll — Tue, 11 Aug 2020 20:50:51 GMT

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

Re: Issue in PopupTemplate Content 4.14

JayHill — Wed, 12 Aug 2020 13:30:42 GMT

Matt

I got it to work by calling the function in the content.

Thanks!