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

Question

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 class="<MY_CUTOM_CLASS_1>"></li>
  <li class="<MY_CUTOM_CLASS_2>"></li>
  <li class="<MY_CUTOM_CLASS_3>"></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"
    class="sapUiSmallMarginTopBottom" />
<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;

});

addstyleclass to a feedlistitem. access this class in your css. https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.FeedListItem.html — n01dea, Aug 20 '17 at 13:16
Can you write how to implement it according to my description? — Eli, Aug 20 '17 at 13:17

n01dea · Answer 1 · 2017-08-20T15:26:03.783

0

edit: up to version 1.48 it's not possbile to set a binding to the property "class". however "addStyleClass" and this work around work out.

i'm afk and therefore can't validate the following. but this should solve it. in the xml view is the property "class" to add to the feedlistitem. in the js controller the property to the object "oEntry". and the model needs to handle the class attribute as well.

xml view:

<FeedInput
  post="onPost"
  icon="test-resources/sap/m/images/dronning_victoria.jpg"
  class="sapUiSmallMarginTopBottom" />
<List
  showSeparators="Inner"
  items="{/EntryCollection}">
  <FeedListItem

    class="{Class}"

    sender="{Author}"
    icon="{AuthorPicUrl}"
    senderPress="onSenderPress"
    iconPress="onIconPress"
    iconDensityAware="false"
    info="{Type}"
    timestamp="{Date}"
    text="{Text}" />
</List>

controller js:

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 = {

    Class: "CSSClass",

    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
    });
}

edited Aug 20 '17 at 15:26

answered Aug 20 '17 at 14:11

n01dea

1,532
1
16
33

Thanx, but it renders

Eli

Aug 20 '17 at 14:31

which attribute is supposed to determine which class a feedlistitem should have? – n01dea Aug 20 '17 at 14:36

let's say that i retrieve a value in onPost() method, and that value is supposed to be the css class attached. – Eli Aug 20 '17 at 14:38

1. retrieve in the controller the value in onPost(): "CSSClassName", 2. add in the controller the value "CSSClassName" to oEntry.Class: var oEntry = { Class: "CSSClassName" ...}, 3. receive in the xml view in the feedlistitem the value "CSSClassName" with the binding class="{Class}" – n01dea Aug 20 '17 at 14:47

the property "css" of a control is not bindable, you can only set it once from a view. If you want it "dynamic" you should either use "addStyleClass" method from controller or utilize the workaround using "customData" with "writeToDom" parameter. – Andrew Naumovich Aug 20 '17 at 14:54

I'm afraid it wont work since i still get

.... i need it to get

– Eli Aug 20 '17 at 14:55

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

1 Answers1