Binding not work for property "class"

Question

In my state model I have:

...
"elementX": {valueState:"Success", valueStateText:"Great!" },
...

and in the XLMView I use a Text element:

<Text  text="{state>/elementX/valueStateText}" class="Success"/>

In my style.css file I have:

.Success{
    color: #008000;
}

All work fine and I see the green text!

But if bind class to valueState propery

<Text  text="{state>/elementX/valueStateText}" class="{state>/elementX/valueState}"/>

I see the text in black (not in green)... Why?

Using another component as Object Satus not have a good style in my form:

Answer 1

Unfortunately the class property is not bindable - it is not even a real property.

Anyhow the workaround to achieve what your are planning is easy: You have to use a formatter on any property and in that formatter you add/remove the class with the addStyleClass/removeStyleClass method.

<Text text="{ parts: [ 'state>/elementX/valueStateText', 'state>/elementX/valueState' ], formatter: 'my.static.Formatter.format' }" />

my.static.Formatter.format = function(sValueStateText, sValueStateClass) {
  // this refers to the control in a static formatter
  // set the class on the control via code
  if (sValueStateClass) {
    this.addStyleClass(sValueStateClass);
  }

  // statically return the desired text to make it appear in the text property
  return sValueStateText;
};

BR Chris