Search code examples
javascriptsapui52-way-object-databinding

OpenUI5 binding property with a function, instead of direct access


I would like to bind a property (flag_baz in this case) from a JSONModel to a checkbox. Thing is that the json model looks like this.

{
  foo: "Foo", 
  bar:"Bar", 
  flag_baz : "X"
}

in this case X means "true" and an empty string means "false"

What i would like to do is evaluate a function for binding from model to the checkbox (that would translate "X"/"" to true/false) and evaluate some other function when binding from the checkbox to the model (that would translate from true/false back to "X"/"").

i would like to have something like this:

var checkBox = new Checkbox();
checkBox.bindProperty("checked", "flag_baz", funcFromStringToBool, funcFromBoolToString);

i know the funcFromStringToBool is called a formatter.

how would i add the funcFromBoolToString function?

Hope this makes sense.

Thx in advance.


Solution

  • Well in case some cares i've found the answer on my own.

    All bindings can use a type like so

    checkBox.bindProperty("checked", { 
          path : "flag_baz", 
          type : new BooleanStringType()
    });
    

    the BooleanStringType class would look like this:

    sap.ui.model.SimpleType.extend("BooleanStringType", {
        //called when going from model to ui
        formatValue : function(flag_baz){
            return flag_baz === "X";
        },
        //called when going from ui back to the model
        parseValue : function(flag_baz){
            return flag_baz ? "X" : "";
        },
        validateValue : function(flag_baz){
           //some validation if needed
        }
    });