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

[motiononme1]

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

         <items>


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

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

[gowrinath_gundu]

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

$.each(items,function(index,item),{

//get aggregation attributes for each item

var attributes = item.getAttributes();

// loop the attributes

$.each(attributes,function(idx,attribute){

//write your date logic and apply css accordingly

attribute.addStyleClass(your css);

})

});

You can write this code in onInit

Hope this helps.

Regards,

Gowrinath

[motiononme1]

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.

example:

-- 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 ..

[gowrinath_gundu]

Hi Sandeep,

You can either refer to SAPUI5 sdk https://sapui5.hana.ondemand.com/#docs/guide/95d113be50ae40d5b0b562b84d715227.html

or you can check the browser console for these parameters.

Regards,

Gowrinath

[gowrinath_gundu]

Hi Sandeep,

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

Regards,

Gowrinath

[former_member228602]

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,

Veera

[motiononme1]

Thanks for replying ...

[kammaje_cis]

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

[Joseph_BERTHE]

Hello,

As nd22146 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 😉

Regards,

Joseph

[Former Member]

Hi Sandeep,

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

Please Check the below link
https://openui5.hana.ondemand.com/#docs/guide/0f8626ed7b7542ffaa44601828db20de.html

Regards,
Abul

[motiononme1]

Thanks for replying ..