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

Arrcade - Color Text Conditionally

GRmapper

Hello All,

I have an Arcade expression that conditionally colors a piece of text in a layout. If I remove the CLR bits it works but with a default color of black. I'd like to get it working with the color assignment if possible. Here is the current statement that proves out as working but I don't get the color I just get the actual color statement characters.

I'd appreciate any coding help.

Find more posts tagged with

Accepted answers

KieranClark

Hey Jason,

Thank you for this workaround, it does seem to work on the layout page. However, it still breaks when exporting to PDF as either a single page or the whole map series. Did you ever find a more permanent workaround for this?

I'm still trying to figure out what changed between versions as the <CLR> tag used to work perfectly fine in arcade expressions.

Edit: Wow, strike all of that - I figured it out.

Thanks to your post, I was able to figure out a way to set up the code so I didn't have to duplicate a tag and then manually add a </CLR> at the end since I figured if I wrapped it all into a variable it would work. The new code is as follows:

var datafield = $feature.CABLE_IS_COMM_AND_ACCEPT;
var comcolor = "<CLR red='84' green='109' blue='63'>" + "Complete" + "</CLR>"
var inccolor = "<CLR red='255' green='121' blue='0'>" + "Incomplete" + "</CLR>"

Iif(datafield == 1, comcolor, inccolor)

This code worked in a test dynamic element but when I applied it to our existing ones, it broke again. However, you had made mention of don't double click bounding boxes but that got me thinking if the bounding box itself was the issue. Our bounding boxes for the dynamic text elements had been 1.2 inches wide with text centered since that made everything line up correctly on our layout. What I did instead was to make them all 6 inches long and shift the X position to offset by 2.4 inches to account for the wider box.

This has now allowed the expression to stick while changing pages in the map series and while exporting the series to PDF - all of which had broken before with your workaround of manually adding </CLR> at the end. Additionally, double clicking the bounding box does not break the expression - the full tag text appears when you double click but once you click off the display returns to normal.

Seriously, thank you for these thoughts - you really got me on the right track to solve this issue that GRmapper and I have been slamming our heads against for a while.

kenbuja

I just tested this with a Dynamic Text element (a table) and I get some interesting results. First I used your expression and it worked.

I then changed the second evaluation to another formatting tag and it worked.

But when I added the two tags together, it broke

All comments

GRmapper

Thanks all for the help and continued support getting to the solution. The community continues to help us all do better geo 😀 !!!

KieranClark

Hey Jason,

I'm still trying to figure out what changed between versions as the <CLR> tag used to work perfectly fine in arcade expressions.

Edit: Wow, strike all of that - I figured it out.

var datafield = $feature.CABLE_IS_COMM_AND_ACCEPT;
var comcolor = "<CLR red='84' green='109' blue='63'>" + "Complete" + "</CLR>"
var inccolor = "<CLR red='255' green='121' blue='0'>" + "Incomplete" + "</CLR>"

Iif(datafield == 1, comcolor, inccolor)

Seriously, thank you for these thoughts - you really got me on the right track to solve this issue that GRmapper and I have been slamming our heads against for a while.

GeoJason

Hey everyone! Yesterday I worked with @JacquiMartin and @DallasCrow to come up with a solution for having font color changes based on conditional statements in a layout (more specifically, a map series). When applying a dynamic text it generates some XML tags in the Format Text pane. This is working by creating a duplicate tag that we are passing the formatting tags into without closing. We are closing tags manually with </CLR> at the end in step 5, but this can be dynamic also. Say you want to change the color, set to bold and italic based on conditional arcade, you would just add the conditions in the first-most tag and copy and addf another closing tag with the same conditional statements in the first-most tag but only return closing tags corresponsing to the opening tags.

This is a work-around and prone to breaking when the font extends outside the bounding box. These are not readily apparent and usually appear after selecting a different page in the map series. Also, pay attention to the spaces and work with the labeling syntax located here.

1. Create a dynamic text element and select Table Attribute for the source. In the Arcade select the field you want dispayed.

2. Click on the view source tag above the dynamic text box tag area. Copy the source code and paste a second copy of it above.

You should now have 2 tags when you switch back to tag view.

3. Click on the first-most tag (the one we pasted in the front, really it just needs to be the first tag not the second).

4. Edit the Arcade to be something similar to this...

IIF($feature.hexagonID == 401, "<CLR red = '4' green = '56' blue = '106' >", "<CLR red = '0' green = '0' blue = '0' >")

*Note mind the spaces. Formating has to be exact in the CLR tags.

Click OK and you should see this.

5. Add the close tag for the CLR. </CLR> goes directly in the tag section at the end.

You should now see this in your map series or layout.

For reference here is section 489...

and here is a screenshot of the entire project...

Be careful not to double-click on a bounding box after this solution is in place otherwise...

you will have to delete the broken tags and start over. It only takes a minute or two if you document your code.

I hope this helps!

kenbuja

My apologies...my testing was assuming this was a label instead of layout text

RobertBorchert

In my code example I a //return. when I remove the // it returns the value I am looking for.

It just is not working on the pop up with the html markup I show at the bottom of my example.

This works in a dashboard.

GRmapper

Here is another version that provides the same issue but is slightly different from the example. Thanks.

var val = $feature.CABLE_IS_PRE_ENGINEERED

if (val == 1) {
return "<CLR red = '0' green = '169' blue = '130'>" + "Complete" + "</CLR>"
} else if (val == 0) {
return "Incomplete"
}

kenbuja

Could you copy your expression directly into a reply (rather than posting an image) to see if anything going on?

GRmapper

Well I tried the example above with no success. Strange that some tags work as expected but <CLR></CLR> doesn't seem to in my situation. I attached a couple more pics to show. Thanks.

kenbuja

That code works properly when I test it.

Usually, the only thing that breaks the text formatting is having special characters (either "<" or "&") in an attribute, but you aren't including a field in your return string.

RobertBorchert

I have a similar issue when trying to color code results for Arc Flash and Grounding data. I have a way to do it what works in a dashboard but it would not work in a pop up. What I ended up doing was using an iff statement

iif($feature.ENERGYSWD >=8 && $feature.ENERGYSWD <9,$feature.Energy___SWD,'')

I then color coded each expression. If the second part of the iff is simply '' then it shows nothing.

I originally tried this which works in a Dashboard

//Variable
var mad = (iif($feature.ENERGYMAD>= 2 && $feature.ENERGYMAD <= 7.9,'g',(iif($feature.ENERGYMAD>= 8 && $feature.ENERGYMAD <= 8.9,'y',(iif($feature.ENERGYMAD>= 9 && $feature.ENERGYMAD <= 12.9,'o',(iif($feature.ENERGYMAD>= 13 && $feature.ENERGYMAD <= 24.9,'p',(iif($feature.ENERGYMAD>= 25 && $feature.ENERGYMAD <= 39.9,'r',(iif($feature.ENERGYMAD>= 40 && $feature.ENERGYMAD <= 160,'b',''))))))))))))
//return mad

//FUNCTION COLOR CODE
function colorCode(x){
return Decode(
x,
'g', 'Green',
'y', 'Yellow',
'o','Orange',
'p','Pink',
'r','Red',
'b','Black',
'Gray'
)
}

//RETURNS
return {
attributes:{
mad_col:colorCode(mad),
swd_col:colorCode(mad)
}
}

<p style="color:{expression/mad_col}">    {Energy___MAD}</p>

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.