topic Re: Using HTML and Arcade Expressions in ArcGIS Online Questions

Using HTML and Arcade Expressions

Paco — Tue, 18 Apr 2023 23:27:38 GMT

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-

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

..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!

Re: Using HTML and Arcade Expressions

lzk222 — Tue, 18 Apr 2023 23:45:58 GMT

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

Re: Using HTML and Arcade Expressions

KenBuja — Wed, 19 Apr 2023 01:31:14 GMT

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 = ` Geoheritage Examples:    <a target="_blank" rel="noopener noreferrer" href=${dict[$feature.STATE]}>Educational information</a> ` return { type : 'text', text : output //this property supports html tags }

Re: Using HTML and Arcade Expressions

Paco — Wed, 19 Apr 2023 15:39:26 GMT

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!

Re: Using HTML and Arcade Expressions

Paco — Wed, 19 Apr 2023 15:45:47 GMT

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?

Re: Using HTML and Arcade Expressions

KenBuja — Wed, 19 Apr 2023 17:26:33 GMT

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.

Re: Using HTML and Arcade Expressions

Paco — Wed, 19 Apr 2023 17:58:00 GMT

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.

Re: Using HTML and Arcade Expressions

Paco — Wed, 19 Apr 2023 18:20:21 GMT

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...

Re: Using HTML and Arcade Expressions

KenBuja — Wed, 19 Apr 2023 20:33:43 GMT

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

Re: Using HTML and Arcade Expressions

lzk222 — Fri, 21 Apr 2023 23:30:49 GMT

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 : `For more information see ${awardeename} award announcement <a href="${awardee_link}" target="_blank">website</a>.` //this property supports html tags }

Here is the link to the map for context: https://experience.arcgis.com/experience/dcc4af391f864b2c980de3473bf3e069?data_id=dataSource_1-187493e96b6-layer-28%3A17

Re: Using HTML and Arcade Expressions

Paco — Fri, 21 Apr 2023 22:51:02 GMT

Yep! I never really understood the real difference between the 'Arcade' window and the 'Text HTML' window? or when to use which? I just started testing within the Text HTML window..

thanks! this is a great example. still unsure how to Return 'several' URL hyperlinks in the popup tho? at this point with the logic I added I am now able to Return ONE of the links in the list. but unsure how to add a stacked list of those returned hyperlinks..?

if(($feature.STATE == "Alabama")&&(Find('Educational information', $feature.Description, 0)) > -1) {

return

"Educational information"

}

thx!

Re: Using HTML and Arcade Expressions

lzk222 — Fri, 21 Apr 2023 23:29:56 GMT

Also, I found the Create Arcade content blocks section of this documentation helpful.

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/pop-ups-arcade-essentials/#:~:text=Arcade%20in%20pop%2Dups%20can,ups%20to%20the%20next%20level.

Re: Using HTML and Arcade Expressions

lzk222 — Fri, 21 Apr 2023 23:37:19 GMT

You could set different variables for the conditions for which the different links should appear and then display them as a new line in the Arcade block.

Sticking with the same example I showed earlier, it could look something like this (note that I have a single link hardcoded in the second line, but you could set it up as a var to suit your needs).

Re: Using HTML and Arcade Expressions

Paco — Sun, 23 Apr 2023 15:48:04 GMT

Well, I have to say thankyou! a very 'simple' syntax that I noticed in your example scripts that I truly didn't know about? the Backtick. how ive never known about this is beyond me. but I kept getting errors using the standard single quote around my HTML. i noticed your tics looked different, i tried them, and no more errors! " ` " vs " ' "

so, here are a few example lines from my code(in the Arcade window) using those backticks. I was also able to remove all the related expressions, this is the simple code I was hoping to use, but wasn't using the correct "ticks". yikes. Thanks again! @lzk222

*p.s. also using Break instead of Paragraph

* see screenshot output

if($feature.STATE == "Alabama")

return {

type : 'text',

text : `<a href="https://www.gsa.state.al.us/gsa/geologic/opportunities/"> Educational information</a>`

}

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

return {

type : 'text',

text : `<a href="https://dggs.alaska.gov/popular-geology/kids/index.html"> Kids Rock!</a>

<a href="https://dggs.alaska.gov/outreach/education.html">Education Outreach</a>

<a href="https://dggs.alaska.gov/popular-geology/roadside-geology.html">Roadside Geology</a>`

}

Re: Using HTML and Arcade Expressions

lzk222 — Mon, 24 Apr 2023 18:48:55 GMT

Great! Looking good. Glad this was helpful. Yes, the backtick is a small thing I should have mentioned. It threw me off as well.

Re: Using HTML and Arcade Expressions

loum — Tue, 15 Aug 2023 12:35:43 GMT

Hi, I was following this thread and wondering about how do you use/pass the arcade expression value into HTML? I tried to use {expression/expr0}, I got both text and type fields. How do I get ONLY text field?

TIA.