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/secondStatues/ObjectStatues. I would like to turn city's name color into red if it is "Berlin".

Find here the concerned XML View and the controller.js I'm getting an issue from:

XML view sample:

<List>
  <!-- ... -->
  <secondStatus>
    <ObjectStatus
      title="{i18n>statusDeliveryFrom}"
      text="{
        parts: [
          {
            path: 'ToSupplier/Address/City'
          }
        ],
        formatter2: '.formatter.cityColor'
      }"
    />
  </secondStatus>
</List>

NB: I put formatter2 because there is another formatter

controller.js sample:

cityColor : function(vText){
  if (vText === "Berlin") {
    return "#FF0000";
  }
},

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" (reddish)
• "Warning" (orangish)
• "Success" (greenish)
• "Information" (blueish / highlighting, since v1.60.1)

Indication Colors

• "Indication01" … "Indication05" (Since v1.62)

• "Indication06" … "Indication08" (Since v1.75)

• "Indication09" … "Indication20" (Since v1.120)

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

  In contrast to the ValueState, the semantic meaning must be defined by 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.

See also:

• Fiori design guideline: How To Use Semantic Colors / Industry-Specific Colors
• UI5 documentation: Theming