Using HTML and Arcade Expressions

[Paco]

Hello all!

Trying to use the HTML Source window within the Text popup to add a bunch of "href" URLs.

not exactly sure where to add my Arcade 'expression' within the HTML?  the URLs are NOT within the attribute table,  but I can query out which Features can be given those URLs(hardcoded).

Im just hoping to get a list of Text in the popup that individually have an href URL associated to them.

I have something as simple as this to subset the selected Features-

if($feature.STATE == "Alabama") {
return something something

and a hardcoded HTML test like this,  that works-

<p>
<strong>Geoheritage Examples:&nbsp;</strong>&nbsp;&nbsp;
<br>
<a target="_blank" rel="noopener noreferrer" href="https://www.gsa.state.al.us/gsa/geologic/opportunities/">Educational information</a>
</p>

..but I need to  use an expression statement somewhere in that HTML for the popup to work correctly and popup the correct URLs..  yes?

thanks!

[lzk222]

Can you post screenshot(s) of what you have thus far? Some visual context to the problem would help.

[Paco]

Thanks everyone.    here is a screenshot of what im building.  I want each State to popup with active text links like these (ex. 'General Interest' 'Education and Outreach').   

the 'Geoheritage Examples:' is now showing the Attributes(separated by piping).  but I want that unique Attribute list to show as stacked active links as it now shows at the top.  altho at the moment, these URLs are just hardcoded into the HTML as you can see in the edit window on the right.   I will need some level of Expression code and an HTML mix im assuming.

Thanks for all the support!

p

[KenBuja]

You can use a Dictionary to assign URLs for each state, then use that dictionary in your HTML:

var dict = Dictionary('Alabama', 'https://www.gsa.state.al.us/gsa/geologic/opportunities',
                      'Alaska', 'https://www.google.com');//add in URLs for all other states in this format

var output = `<p>
<strong>Geoheritage Examples:&nbsp;</strong>&nbsp;&nbsp;
<br>
<a target="_blank" rel="noopener noreferrer" href=${dict[$feature.STATE]}>Educational information</a>
</p>`

return { 
	type : 'text', 
	text : output //this property supports html tags 
}

[Paco]

Hmm,  i've never used 'Dictionary'.   that looks interesting!   thanks for the idea,  ill take a look!

there are several States with several URL links,   do you think it's still possible to create that Dictionary list with those multiple values?   and still get the popup output im looking for?

[KenBuja]

Do you mean one state could have many URLs? Or you just have many states, each with an individual URL? My example above answers the second question, showing how Alaska has a separate URL.

[Paco]

Some states have several URLs.   some states have only one.

the number of URLs depends on the number of 'Geoheritage examples'.    the example im showing in the image i included shows Oklahoma,  which has 2(General Interest, Education and Outreach), each with it's own URL.

[Paco]

Could this just be coded somehow within the Arcade Expression?  is there a tag to add to the URL and to its TEXT variable that could be used?  I don't want to show the full URL address,  just use the TEXT(Geoheritage theme) as the hyperlink to the URL?

something like this,  but without full URL paths showing in the popup, just hyperlink on the TEXT..

if($feature.STATE == "Alaska") {

  return

"https://dggs.alaska.gov/popular-geology/kids/blah.html" +TextFormatting.NewLine+

"https://dggs.alaska.gov/outreach/blah.html"+TextFormatting.NewLine+

"https://dggs.alaska.gov/popular-geology/blah.html"

}

Can i add HTML within the Expression? I would love to add those "href" HTML statements in the "If" Arcade statements...

[KenBuja]

Here's one way to use a dictionary to build a list of links

var dict = {
    'Alabama': {
        'Google': 'https://google.com',  //the format is 'link text': 'url'
        'Esri': 'https://www.esri.com'
    },
    'Alaska': {
        'Esri Community': 'https://community.esri.com/'
    }
    //entire list of states and their links
}
var links = dict[$feature.STATE];
var output;
for (var link in links) {
    output += `<a href=${links[link]}>${link}</a></br>`;
}
return { 
	type : 'text', 
	text : output //this property supports html tags 
}

[lzk222]

One thing I'm noticing is that you're working in the Text section for adding content to Pop-Ups. You might be better off using the Arcade section (circled in green below) for setting the logic and formatting the html. 

If you have a lot of links/states then a dictionary is probably the easiest way to go about it. If you want to hardcode the state weblinks one by one then this example might work for you.

//More Info Link

var awardeename = $feature.Awardee
var awardee_link =
 WHEN(
  $feature.Awardee == 'Elko County','https://broadbandusa.ntia.doc.gov/broadband-infrastructure-program-awardees#CountyOfElko',
  $feature.Awardee == 'Inter-Tribal Council of Nevada','https://ntia.gov/press-release/2022/biden-harris-administration-awards-189-million-internet-all-grant-expand-high',
  $feature.Awardee == 'Duckwater Shoshone Tribe','https://ntia.gov/press-release/2022/biden-harris-administration-announces-more-73-million-high-speed-internet-grants',
  $feature.Awardee == 'Walker River Paiute Tribe','https://ntia.gov/press-release/2022/biden-harris-administration-announces-more-73-million-high-speed-internet-grants',
  $feature.Awardee == 'Fallon Shoshone Tribe','https://ntia.gov/press-release/2022/biden-harris-administration-announces-more-73-million-high-speed-internet-grants',
  $feature.Awardee == 'Ely Shoshone Tribe','https://broadbandusa.ntia.doc.gov/news/latest-news/biden-harris-administration-announces-more-224-million-high-speed-internet-grants',
  $feature.Awardee == 'Uprise Fiber - Pershing County','https://www.rd.usda.gov/sites/default/files/07.28.2022-ReConnect-Round-3-and-Telecomm-Awards-Chart-OEA-FINAL.pdf',
  $feature.Awardee == 'Beehive Broadband - Elko County','https://www.rd.usda.gov/newsroom/news-release/usda-invests-23-million-broadband-rural-eastern-nevada-0',
  $feature.Awardee == 'College of Southern Nevada','https://www.internetforall.gov/news-media/biden-harris-administration-announces-more-175-million-internet-all-grants-61-minority',
'https://osit.nv.gov/Broadband/Awards/'
)

When($feature.Awardee == 'Elko County','https://broadbandusa.ntia.doc.gov/broadband-infrastructure-program-awardees#CountyOfElko','')
return { 
	type : 'text', 
	text : `<p>For more information see ${awardeename} award announcement <a href="${awardee_link}" target="_blank">website</a>.</p>` //this property supports html tags 
}

Here is the link to the map for context: https://experience.arcgis.com/experience/dcc4af391f864b2c980de3473bf3e069?data_id=dataSource_1-18749...