nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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-

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!

Encuentra más publicaciones etiquetadas con

Accepted answers

Paco

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

}

links.jpg

lzk222

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

All comments

loum

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.

lzk222

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

Paco

*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>`

}

links.jpg

lzk222

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

lzk222

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.

Paco

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!

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-187493e96b6-layer-28%3A17

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 
}

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

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.

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

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?

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!

popuphtml.jpg

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 
}

lzk222

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.