topic Re: Creating a background color based on a field value using Arcade in ArcGIS Online Questions

Creating a background color based on a field value using Arcade

NathanGabbard — Wed, 30 Jul 2025 21:52:31 GMT

Hello,

I'll start off by saying that I'm not very good at coding. Trying to think outside the box when I don't even know what the box is, is making for some difficult times, but I'm trying!

I'm trying to create a background color based on a field value using arcade, this is going in the Title location under pop-ups. I was able to create a box color for the text using HTML however that wasn't based on any values. The picture below is what I'm basically trying to accomplish. Each color matches the icons on the map

In Warranty = Purple

In Development Review = Yellow

Approved = Green

Under Construction = Orange

Any help would be greatly appreciated. I've looked at several guides and tried using the AI generator but didn't have much luck with either.

Re: Creating a background color based on a field value using Arcade

JonathanMcD — Thu, 31 Jul 2025 01:09:33 GMT

There's an ESRI blog that will help you on your way.

Spruce up your pop-ups with CSS

As well as this map; Flexbox CSS examples

I found them really useful I then created pop-ups that related directly to the symbology in a few maps I publish. For example, I publish an ownership map which contains 6 different status types, I can reflect the colour of the symbology within the pop-up. You will create a simple Arcade Expression for the symbology colours, then it's that reference that's added into your pop-up text box html.

Don't worry, the two example links makes it all quite clear and you can copy out the scripts used too.

Below is an example of what I did from the two pages linked;

Following is the code for the top text box;

The popup for this dataset is just a series of text boxes with either the code to create layouts or <hr> to create the line.

This is just part of the code for the rest of the pop-up. You can see, once you get your head around how the columns work, it's a case of copy/paste for your own use.

and finally, this is an example of the expression to define the colours.

(PS - I'm not a coder or anything like that, I just had ideas on what I want to do with pop-ups, so for those that know way more than me, please don't pick holes in what I've done .... 🙂 )

Re: Creating a background color based on a field value using Arcade

NathanGabbard — Thu, 31 Jul 2025 13:17:23 GMT

Thank you! I was looking at pop-ups the essential guides and didn't come across this one.

Re: Creating a background color based on a field value using Arcade

NathanGabbard — Thu, 31 Jul 2025 13:53:38 GMT

So I gave it a shot, and I had tried something similar to this yesterday and got the same results.

My titles look like this:

Clearly I'm doing something wrong but following all the examples, I don't know what.

Re: Creating a background color based on a field value using Arcade

JonathanMcD — Thu, 31 Jul 2025 21:53:44 GMT

So, whilst you can change the colours of Text Boxes in the pop-up, you can't change the pop-up Title background. As you can see, you can use that field for an expression return and you can see your expression working.

The colour management is in the Text Box HTML - as you can see by the full view of my pop-up.

Re: Creating a background color based on a field value using Arcade

NathanGabbard — Mon, 04 Aug 2025 15:45:09 GMT

Ah I see, okay that is good to know! Thanks for your help.