Search code examples
sapui5

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:

app screenshot

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

  • 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: