Conditional bold in sap.m.Text object

Question

I have this code in a controller file to bind items to a table:

        oTable.bindAggregation("items", {
            path: sRelPath,
            template: new sap.m.ColumnListItem({
                cells: [
                    new sap.m.Text({
                        text: {
                            path: 'relationship_type',
                            formatter: this.formatter.textBold
                        },
                        id: "relTypeText"
                    }),
                    new sap.m.Text({
                        text: "{client_name}",
                        id: "relClientName"
                    })
                ]
            }),

I am trying to format the 'relationship_type' value as bold if it returned with a certain string of text in it. I am using this formatter:

     textBold: function(sText) {
        if (typeof sText === "string" && sText.indexOf("(Self)") > -1) {
            //return $("#relTypeText").html("<b>"+sText+"</b>");
            return sText.bold();
        }
        return sText;
     },

Using this method, the text is returned in the table column as <b>Text</b>, as opposed to Text. I commented out the jQuery, as that returns the [object Object] reference.

I'm sure it's something simple. I know I can use sap.m.Label in an xml view and use the 'design' parameter, but I am binding the items in the controller in this instance. I tried using sap.m.Label in the controller instead, but same result.

Is it possible to append a property to a control element if a certain condition matches? As in, if I used sap.m.Label, could I append the 'design: Bold' property using the formatter? I am unclear on the correct syntax of doing something like that.

Any help is appreciated!

** Update **

As per @Sid 's recommendations, I implemented the following code in my formatter:

     textBold: function(sText) {
        if (typeof sText === "string") {
            if (sText.indexOf("(Self)") > -1) {
                this.setDesign("Bold");
            } 
        }
        return sText;
     },

Which returned this on the front end:

Answer 1

you can define a style like following in your CSS.

.boldText {
   font-weight: bold;
}

Also you define your formatter function :

textBold: function(sText) {
            if(sText.indexOf("(Self)") > -1) {
               this.addStyleClass("boldText"); //this refers to the Text control
            }
            return sText;
        };

You can check this working example.

Thank you.

Answer 2

My initial suggestion is that if you are allowed to then use Label and LabelDesign as follows inside your formatter:

<Ref. to label>.setDesign(sap.m.LabelDesign.Bold)

or using an expression binding based on value of 'relationship_type'.

Alternative: I believe the issue is that you are attempting to use a formatter to return HTML code. In SAPUI5, formatter functions work on the values passed from the model binding and return a format to apply on to the generated HTML code. They will apply style classes to the bound value and are not generally supposed return an HTML element.

Is it possible to append a property to a control element if a certain condition matches?

Yes. It is possible. Another approach suitable to your needs here is to add a Style Class to the element in question. In this case the first Text field.

<Controller Reference>.getView().byId("id of your element").addStyleClass("myboldclass")

where "myboldclass" is the one containing your required formatting

As in, if I used sap.m.Label, could I append the 'design: Bold' property using the formatter?

Please see the initial suggestion using Label Design with formatters or expression binding.

Hope that helps you.