topic Re: Relative URLs in Popup Content in ArcGIS JavaScript Maps SDK Questions

Relative URLs in Popup Content

DeniseDemone1 — Mon, 16 Aug 2021 14:14:38 GMT

I'm in the process of upgrading an ArcGIS Javascript API 3.x application to 4.19/20 and having trouble with URLs in my popup.

In 3.x, I was able to set the template content like so, using relative paths to my reports:

var templateContent = "{STATIONNUM} (" + status + ")<hr>" + "Station Name: {STATIONNAM} " + "Description: {DESCRIPT} " + "<a href='Station/StationReport/{STATIONNUM}' target='_blank'>Full Station Report</a> " + "<a href='StationFiles/Files/{STATIONNUM}' target='_blank'>Sketches / Photos</a> " + "<a href='https://maps.google.com/maps?q=&layer=c&cbll=" + data[0].latitude + "," + data[0].longitude + "' target='_blank'>Google Street View</a>" + showSession + " " + adoptionInfo;

This same code works in 4.x, except for the relative paths. I end up with this in the popup:

<div class="esri-feature-content"> <div> 229327 (Intact) <hr> Station Name: Minard Bog Description: <a href target="_blank">Full Station Report</a> <a href target="_blank">Sketches / Photos</a> <a href="https://maps.google.com/maps?q=&layer=c&cbll=44.12769707011916,-65.12424322455458" target="_blank">Google Street View</a> Not Adopted </div> </div>

But, if I put in the full URL, it works properly:

var templateContent = "{STATIONNUM} (" + status + ")<hr>" + "Station Name: {STATIONNAM} " + "Description: {DESCRIPT} " + "<a href='https://localhost:44322/Station/StationReport/{STATIONNUM}' target='_blank'>Full Station Report</a> " + "<a href='https://localhost:44322/StationFiles/Files/{STATIONNUM}' target='_blank'>Sketches / Photos</a> " + "<a href='https://maps.google.com/maps?q=&layer=c&cbll=" + data[0].latitude + "," + data[0].longitude + "' target='_blank'>Google Street View</a>" + showSession + " " + adoptionInfo;

result:

<div class="esri-feature-content"> <div> 229327 (Intact) <hr> Station Name: Minard Bog Description: <a href="https://localhost:44322/Station/StationReport/229327" target="_blank">Full Station Report</a> <a href="https://localhost:44322/StationFiles/Files/229327" target="_blank">Sketches / Photos</a> <a href="https://maps.google.com/maps?q=&layer=c&cbll=44.12769707011916,-65.12424322455458" target="_blank">Google Street View</a> Not Adopted </div> </div>

Seems like a bug me? Has anyone else experienced this?

Re: Relative URLs in Popup Content

JoePfeifer — Fri, 20 Jan 2023 19:33:35 GMT

Relative paths aren't working for me either; they just get stripped out.

Re: Relative URLs in Popup Content

ForrestLin — Tue, 01 Aug 2023 11:32:51 GMT

Relative paths aren't working for me either; they just get stripped out.

I just got same issue.

Re: Relative URLs in Popup Content

LaurenBoyd — Tue, 01 Aug 2023 18:55:37 GMT

Hi all,

The HTML sanitizer may be stripping this out for security purposes depending on how you are creating the popup content. Have you tried formatting your Popup content using a function? Here's an example of how this would look with relative paths: https://codepen.io/laurenb14/pen/zYJqzYp

Re: Relative URLs in Popup Content

ForrestLin — Tue, 08 Aug 2023 11:45:37 GMT

Can I do the same for popup title? formatTitle?

Re: Relative URLs in Popup Content

ForrestLin — Tue, 08 Aug 2023 12:23:31 GMT

How to pass parameters to function formatContent()?

Re: Relative URLs in Popup Content

LaurenBoyd — Tue, 08 Aug 2023 21:25:05 GMT

What parameters are you trying to pass into the function? The formatContent function in my example above allows you to access the current selected feature as a parameter and then you can use the graphic property to access the attributes.

function formatContent(feature) { // Access the feature's graphic which holds the attributes. // If needing the attributes, be sure to set "outFields=['*']" on // the layer or on the popupTemplate. console.log(feature.graphic.attributes); const mainDiv = document.createElement("div"); const element = document.createElement("a"); element.href = "./test.html"; element.target = "_blank"; element.innerHTML = "This works now!"; mainDiv.appendChild(element); return mainDiv; }

Re: Relative URLs in Popup Content

LaurenBoyd — Tue, 08 Aug 2023 21:26:16 GMT

Yes, the PopupTemplate.title property also accepts a function.

Re: Relative URLs in Popup Content

ForrestLin — Wed, 09 Aug 2023 11:28:03 GMT

What parameter does the function of PopupTemplate.title property take? event?

Re: Relative URLs in Popup Content

ForrestLin — Wed, 09 Aug 2023 11:31:04 GMT

Is function formatContent able to pass other parameters?

Re: Relative URLs in Popup Content

ForrestLin — Thu, 17 Aug 2023 15:58:56 GMT

It doesn't work.

In Angular:

rendererFactory = inject(RendererFactory2);

renderer = rendererFactory.createRenderer(null, null);

createCustomTitle(event: any): HTMLElement {

const pid = event.graphic.attributes['PARCEL'];

const pin = UtilityService.formatPin(pid);

const div = this.renderer.createElement('div');

const text =this.renderer.createText(pin);

this.renderer.appendChild(div, text);

const img = this.renderer.createElement('img');

img.src='assets/images/hyperlink_icon.png';

const link = this.renderer.createElement('a');

link.href = `${url.parcel}/{pid}`;

link.target = '_OCPA';

link.innerHTML = img;

this.renderer.appendChild(div, link);

return div;

}

this.renderer is undefined in function createCustomTitle. Don't know why.

Re: Relative URLs in Popup Content

ForrestLin — Sat, 19 Aug 2023 22:26:40 GMT

"this" doesn't work in functions formatTitle and formatContent.