topic Use Arcade to add href hyperlinks to unique list in ArcGIS Online Developers Questions

Use Arcade to add href hyperlinks to unique list

Paco — Wed, 10 Jan 2024 18:34:48 GMT

Hello community! I have a Field of unique coded values. these unique codes reference a full URL in a Table. however for each Feature there could be multiple codes(that are separated by piping '|'). example: WoodOthers1948 | Barnes1953 | HailOthers1971

in the past, I have hard coded the URLs to the codes and used HTML 'href' in the Arcade window to get my results, however, there are hundreds of these combinations.

I would like to have the attribute codes show in the popup and each individual code would be hyperlinked/href to their unique URL.

*this is visually how it should look in the popup, but each coded value would be a unique hyperlink-

I have thought of using 'Decode' to reassign the codes to URLs, but not sure how to read the clicked $feature list in to assign those individual URLs each time.

Any help? im assuming creating a unique Array will help, but accessing and href'ing each code correctly back to the coded text list is still an issue.

thx!

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Wed, 10 Jan 2024 19:46:49 GMT

Here's one way of doing it. I'm using a table I set up that has the codes and their associated URLs. In the Arcade element, I get the codes from the feature (here I use a dummy variable in lieu of an actual feature), split them into an array, and loop through that array. For each code, I get the URL from the table and create an href, which is pushed into an array. That array is concatentated with the Data Source text.

var feat = 'WoodOthers1948 | Barnes1953 | HailOthers1971'; var source = FeatureSetByPortalItem(myPortal, myTableId, 0, ['Code', 'URL'], false) var arr = Split(feat, " | ") var output = [] for (var index in arr) { var code = arr[index] var pub = Filter(source, "Code = @code") var item = `<a href="${First(pub).URL}">${code}</a>` Push(output, item) } return { type : 'text', text : `Data Source: ${Concatenate(output, " | ")}` }

This returns this popup, with each link functional

Re: Use Arcade to add href hyperlinks to unique list

Paco — Wed, 10 Jan 2024 23:50:23 GMT

@KenBuja! Thank you! I just wasn't sure how to extract that array correctly, this worked great. I just replaced your dummy variable list with my polygon $feature layer, and used an existing Table that included the Codes and URLs, and the array was built off that.

Thanks for looking at this so quickly. it definitely takes an extra second to think when it needs to sort thru a longer array list, but it outputs what I need!

here is an example of the new popup output, with active href links>

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Thu, 11 Jan 2024 15:02:58 GMT

This isn't the most efficient code, so I can imagine it's slower with longer array lists. Since it has to make a query for each item in the list, multiple requests are sent back to the server. You might look at @jcarlson's blog about "memorizing" the table and see if that makes a measurable difference.

You could also just read the table into a dictionary and use the code field as a key to get the URL value instead of using the Filter on the Table.

Re: Use Arcade to add href hyperlinks to unique list

Paco — Thu, 11 Jan 2024 16:51:13 GMT

Yep, understood and agreed. Code efficiency will need to be looked at. However, your code definitely helped us get over that first hump, and truly does not slow the popups down too much(2-3 seconds depending on the array list pulled, which can go up to about 10 Codes). For now, our task has been automated, thanks again. But yes, we will look at the efficiency and update where needed..and your link to "Memorizing" is a terrific post, full of great ideas.

Thanks again!

Re: Use Arcade to add href hyperlinks to unique list

GeoFinn — Fri, 26 Jul 2024 23:25:04 GMT

Hi Ken,

Thank you so much for sharing your example.

I have run into something that is making me crazy! The code below modeled after your example is being used in a popup Arcade element. Its basically looping through a table of images and I’m reformatting the string into a usable URL. It seems to work when I run it in the code window, but it fails to render the links in the popup. I think it has something to do with the loop but the text that is output in the run looks correct.

Any advice? (see images below)

var portal = Portal('https://gis.clark.wa.gov/portalpw/')

