Define Color of ObjectStatus Text

问题

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

回答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.

来源：https://stackoverflow.com/questions/51105161/define-color-of-objectstatus-text