CODEWITHSUNDEEP
sapui5
user2205079
user2205079

Reputation: 31

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

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!

Upvotes: 3

Views: 15043

Answers (3)

yaoji
yaoji

Reputation: 1

==================xml=================================== 

<t:Table >
            <t:columns>
                 <t:Column width="11rem">
                    <Label text="标志" />
                    <t:template>
                        <Text text="{
                      path: 'status',
                      formatter: 'yaoji.utils.formatter.format'
                            }" 
                    />
                    </t:template>
                </t:Column>
            </t:columns>
        </t:Table>

===================format js===========================

yaoji.utils.formatter.format = function (cellValue) {
     this.onAfterRendering= function() {
     //!!! if not after redering, can't get the dom
        var cellId = this.getId(); 
        $("#"+cellId).parent().parent().parent().css("background-                         color","red"); 
     return cellValue;
};

Upvotes: 0

Zulfi Tapia
Zulfi Tapia

Reputation: 526

Maybe another, uglier option is to just add a updateFinished event handler on the table and then set the classes dynamically there?

Upvotes: -1

Haojie
Haojie

Reputation: 5713

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();

Upvotes: 2

Related Questions