SAPUI5: How can i add a different css class to each FeedList Item?

[former_member498613]

I Need to add a different css class to each FeedListItem.

I need it to added to each class separately & dynamically (onPost method in JS file) since i'm adding different class according to the feed input entered.

I'v checked the sapui5 guide line but i see no property of FeedListItem related to styling&CSS.

Wanted result:

<ul> //FeedListItems
  <li></li>
  <li></li>
  <li></li>
</ul>

What is the best way to do it?

How can i do that?

XML file:

<FeedInput
    post="onPost"
    icon="test-resources/sap/m/images/dronning_victoria.jpg"
    />
<List
    showSeparators="Inner"
    items="{/EntryCollection}" >
    <FeedListItem
        sender="{Author}"
        icon="{AuthorPicUrl}"
        senderPress="onSenderPress"
        iconPress="onIconPress"
        iconDensityAware="false"
        info="{Type}"
        timestamp="{Date}"
        text="{Text}" />
</List>

JS file:

sap.ui.define([
    'jquery.sap.global',
    'sap/m/MessageToast',
    'sap/ui/core/format/DateFormat',
    'sap/ui/core/mvc/Controller',
    'sap/ui/model/json/JSONModel'
], function(jQuery, MessageToast, DateFormat, Controller, JSONModel) {
"use strict";

var CController = Controller.extend("sap.m.sample.Feed.C", {

    onInit: function () {
        // set mock model
        var sPath = jQuery.sap.getModulePath("sap.m.sample.Feed", "/feed.json")
        var oModel = new JSONModel(sPath);
        this.getView().setModel(oModel);
    },

    onPost: function (oEvent) {
        var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
        var oDate = new Date();
        var sDate = oFormat.format(oDate);
        // create new entry
        var sValue = oEvent.getParameter("value");
        var oEntry = {
            Author : "Alexandrina Victoria",
            AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
            Type : "Reply",
            Date : "" + sDate,
            Text : sValue
        };

        // update model
        var oModel = this.getView().getModel();
        var aEntries = oModel.getData().EntryCollection;
        aEntries.unshift(oEntry);
        oModel.setData({
            EntryCollection : aEntries
        });
    }   });
return CController;

});

[TrusPatel]

Hi, 

I know this is too late for your project, but this could help someone else facing similar issue.

Solution : you can add customData aggregation to FeedListItem. This will add new attribute called data-*  (in below case it would be data-color=<dynmic value from 'class' property binding) li tag of the rendered HTML. 

There could me more than one such lists in your entire project so it is better to apply CSS with a custom class or specific Id to the List. I have used custom class called "customList" and added it to List.

<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core">
<FeedInput
    post="onPost"
    icon="test-resources/sap/m/images/dronning_victoria.jpg"
    />

<List
    showSeparators="Inner"
    items="{/EntryCollection}" class="customList">
    <FeedListItem
        sender="{Author}"
        icon="{AuthorPicUrl}"
        senderPress="onSenderPress"
        iconPress="onIconPress"
        iconDensityAware="false"
        info="{Type}"
        timestamp="{Date}"
        text="{Text}" >
        <customData>
            <core:CustomData key="color" value="{class}" writeToDom="true"/>
        <customData>
    </FeedListItem>
</List>
</mvc:View>

Once above XML view gets rendered to DOM, It would contain.. 

<div class="customList .. and other standard classes">

   <ul>
      <li data-color="green">
         <div> ... </div>
      </li>
      <li data-color="red">
         <div> ... </div>
      </li>
      <li data-color="blue">
         <div> ... </div>
      </li>
      ... and so on
   </ul>
</div>

you can apply different style based on value of data-color attribute as below.

.customList li[data-color="green"]{
background-color : green;
}

.customList li[data-color="red"]{
background-color : red;
}

 let me know if this helps.