var Stmdocs = FeatureSetByPortalItem(portal,

"4b35b095430d47d699dea875e62dd0b6", 3, [ 'MmsId','FilePath']) //42 is the table ID in the service

// Filter related features by using a common attribute

// Here both table have identical MMSID fields

var MMSID = $feature.MmsId

var filterStatement = 'MMSID = @MMSID'

// Related features as a variable

var relatedData = Filter(Stmdocs, filterStatement)

// Sort related features by oldest to newest

var relatedDataSorted = OrderBy(relatedData, 'MmsId')

// Build the pop-up string by iterating through all related features ideally as hyperlinks

var thenewpath = ''

var theurl = ''

var output = []

for (var f in relatedDataSorted){

thenewpath = Replace(f.filepath, 'olympus', '')

thenewpath = Replace(thenewpath, 'gisdata', '')

thenewpath = Replace(thenewpath, 'Images', 'ccimages')

thenewpath = Replace(thenewpath, '\\', '/')

thenewpath = Replace(thenewpath, '////', 'https://gis.clark.wa.gov/')

theurl = "<a href=" + TextFormatting.DoubleQuote + thenewpath + TextFormatting.DoubleQuote + ">Image</a>"

Push(output, theurl)

}

return {

type : 'text',

text : `Image Links: ${Concatenate(output, TextFormatting.NewLine)}`

}

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Mon, 29 Jul 2024 14:09:52 GMT

That code should work. Did you check whether you're getting any valid related records? It would be something like this (untested)

Re: Use Arcade to add href hyperlinks to unique list

Paco — Mon, 02 Dec 2024 22:45:35 GMT

Hello again @KenBuja and thanks again for the array to href code!

now I am building another JS(4.x) application using expressionInfos, and cannot seem to retrieve the related Table records to href those returns? I can see the Feature array('dsource') just fine(image one) but I only get "object,FeatureSet" after trying to Filter the table('pub')..albeit the correct number of objects shows.

any help here? the straight Arcade script you helped build works fine in a similar scenario using a MapView. but this time I am accessing the Table using FeatureSetByPortalItem, which shows the correct number of object rows so im assuming I am accessing correctly?

Im trying to relate the Table "DataSources_ID" with the Features "DataSourceID" and finally href the "URL" to the "DataSourcesID".

