Here we applied conditional formatting to a choice fields that contain a fixed set of values. The following example applies different classes depending on whether the value of the field is:
  • Actif (Active),
  • Annulé (Canceled),
  • Basculé (Toggled or Swtiched),
  • Clôturé (Closed),
  • Gelé (Frozen),
  • Résolu (Resolved),
  • Traitement (In progress).
NOTE: in my case, I was working on a French version (the words between brackets are the equivalent words in english)

This example uses a CSS class (sp-css-backgroundColor-XXXXX) to the <div/> based on the field's value. This is what determines the element's background color. Then, it outputs a <span/> element with an iconName attribute. This attribute applies another CSS class to that <span/> that shows an Office UI Fabric icon inside that element.

This pattern is useful when you want different values to map to different levels of severity, issue status, page status ...etc.

screenshot of the sample

Code

    You can click here and check the code there, you will find a file called Statut-AST.json, which is a file contain a JSON code well-displayed (Abstract Syntax Tree), there you will understand the two customisation i've implemented (the background colour and the icon) 

    Additional notes

    This sample is also covered in the main documentation around the Column Formatting and the in the official repository of SharePoint: