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; } } }

Intergrating HTML Code into an Arcade Expression

Jacob_Crocker

I am trying to integrate some HTML Code/CSS that is being generated from an Arcade script. In general, the Arcade Script looks for construction projects that are within a certain distance of a point (the selecting feature). I have the Arcade aspect working, but added some CSS to try and format the text, such as bold certain lines and so on.

Here is an example of how the arcade expression is returning a feature

Project: Neighborhood 1B - Sunnydale Ln
Start: April 1, 2025 | End: December 31, 2026
Description: Neighborhood 1B Project will include the reconstruction and replacement of streets, water and wastewater lines, along with some sidewalk and street lighting improvements. Estimated construction start April 2025

I tried to have it formatted like this.

<h3 style='margin:0;'>Mingo Ruddell Quiet Zone - Mingo St</h3><strong>Start:</strong> July 16, 2025    <strong>End:</strong> May 1, 2028<br><strong>Description:</strong><br><details><summary>Read more</summary>Mingo Road Improvements from Mingo/Bell intersection to Mingo/Mockingbird intersection. Improvements to include a possible center-left-turn lane, street lighting, new bike/ped facilities, as well as drainage and utility improvements as needed</details><br><a href='somewebite.com' target='_blank'>More Info</a></div>

I have put this in a text box, and the text box will not format with the CSS.

Find more posts tagged with

Arcade

Accepted answers

Jacob_Crocker

I got this figured out finally. @MarkBockenhauer, you suggestion lead me in the right direction. I switched from a text content block in the pop up to an arcade content. I then took the HTML of the formatted Text and converted it to an expression

When I came across the expression in the Formatted HTML that was causing the issue, I just brought the Arcade code out from that Expression and into the Arcade Content for the pop

and just called the variable back.

and now it works!

Thanks again for all the help.

Link to the final product, a tool for residents to type in their address and pull back a bunch of info. This will be embedded into a website in the end.

https://experience.arcgis.com/experience/9d0c2f2a1ad748008a20d95729c7f4d7

All comments

kenbuja

You can use an Arcade element to return the formatted text

var output = `<h3 style='margin:0;'>Mingo Ruddell Quiet Zone - Mingo St</h3><strong>Start:</strong> July 16, 2025 &nbsp;&nbsp; <strong>End:</strong> May 1, 2028<br><strong>Description:</strong><br><details><summary>Read more</summary>Mingo Road Improvements from Mingo/Bell intersection to Mingo/Mockingbird intersection. Improvements to include a possible center-left-turn lane, street lighting, new bike/ped facilities, as well as drainage and utility improvements as needed</details><br><a href='somewebite.com' target='_blank'>More Info</a></div>`

return { 
	type : 'text', 
	text : output
	}

and it looks like you have an extra </div> at the end of the string

NicoleJohnson

@Jacob_Crocker If you end up wanting to use this in Experience Builder, just a heads up that some widgets will not return Arcade content blocks.

An alternative is to use the text content block as you were, but I think you just missed where to enter the code? Enter it here, then when you're done, click the same button (the "OK" button will remain grayed out while you're in there):

Jacob_Crocker

@NicoleJohnson and @KenBuja, Thank y'all for the quick reply.

let me add some more context that I should of added from the start. This is one expression that of many that will find several things based off of a point, things like distance to a city park, local Fire station, City Reps, and so on. I have a Heavly formatted pop up. This is the one nested section of the HTML Code

<details style="background-color:#f0f0f0;border-color:#1F1F1F;border-radius:20px;border-style:solid;font-family:raleway;padding:10px;">
<summary><span style="font-size:24px;"><strong>Construction Projects </strong></span><span style="font-size:14px;"><i><strong>(Within Â½ mile)</strong></i></span></summary><summary>{expression/expr30}</summary>
<p style="font-family:montserrat;">
Visit the City of Denton <a target="_blank" rel="noopener noreferrer" href="https://gis.cityofdenton.com:9002/Projects-StreetClosures/">Capital Improvement Projects Map</a> to view major constructions projects by the City of Denton
</p>
</details>

Note that the expression (Expression30 in the code) below

var bufferpoint = Buffer($feature, 0.5, 'miles');

var intersectLayerlinear = Intersects(FeatureSetByName($map, "CIP Linear"), bufferpoint);

// Create status groups

var inProgress = "";

var upcoming = "";

var completed = "";

var other = "";

for (var f in intersectLayerlinear) {

var descriptionBlock = "<details><summary>Read more</summary>" + f.Description + "</details>";

var projectText = "<p><strong>Project:</strong> " + f.ProjectName + "<br>" +

"<strong>Start:</strong> " + Text(f.StartDate, "MMMM D, YYYY") +

"    <strong>End:</strong> " + Text(f.EndDate, "MMMM D, YYYY") + "<br>" +

"<strong>Description:</strong><br>" + descriptionBlock + "<br>" +

"<strong>More Info:</strong> <a href='" + f.InfoLink + "' target='_blank'>" + f.InfoLink + "</a></p>" +

"<hr>";

// Group by status

if (f.ProjectStatus == "In Progress") {

inProgress += projectText;

} else if (f.ProjectStatus == "Upcoming") {

upcoming += projectText;

} else if (f.ProjectStatus == "Completed") {

completed += projectText;

} else {

other += projectText;

}

// Assemble final output

var total = "";

if (Count(intersectLayerlinear) == 0) {

total = "<strong>No Projects in the area.</strong>";

} else {

if (inProgress != "") {

total += "<h3 style='color:#28a745;'>In Progress</h3>" + inProgress;

}

if (upcoming != "") {

total += "<h3 style='color:#ffc107;'>Upcoming</h3>" + upcoming;

}

if (completed != "") {

total += "<h3 style='color:#007bff;'>Completed</h3>" + completed;

}

if (other != "") {

total += "<h3 style='color:#6c757d;'>Other</h3>" + other;

}

return {

type : 'text',

text : total

}

I have tried to remove the <summary> and </summary> from around the {expression/expr30} but when I revert the code out of the HTML editor

it adds the summary or <p> back around the expression callout.

In other parts of the HTML of this pop up I was able to successfully call expressions in both the HTML code (to control A picture or URL) and to be able to return values as such

<a href="{expression/expr28}" target="_blank"><img src="{expression/expr27}" alt="Council Member Picture" width="120" height="150"> </a>
</p>
<p style="font-family:montserrat;margin:5px 0;">
<span><strong>{expression/expr1}</strong></span>
</p>
<p style="font-family:montserrat;font-size:12px;">
<span>{expression/expr26}</span> 

MarkBockenhauer

For an html popup I have found that using an arcade popup element to create the popup content works quite well. One thing to note: I have the best outcomes starting with an open <div> and finishing with closing </div>.

Jacob_Crocker

When I came across the expression in the Formatted HTML that was causing the issue, I just brought the Arcade code out from that Expression and into the Arcade Content for the pop

and just called the variable back.

and now it works!

Thanks again for all the help.

Link to the final product, a tool for residents to type in their address and pull back a bunch of info. This will be embedded into a website in the end.

https://experience.arcgis.com/experience/9d0c2f2a1ad748008a20d95729c7f4d7

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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