CODEWITHSUNDEEP
sapui5
Zhengquan Bai
Zhengquan Bai

Reputation: 1073

How to format a value from model before it is used as a control property?

var oModel = new sap.ui.model.json.JSONModel();
var modelData = {
  greet: "hello"
};
oModel.setData(modelData);
			
var oTextView = new sap.ui.commons.TextView({
  text: "{/greet}" + "?" // "{/greet}" interpreted as ordinary string in this case
});
oTextView.setModel(oModel);
oTextView.placeAt("content");

To make the issue simple, my problem can be simplified as follows: I would like to append a question mark to the text of a TextView. However, the leading part of the text is from the model. Indeed, in this simple case, I could have accessed the text from the model before it is combined with the question mark. After the target string is produced, I can assign it to the text property of TextView. However, what if the model gets changed else where? The code accessing the text property won't be guaranteed to be executed, so the text of TextView won't get updated? Is there any way to solve this problem?

Upvotes: 1

Views: 1094

Answers (1)

Tim Gerlach
Tim Gerlach

Reputation: 3390

You can use complex binding syntax for this. Simply add this to your bootstrap:

data-sap-ui-xx-bindingSyntax="complex"

This enables you to combine model values with static text values like this:

var oTextView = new sap.ui.commons.TextView({
    text: "{/greet} ?"
});

or even something like this:

var oTextView = new sap.ui.commons.TextView({
    text: "{/lastName}, {/firstName}"
});

If your static text part depends on the model value you can add a formatter function, for example:

var oTextView = new sap.ui.commons.TextView({
    text: {
            path : "/greet", // no curly braces here!
            formatter : function(greet) {
                if(greet === "hello") {
                    return greet + "!";
                } else if (greet === "how are you") {
                    return greet + "?";
                } else {
                    return greet;                     
                }
            }
});

Upvotes: 3

Related Questions