Question Re: Expression Binding in class-Property in Technology Q&A

Expression Binding in class-Property

Former Member — Fri, 19 Aug 2016 08:22:18 GMT

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:

</Column>

</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!

Re: Expression Binding in class-Property

junwu — Fri, 19 Aug 2016 11:55:38 GMT

probably it is not supported for class attribute

Re: Expression Binding in class-Property

Former Member — Fri, 02 Sep 2016 07:41:09 GMT

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

Re: Expression Binding in class-Property

Former Member — Fri, 02 Sep 2016 07:52:47 GMT

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

Re: Expression Binding in class-Property

Former Member — Fri, 02 Sep 2016 08:42:53 GMT

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

Re: Expression Binding in class-Property

Former Member — Fri, 02 Sep 2016 09:48:23 GMT

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++;

});