Arcade - create a list of values, each with its own hyperlink

[ZachBodenner]

Hello,

I have a situation where I am trying to use Arcade loops to generate a list of values, and return unique hyperlinks for each value in an Arcade popup element html return. Here is the setup: 

I have a parcel dataset with PIDs and a zoning layer, also with PIDs. Some parcels in the zoning layer share a PID in common with the parcel PID because the parcel has multiple zoning designations. An example:

The black outline shows one parcel on the parcel layer, but the zoning layer has two corresponding parcels with the same PID, but different zoning designation. I used the following code to loop through a filter and give me all the different zoning codes for a given PID. 

var zoningLayer = FeatureSetById($map, "17937d72f47-layer-18",['PID','ZONING']);
var zdInter = Filter(zoningLayer, 'PID=@parcelPID');

var zd 
var zoneList
var zl
var zoneLink
var z


if (IsEmpty(zdInter)!=null){
for (var zoningPIDs in zdInter)

{
// Set links
zl = decode(zoningPIDs.ZONING,"RURAL","<rural link URL>","R1-44","<r1-44 link URL>",'etc')
// Final zoning description
zd = decode(zoningPIDs.ZONING,"RURAL","Rural","R1-44","R1-44: One Family- 44,000 sf. min.","etc")
zoneList += `<p style="font-size:16px;">${zd}</p>`+'\n'
zoneLink += zl


z = `<a href="${zoneLink}" target="_blank"><span style="font-size:16px;">${zoneList}</span></a>`
}

}

Here is the relevant portion of the HTML return:

<div style="background-color:#3f540f;padding:5px;">
    <span style="color:#ffffff;font-size:18px;"><strong>District Information</strong></span>
</div>
                <table style="width:100%;">
                    <tbody>
                        <tr>
                            <td>
                                <span style="font-size:16px;"><strong>Zoning District</strong></span>
                            </td>
                            <td>
                                <span style="font-size:16px;">${z}</span>
                            </td>
                        </tr>

Okay, so generating the list of zoning districts if there are multiple (the zoneList variable), works just fine. The problem is that the code as written above concatenates the link strings if there are multiple and applies them to the entire zoning district list:

If you click on either Rural or R1..., it takes you to the same link, which is just two of the links from the zl variable shoved together. 

My question then: is there a way to essentially "match" the link from the first decode with the text string from the second decode such that there would be multiple different links in the resulting popup?

[KenBuja]

As you loop through zdInter, you're appending a new link to zoneLink but you're overwriting the variable z. Give this a try, which reverses that logic (although I haven't been able to test it)

var zoningLayer = FeatureSetById($map, "17937d72f47-layer-18",['PID','ZONING']);
var zdInter = Filter(zoningLayer, 'PID=@parcelPID');

var z

if (IsEmpty(zdInter)!=null){
  for (var zoningPIDs in zdInter)
  {
    // Set links
    var zl = decode(zoningPIDs.ZONING,"RURAL","<rural link URL>","R1-44","<r1-44 link URL>",'etc')
    // Final zoning description
    var zd = decode(zoningPIDs.ZONING,"RURAL","Rural","R1-44","R1-44: One Family- 44,000 sf. min.","etc")
    var zoneList = `<p style="font-size:16px;">${zd}</p>`+'\n'

    z += `<a href="${z1}" target="_blank"><span style="font-size:16px;">${zoneList}</span></a>`
  }
}

[jcarlson]

To get a popup to handle multiple links, you need to use an Arcade popup element. You can keep the basic structure of your expression, but have it push those links into a Field List item. I think a dict-based lookup could make things a bit simpler for you, too, rather than using Decode twice.

Is your data public to test this? I can't verify this will work as written, but we use a similar expression to generate multiple links for features:

var zoningLayer = FeatureSetById($map, "17937d72f47-layer-18",['PID','ZONING']);
var zdInter = Filter(zoningLayer, 'PID=@parcelPID');

var zoning_dict = {
	'RURAL': {'link': '<rural link url>', 'display': 'Rural'},
	'R1-44': {'link': '<r1-44 link url>', 'display': 'R1-44: One Family 44,000 sf. min.'}
}

var fieldinfos = []
var attributes = {}


if (IsEmpty(zdInter)!=null){
	for (var zoningPIDs in zdInter) {
		// get matching dict item by zoning value
		var z = zoning_dict[zoningPIDs.ZONING]

		// add fields to output objects
		Push(fieldinfos, {fieldname: z['display']})
		attributes[z['display']] = z['link']
	}
}

return {
	type: 'fields',
	title: 'Zoning Type(s)',
	fieldInfos: fieldinfos,
	attributes : attributes
}