Relative URLs in Popup Content

[DeniseDemone1]

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 = "<b>{STATIONNUM} (" + status + ")</b><hr>" +
                        "<b>Station Name: </b>{STATIONNAM}<br>" +
                        "<b>Description: </b>{DESCRIPT}<br><br>" +
                        "<a href='Station/StationReport/{STATIONNUM}' target='_blank'>Full Station Report</a><br><br>" +
                        "<a href='StationFiles/Files/{STATIONNUM}' target='_blank'>Sketches / Photos</a><br><br>" +
                        "<a href='https://maps.google.com/maps?q=&layer=c&cbll=" + data[0].latitude + "," + data[0].longitude + "' target='_blank'>Google Street View</a>" +
                        showSession + "<br/><br/>" + 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>
		<b>229327 (Intact)</b>
		<hr>
		<b>Station Name: </b>Minard Bog<br>
		<b>Description: </b> <br><br>
		<a href target="_blank">Full Station Report</a><br><br>
		<a href target="_blank">Sketches / Photos</a><br><br>
		<a href="https://maps.google.com/maps?q=&amp;layer=c&amp;cbll=44.12769707011916,-65.12424322455458" target="_blank">Google Street View</a><br><br>
		Not Adopted
	</div>
</div>

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

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

result:

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

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

[JoePfeifer]

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

[ForrestLin]

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

I just got same issue.

[LaurenBoyd · Accepted solution]

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 

[ForrestLin]

Can I do the same for popup title? formatTitle?

[LaurenBoyd]

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

[ForrestLin]

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

[ForrestLin]

How to pass parameters to function formatContent()?

[LaurenBoyd]

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

[ForrestLin]

Is function formatContent able to pass other parameters?