Define Color of ObjectStatus Text

Question

I am new to UI5, JS and web developing in general. Following courses on openSAP about SAPUI5, I got this page:

The city names are displayed in the tags list

Answer 1

I would like to turn city's name color into red if it's "Berlin".

<ObjectStatus xmlns="sap.m"
   state="{= ${ToSupplier/Address/City} === 'Berlin' ? 'Error' : undefined}"
   text="{ToSupplier/Address/City}"
   inverted="true"
/>

The control sap.m.ObjectStatus supports various colors via the property state which awaits:

Semantic Value State Colors

• "Error" (red)
• "Warning" (yellow / orange)
• "Success" (green)
• "Information" (blue, available since 1.60)

Indication Colors (since 1.66)

• "Indication01" ... "Indication05" (since 1.75: 06, 07, and 08 available)

  Here, the colors are still pre-defined by the theme but their semantic meanings depend on the application.

➡️ Samples

---

In case other colors are required, take a look at this answer. However, I'd strongly encourage to avoid custom CSS if the app is going to be used within an application container such as FLP.