Conditional Formatting Text In a Table

[JeffHodgkiss]

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 : `<span style=font-weight:bold;>${$datapoint.HOSPITAL}</span>`,

      textColor: '',

      backgroundColor: '',

      textAlign: 'left',

      iconName: '',

      iconAlign: '',

      iconColor: '',

      iconOutlineColor: ''

    },

    STATUS: {

      displayText : `<span style=font-weight:bold;>${$datapoint.STATUS}</span>`,

      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?

[KenBuja · Accepted solution]

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

 

[JeffHodgkiss]

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 : `<span style=font-weight:bold;>${$datapoint.HOSPITAL}</span>`,

      textColor: '',

      backgroundColor: '',

      textAlign: 'left',

      iconName: '',

      iconAlign: '',

      iconColor: '',

      iconOutlineColor: ''

    },

    STATUS: {

      displayText : `<span style=font-weight:bold;>${$datapoint.STATUS}</span>`,

      textColor: color,

      backgroundColor: '',

      textAlign: 'left',

      iconName: '',

      iconAlign: '',

      iconColor: '',

      iconOutlineColor: ''

    },

  }

}