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?

[ForrestLin]

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.

[ForrestLin]

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