cancel
Showing results for 
Search instead for 
Did you mean: 

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

0 Kudos

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;

});

Accepted Solutions (0)

Answers (0)