expressionInfos: [{

name: "SourceExpression",

title: "Data Sources Title",

expression: `

var table = FeatureSetByPortalItem(Portal("https://portalname"), "d6260270918c477e9a76ee44ba0c145e", 1, ['DataSources_ID', 'URL'], false)

var sources = $feature.DataSourceID

var arr = Split(sources, "|")

var output = []

for (var i in arr) {

var dsource = arr[i]

var pub = Filter(table, "DataSources_ID = @dsource");

// var link = <a href="{First(pub).URL}">{dsource}</a>

push(output, pub)

}

return Concatenate(output,TextFormatting.NewLine)

}]

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Tue, 03 Dec 2024 15:54:15 GMT

When posting code, please use the "Insert/Edit code sample" button. It makes it easier to read and refer to line numbers.

You're pushing a FeatureSet into the output array. You have to loop through the records in that FeatureSet and push each link into it.

for (var i in arr) { var dsource = arr[i] var pub = Filter(table, "DataSources_ID = @dsource"); // var link = <a href="{First(pub).URL}">{dsource}</a> // push(output, pub) for (var f in pub) { push(output, `<a href="${f.URL}">${dsource}</a>` } }

Re: Use Arcade to add href hyperlinks to unique list

Paco — Tue, 03 Dec 2024 16:31:48 GMT

Woops! sorry about the pasting, must have just kept pasting after i pasted the images.

thx again for the reply. I understand your response, but I think im having some formatting issues because I am getting JS errors in Visual Studio from the backticks in the Push statement?(image 1)

Ive had these before. these errors do NOT show up when using the Arcade Expressions in AGOL, but in my JS they seem to give me errors. also the "$" i typically use seems to be read differently in standalone JS in certain places?

as you can see, I use backticks in the beginning and end of my expression:, then I want to add the backticks again in the final href expression, but the compiler does not like this.

expressionInfos: [{ name: "SourceExpression", title: "Data Sources Title", expression: ` var table = FeatureSetByPortalItem(Portal("https://portalurl"), "d6260270918c477e9a76ee44ba0c145e", 1, ['DataSources_ID', 'URL'], false) var sources = $feature.DataSourceID var arr = Split(sources, "|") var output = [] for (var i in arr) { var dsource = arr[i] var pub = Filter(table, "DataSources_ID = dsource"); // var link = <a href="{First(pub).URL}">{dsource}</a> //push(output, dsource) for (var f in pub) { push(output, `<a href="${f.URL}">${dsource}</a>` } } return Concatenate(output,TextFormatting.NewLine) ` }]

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Tue, 03 Dec 2024 18:36:02 GMT

My apologies, I left off the closing parenthesis

push(output, `<a href="${f.URL}">${dsource}</a>`);

Re: Use Arcade to add href hyperlinks to unique list

Paco — Tue, 03 Dec 2024 18:57:03 GMT

I saw that and added the parens, but that really wasn't the issue. I must have some 'open' code somewhere, because it just doesn't like the backticks within another backtick group. the errors still persist.

it shows " ',' expected" errors in VisualStudio and the console also shows "Uncaught SyntaxError: Unexpected identifier 'href' ".

so it's struggling with those backticks. I really believe this would all work if i can figure out why that syntax is giving me errors.

also, if I remove the backticks from the start/end of the "expression:" it can't read the first 'var' declaration. "Uncaught SyntaxError: Unexpected token 'var' "

thx!

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Tue, 03 Dec 2024 19:14:44 GMT

OK, I see what's going on. I overlooked the fact that this is in an expression where you're already using backticks. Try this instead

push(output, '<a href="' + f.URL + '">${dsource}</a>');

Re: Use Arcade to add href hyperlinks to unique list

Paco — Tue, 03 Dec 2024 21:06:50 GMT

Hm. just returning a blank entry now. and again the "$" before the 'dsource' is throwing a "Uncaught ReferenceError: dsource is not defined". and if i remove that "$" it just returns blank with no error.

this syntax is getting frustrating..since I know your code has worked in the past 😞

Re: Use Arcade to add href hyperlinks to unique list

Paco — Tue, 03 Dec 2024 21:19:07 GMT

UPDATE. okay, I am now returning the correct number of entries and the correct URLs. but the return is returning as a string between the href single quotes..

I believe i was missing the "@" symbol for the Filter variable(@dsource)

gettin close!...

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Tue, 03 Dec 2024 21:35:04 GMT

Urgh...I'm not concentrating hard enough today

push(output, '<a href="' + f.URL + '">' + dsource + '</a>');

Re: Use Arcade to add href hyperlinks to unique list

Paco — Tue, 03 Dec 2024 21:43:53 GMT

Again, sooooo close! im still getting that full string between the single quotes? ..but it is adding the 'dsource' correctly now 🙂 just need to get the string to be read as html and we'd be in business! ..this is exciting(for me at least!). this is where i wished those literal backticks would work..?

Re: Use Arcade to add href hyperlinks to unique list

KenBuja — Tue, 03 Dec 2024 22:38:26 GMT

Usually links get sanitized with a simple return, which is why you have to use an Arcade element with popups for html elements.

Re: Use Arcade to add href hyperlinks to unique list

Paco — Tue, 03 Dec 2024 23:22:24 GMT

Well not exactly sure what your response exactly means, but in this Return the href links are active and exactly what I need, but the type of text return format is not what im looking for.

is there a way to remove the default Table formatting and return a plain text datatype and keep the active links?

return {

output

}