How to colorize cards

One of basic ideas of Kanban is an easy visual distinguishment of cards, and the fundamental way to do this is placing them into different columns. But what if you need to differ cards that are in the same column? And you want to do it without reading texts and clicking buttons? In this situation you need some visual highlights. Maybe several...

Let's go through a simple process of doing this.

For example, you have a kanban that is configured on "Issue" object and has default design. Issue cards are put in columns by their State:

In this newly created kanban all Issue cards look the same. But issues have several properties, that can be easy visually indicated without adding more text to be shown.

First, let's indicate an issue type:

• This property is useful, but not the most significant - so, we can indicate it with something small, e.g., card border.

• It has not many values available ("Task" and "Bug") so we can use a small number of colors to differ them.

Open a Card Compact Layout Editor and expand "Styles" section of a Card itself. Add a style proerty:

Set style property name to "border-left" and click button to open formula builder to edit a property value. The typical CSS style for this property looks like "7px solid red", but we need to set color depending on issue type.

In this case we can use simple way "If Issue type = "bug" make border red, otherwise make it green", but this is not the best idea: if there are will be issues with some other type (e.g., you will add type = "idea" in the future), or "type is not a mandatory field and there can be issues without type at all).

So, let's leave "if/else" for fields with guaranteed two-way choices, and use "Case" function.

Do not forget to wrap function in "FORMULA[]" expression.

Type "7px solid FORMULA[]" and add the following code in square brackets:

CASE(
  {Issue__c.Type__c}, 
  'Bug', 'red', 
  'Task', '#3fba3f',
  '#DDDDDD'
)

You can wrap lines and add indents in the formula builder, this will not affect system functioning.

In this example we have specified red border color for issues with "Bug" type, light green - for tasks, and light gray - for other types and issues without type:

Second, let's indicate issue late status:

• E.g., you need to make cards highlighted if issue is late.

• Assume this is the most significant criteria to you, so, you want to have whole card colorized.

• Issue is considered as late if it's Due Date is up to 3 days in the past, and you want to show it yellow. If issue is late more than 3 days, you want to show it red.

Issues can have no Due Date at all, so, you need to handle this situation.

Open card compact layout editor and add one more CSS property "background-color" into "Styles" section. Set this property value to the following code:

FORMULA[
  IF(
    ISBLANK({Issue__c.Due_Date__c}),
    'white',
    IF(
      DATEVALUE({$System.DateTime}) - DATEVALUE({Issue__c.Due_Date__c}) > 3,
      '#F7E2E7',
      IF(
        DATEVALUE({$System.DateTime}) - DATEVALUE({Issue__c.Due_Date__c}) > 0,
        '#f7f4e2',
        'white'
      )
    )
  )
]

Some explanation:

And what your kanban will look like after this:

Third, let's indicate issue priority:

• E.g., you need to make cards indicate issues priority.

• Assume this is the quite significant criteria to you, so, you want to have noticeable indicator. A small icon will be good for this.

• Issue priority usually has the following values: Low, Normal, High and Critical. Also issue can have no priority set at all.

Open card compact layout editor and add an "Icon" component to the layout.

Set value to "utility:priority" to display standard Salesforce icon (a flag).

Set component title to Priority: {Issue__c.Priority__c}.

Set width to 16 pixels.

Expand "Styles" section of this icon and add a CSS property "color". Set this property value to the following code:

FORMULA[
  CASE(
    {Issue__c.Priority__c}, 
    'Low', '#2375D0', 
    'Normal', '#41AA53',
    'High','Orange',
    'Critical','Red',
    'white'
  )
]

"White" is a default color that will be applied to icon if issue has no priority (or some other one).

After these changes saved your kanban will look like this:

Congratulations! You have kanban that displays several important properties just by colorization.

And you can design your cards in any desired way: