topic Re: Conditional Formatting Text In a Table in ArcGIS Dashboards Questions

Conditional Formatting Text In a Table

JeffHodgkiss — Tue, 25 Mar 2025 20:23:59 GMT

Hello,

I am working on an ArcGIS Online dashboard, and want to add color formatting to a column of text values. I've looked over all the settings tabs, but could not find any button or anything to do it simply. I've tried to put it into the code for the table, which at start looks like this:

return {

cells: {

HOSPITAL: {

displayText : `${$datapoint.HOSPITAL}`,

textColor: '',

backgroundColor: '',

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

STATUS: {

displayText : `${$datapoint.STATUS}`,

textColor: '',

backgroundColor: '',

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

}

And from looking at previous threads on similar topics, I believe the conditionals should look like this:

var color = When(
$datapoint.STATUS == 'Normal','#00FF00',
$datapoint.STATUS == 'Yellow Alert','#FEFD41',
$datapoint.STATUS == 'Red Alert','#ED1C24',
$datapoint.STATUS == 'ReRoute','#F8AA00',
$datapoint.STATUS == 'Trauma ByPass', '#9A3DC8',
$datapoint.STATUS == 'Mini Disaster', '#7777FF','' )

But I'm not sure where to put this relative to the code for the table above-putting it above or below seemed to have no effect, but putting it within the STATUS column just broke the whole set of code. Can anyone help point out any errors in the conditional code, or a better way to put this conditional formatting into the code for the table?

Re: Conditional Formatting Text In a Table

KenBuja — Wed, 26 Mar 2025 13:08:26 GMT

Here's one way to do it. This uses a function to return the color, which can be used in multiple columns. This shows how it can be used to change the textColor and the backgroundColor attributes.

function setColor(value) { When( value < 20, "#dedede", value < 30, "#C1C1C1", value < 60, "#D18E8E", "#f00000" ); } return { cells: { //Other cells "First Choice": { displayText: Text($datapoint["First Choice"]), textColor: setColor($datapoint["First Choice"]), //backgroundColor: setColor($datapoint["First Choice"]), textAlign: "right", iconName: "", iconAlign: "", iconColor: "", iconOutlineColor: "" }, "Second Choice": { displayText: Text($datapoint["Second Choice"]), textColor: "", backgroundColor: setColor($datapoint["Second Choice"]), textAlign: "right", iconName: "", iconAlign: "", iconColor: "", iconOutlineColor: "" }, // More cells } };

Re: Conditional Formatting Text In a Table

JeffHodgkiss — Fri, 28 Mar 2025 15:28:41 GMT

Thank you! I actually used the solution you posted here which gave me the following code:

var color = Decode($datapoint.STATUS, 'Normal', '#00FF00',

'Yellow Alert','#FEFD41',

'Red Alert','#ED1C24',

'ReRoute','#F8AA00',

'Trauma ByPass', '#9A3DC8',

'Mini Disaster', '#7777FF',

'default')

return {

cells: {

HOSPITAL: {

displayText : `${$datapoint.HOSPITAL}`,

textColor: '',

backgroundColor: '',

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

STATUS: {

displayText : `${$datapoint.STATUS}`,

textColor: color,

backgroundColor: '',

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

}