Expression Binding in class-Property

[Former Member]

Hi,

I'm having a hard time to get Expression-Binding to work. It is necessary to bind various class-names under certain conditions, e.g. if a variable is true, then we need a different styling. The Background are active or inactive tupels in our database. Yet, the user still must see all tupels, just with different colors. Here is my try:

<Table id="myTableId" items="{myModel>/}">

<columns>

<Column>

<Text text="Headline 1"/>

</Column>

<Column>

<Text text="Headline 2"/>

</Column>

</columns>

<items>

    <ColumnListItem class="{= ${myModel>ImportantFlag} === 1 ? 'markMeGreen' : 'markMeRed'}">

               <cells>

                     <Text text="Status: {= ${myModel>ImportantFlag} === 1 ? 'works!' : '' }"/>

                     <Text text="{myModel>SomeTupel}"/>

</cells>

</ColumnListItem>

</items>

</Table>

• My CSS-classes work, if i manually add them to the class-Property.
• The Text in the First Column is: "works", so the Expression works fine outside the class-Property
• myModel is properly bound

Thank you in advance for any help!

[Former Member · Accepted solution]

Hi Sören,

I have the same requirement. I tried to implement it with formatter functions - doesn't work. The same with factory functions. As Jun already said, it's probably not supported. Maybe it works with java script code, especially method addStyleClass. I will try this approach and let you know whether it works.

Best regards,
Christoph

[Former Member · Accepted solution]

Hi Christoph,

thank you! I'm very interested in!

Actually, we have kinda "solved" this problem with a dynamic icon. Maybe not the best solution, but it is a colored response for the user.

If you have any other solutions, please let me know

Kind Regards,

Sören

[Former Member · Accepted solution]

Hi Sören,

I implemented the requirement with java script in the corresponding controller of the XML view and it's working! See my sample code below:

         var oTable = this.byId("llesTable");

          var oItems = oTable.getItems();

          oItems.forEach(function(currentItem){

                 var currentCells = currentItem.getCells();

                 var cell = currentCells[1]; // accessing the "check criteria"

                 if (cell.getText() === "2016"){

                      cell.addStyleClass("sapUiSmallMarginTop");

                 }

                else{

                      cell.addStyleClass("sapUiMediumMarginTop");

                 }

           });

Best regards,
Christoph

[Former Member · Accepted solution]

Nice, thank you!

For all, who wants to add a class to the Row, try this code:

var that = this;

oModel.attachRequestCompleted(function() {

that.setModel(oModel, "myModel");

var oTable = that.byId("tableID"),

     counter = 0

;

jQuery.each(oModel.getData(), function(k,v) {

if (v.InsertYourObjectNameHere === YOURCHECKCRITERIA) {

oTable.getItems()[counter].addStyleClass("MyClassName");

}

counter++;

});

});

[junwu]

probably it is not supported for class attribute