SAP UI5 - Change the color of a Custom Data Field in table cell

Question

I am new to SAP UI5 and working my way through the sample Fiori apps. My XML view contains a table control and is as under:

<Table id="idProductsTable" inset="false"
            items="{path: '/ShipmentCollection'  
        }">
            <headerToolbar>
                <Toolbar>
                    <Label text="Shipment List"></Label>
                    <ToolbarSpacer />
                    <Button icon="sap-icon://refresh" press="refreshDataFromBackend" />
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column width="12em">
                    <Label text="Shipment" />
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                    <Label text="Carrier`" />
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                    <Label text="Dimensions" />
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                    <Label text="Weight" />
                </Column>
                <Column hAlign="Center">
                    <Label text="Price" />
                </Column>
            </columns>
            <items>
                <ColumnListItem id="listItems" type="Navigation"
                    press="onListItemPress">
                    <cells>
                        <l:VerticalLayout>
                        <Label text="{ShipNum}"></Label>
                        <Label text="{Text}"></Label>
                        </l:VerticalLayout>
                        <Text text="{Carrier}" />
                        <Text text="{Route}" />
                        <Text text="{Cust}" />
                        <Text text="{DelDate}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>

How can I change the color of Text field in cell-1 based on the contents of this field?

Thanks!

Answer 1

1.You can use data binding formatter to change the color. For example, your first cell.

<Label text="{path:'ShipNum', formatter:'Formatter.colorFormatter'}"></Label>

2.Define yourstyle for changing color in the css file.

3.Define the function colorFormatter in the demoformatter.js

sap.ui.core.Element.extend("demoformatter", {
colorFormatter:function(value) {
    this.addStyleClass("yourstyle");
    return value;
}
});
Formatter = new demoformatter();