Skip to Content

Hi, SAP UI5 developers. I need to color the Order Number base on the Date of Delivery.

Mar 09, 2017 at 02:35 PM


avatar image

<List id="master2List" items="{YieldDetail}" 
mode="{device>/listMode}" noDataText="{i18n>masterListNoDataText}"
         growing="true" growingScrollToLoad="true" >


           <ObjectListItem id="master2ListItem" 
type="{device>/listItemType}" press="onSelect" title="{NAME2}" 
number="{RO_AMT}" numberUnit="INR"  >
               <ObjectAttribute text="{Order_Num}"  />
               <!--<ObjectAttribute text="{VKBUR}"/>-->
               <ObjectStatus text="{APPR_LVL}"/>

Suppose the Order to be placed is tomorrow, then it must show "Critical" color otherwise "Normal" in color. Here is the code.

list.png (15.9 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Veeraraghavan Narasimhan
Mar 09, 2017 at 03:02 PM

Hello Sandeep,

The control ObjectAttribute you are using does not have a style related property. I only way you can perform the operation you want is with combination of CSS and Custom Data. Please refer to this Link and this should help you achieve your result.

Thanks and Regards,


Show 2 Share
10 |10000 characters needed characters left characters exceeded

Thanks for replying ...


This is the right approach. I achieved such requireemnts earlier using this approach. Upvoted.!

Gowrinath Gundu Mar 09, 2017 at 07:10 PM

Hi Sandeep,

1. sap.m.ObjectAttribute is derived from sap.ui.core.control, so you can definitely use addStyleClass method. Create a css class and attach this to object attribute using addStyleClass method. Make the css attribute as !important if it is not applied.

2. Inorder to apply css to items(order numbers) based on date, you need to get the aggregation attributes first and check the date and apply css accordingly in a loop.

//get the items from list

var items = this.getView().byId("master2List");

//loop the obtained items and check for date and apply css to objectAttribute


//get aggregation attributes for each item

var attributes = item.getAttributes();

// loop the attributes


//write your date logic and apply css accordingly

attribute.addStyleClass(your css);



You can write this code in onInit

Hope this helps.



Show 3 Share
10 |10000 characters needed characters left characters exceeded

Thanks for replying. i got some idea on it now. will apply the logic and revert back.

i have one more doubt (if you wont mind)

1)basically i new to UI designing part, so i am confuse with all the scripting languages out there.

2)the parameters which we pass in the method, were are they coming from. is it define in any package as standard parameters.


-- demoFunction : function( oEvent ) { } // this oEvent - is it defined somewere in the package ?

-- var oArgument = oEvent.getParameter("argument") ; // this argument - is it also define somewere ?

like that many more.

Thanks once again ..


Hi Sandeep,

Please mark the post as answered if you are able to solve. This helps the others.




Hi Sandeep,

You can either refer to SAPUI5 sdk

or you can check the browser console for these parameters.



Ehtesham Abul Mar 09, 2017 at 03:56 PM

Hi Sandeep,

You need to write custom Formatters and add css based on your date condition.

Please Check the below link


Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks for replying ..

Joseph BERTHE Sep 18, 2017 at 06:41 AM


As Ehtesham Abul said, use a custom CSS to fullfill your requirement, or you can add ObjectStatus in the attributes or simply use an Icon to inform the user there is an overdue date. The last two solution is to stay in the standard way ;)



10 |10000 characters needed characters left characters exceeded