topic Adding a div to the popup template in ArcGIS JavaScript Maps SDK Questions

Adding a div to the popup template

Anonymous User — Fri, 15 Oct 2021 07:26:13 GMT

I am trying to add a div as the content for the popup template which contains only a photo. I have been using this kind of method in the past but now I can't get it to work for some reason.

var photoContentHtml = ""; photoContentHtml = "<img onerror='this.onerror=null;this.src=\'/layerimages/noimage.jpg\'' src='http://app.org/layerimages/{photo}' width='200px' height='150px'>";

and this has always yielded results. I am able to create the div and assign it to a variable as a string and then use the variable as a content for the popup template. For some reason it doesn't work in this scenario so now I am doing it this way, slightly modified.

var disLayer; var photoContent = ""; var photoContentHtml = ""; var photoId; var photo; // Get the screen point from the view's click event view.on("click", function (event) { view.hitTest(event).then(function (response) { if (response.results.length) { let graphic = response.results.filter(function (result) { // check if the graphic belongs to the layer of interest return result.graphic.layer === disLayer; })[0].graphic; photoId = graphic.attributes.objectid; $.get(getBaseUrl() + "enterprises/GetEnterprisePhoto?id=" + photoId, function (data, status) { if (data == null) { photoContent = "<img src='http://app.org/layerimages/noimage.jpg' width='200px' height='150px'>"; photoContentHtml = photoContent; } else { photo = data; photoContent = "<img src='http://app.org/layerimages/" + photo + "' width='200px' height='150px'>"; photoContentHtml = photoContent; } }); } }); }); //Check is the layer is queryable if (restService.label.includes("*")) { disLayer = new FeatureLayer({ title: restService.label, url: restService.restServiceLink, outFields: ["*"], // Return all fields so it can be queried client-side popupTemplate: { // Enable a popup title: "" + restService.label + ": {" + restService.searchAndPopupFieldName + "} ", content: photoContentHtml } }); }

but this doesn't even show the div inside the popup template. Any pointers on how to proceed for this desperate person? 🙂

Re: Adding a div to the popup template

Anonymous User — Fri, 15 Oct 2021 10:25:18 GMT

I decided to change a few things so here is take two 🙂
I am using a function to create a simple node and display it in the popup template content as instructed here

disLayer = new FeatureLayer({ title: restService.label, url: restService.restServiceLink, outFields: ["*"], // Return all fields so it can be queried client-side popupTemplate: { // Enable a popup title: "" + restService.label + ": {" + restService.searchAndPopupFieldName + "} ", content: setContentInfo } }); function setContentInfo() { let node = domConstruct.create("div", { innerHTML: "test test test" }); return node; }

but this also doesn't insert a the "test" string as a content in the popup template.

Re: Adding a div to the popup template

RyanGatchell1 — Sun, 17 Oct 2021 19:19:12 GMT

Works fine if you pass an element like so:

// rest of your code above //Check is the layer is queryable if (restService.label.includes("*")) { disLayer = new FeatureLayer({ title: restService.label, url: restService.restServiceLink, outFields: ["*"], // Return all fields so it can be queried client-side popupTemplate: { // Enable a popup title: "" + restService.label + ": {" + restService.searchAndPopupFieldName + "} ", content: setContentInfo } }); } function setContentInfo() { let div = document.createElement("div"); div.innerHTML = "test test test"; return div; }

Re: Adding a div to the popup template

LorenzoMara — Thu, 10 Aug 2023 10:38:00 GMT

I tried to create the element in a function then return it, but it returns [object HTMLDivElement]

These are the parameters i set

var attributes = { Name: "Graphic", Description: "I am a point", Href: "nevent.one" }