SAPUI5 XML View Table Color

Question

I´ve started with my first SAPUI5 application and build a responsive table. Now I have the requirement to color specific rows depends on a value in the model.

I´m using a XML-View.

Could I define a method in my controller for that? (How it should be working?)

Home.view.xml

<Table id="idMachineTable"
    inset="false"
    items="{
        path: 'machinemodel>/collection'
    }">
    <headerToolbar>
        <Toolbar>
            <Title text="Header" level="H2"/>
        </Toolbar>
    </headerToolbar>
    <columns>
        <Column
            width="12em">
            <Text text="Product" />
        </Column>
        <Column
            hAlign="Right">
            <Text text="Price" />
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier
                    title="{machinemodel>test}"
                    text="{machinemodel>test}"/>
                <Text
                    text="{machinemodel>test}" />   
            </cells>
        </ColumnListItem>
    </items>
</Table>

Answer 1

I like the answer @schnoebel provided

here is an alternate way (jsbin), in the Items binding define a change handler

items="{
    path: 'machinemodel>/collection',
    events: {
      change: '.onItemsChange'
    }
}" 

then in the handler add your style class

onItemsChange: function(oEvent){
   var oTable = this.byId("idMachineTable");

   oTable.getItems().forEach(function(oItem){
      var oContext = oItem.getBindingContext("machinemodel");
      if (oContext && oContext.getObject().status === 'A'){
         oItem.addStyleClass("overdue");
      } 
  });   
}

Answer 2

You can do that with a customdata attribute that creates a dom attribute. Then you can select the rows you want to color via css.

<ColumnListItem>
   <customData>
      <core:CustomData key="mydata" value="{machinemodel>status}" writeToDom="true" />
   </customData>
   <cells>
     ...

<html:style type="text/css">
   tr[data-mydata="B"] {
     background-color: #faa !important;
   } 
</html:style>

Full example on jsbin.