Skip to Content
avatar image
Former Member

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

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

list.png (15.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • 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,

    Veera

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    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

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    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
    https://openui5.hana.ondemand.com/#docs/guide/0f8626ed7b7542ffaa44601828db20de.html

    Regards,
    Abul

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 18, 2017 at 06:41 AM

    Hello,

    As Former Member 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

    Add comment
    10|10000 characters needed characters exceeded