SAPUI5 table - changing font size and font color conditionally (in SAP) - how to do it right?

Question

Due to the fact that there are lots of threads on this on SCN and also here where People are trying to find out how to Change font Color and font size conditionally, you will find a solution manipulating the CSS or the DOM via jQuery - thats not the way it is supposed to be.

I want to Show the way how to set this up, Controlling Color and font by the SAP backend!

Easy example, you are showing negative and positive values in an SAPUI5 table - lets say positive values:

You Need to more attributes in your entity, one for design and one for class:

enter image description here

Then you enhance your method in ABAP with the respective values (explained later in Detail which values are available):

enter image description here

and finally in UI5 table Definition a reference:

enter image description here

and there you go, highlighted one single row with a positive meaning (sorry for the black ... it is not meant for the public ;-) all other rows are not bold and not green) enter image description here

Available Options in SAP: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.commons.TextViewDesign.html https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.commons.TextViewColor.html

This works indeed for the standard UI5 properties such as design and semanticColor with their predefined values. But how about I would like to give a cell a red border #F00, the cell's background color dimmed yellow #FF8, and the text itself a bright purple #F0F in Courier Bold? ;-) — Qualiture

cschuff cschuff · Accepted Answer · 2015-04-02T11:13:44

There is no official way to do something like this besides creating your own implementation of a sap.ui.table.Column.

Anyways you can add conditional style classes using this little workaround here:

var oColumn = new sap.ui.table.Column({
    label: new sap.ui.commons.Label({
        text: "Last Name"
    }),
    template: new sap.ui.commons.TextView({
        text: {
            path: 'Counter',
            formatter: function(sValue) {
                // in here this refers to your TextView
                // get the cell (depending on your template you might have to add more getParent calls here for nested controls)
                var oCell = this.getParent();

                // remove all possible style classes first because table cells might get reused
                oCell.removeStyleClass("newStyleClass");
                oCell.removeStyleClass("otherStyleClass");

                // add conditional style
                if (whatever) {
                    oCell.addStyleClass("newStyleClass");
                } else {
                    oCell.addStyleClass("otherStyleClass");
                }

                // just statically return the text since we are not interested in changing it
                return sValue;
            }
        }
    })
});

I've just written this down and didn't execute but it should be enough to guide you ;)

To do this 'from the backend' you will just have to provide an additional field in your service, say 'styleClass', which you bind to any property of your template and use a formatter to set the style classes as illustrated above.

BR Chris

SAPUI5 table - changing font size and font color conditionally (in SAP) - how to do it right?

1 Answers