Use Custom Global Function In Expression Binding

I see how to use expression binding. https://sapui5.netweaver.ondemand.com/docs/guide/daf6852a04b44d118963968a1239d2c0.html I can use a small range of function call (You can use fu

Solution 1:

There are only specific global objects and functions allowed. You can see a list in the sourcecode which should be the list of global symbols found in the documentation link you provided.

But I just had an idea:

Member access operator with the . operator

You can create a 'utility' JSONModel that contains functions. A JSONModel just takes any javascript object and provides access via binding path and databinding to it. So you access the root object via / and call a function on the resulting object:

onInit:function(){
  var utility = {
    isEven: function(x){
      return x % 2 === 0;
    }
  };
  this.getView().setModel(newJSONModel(utility), "utility");
}

<Button text="Hello 1" visible="{:= ${utility>/}.isEven(1) }"/>
<Button text="Hello 2" visible="{:= ${utility>/}.isEven(2) }"/>

You can even access the controller via closure.

Of course you can define that utility model at a higher level (at Component or even at the Core). You can have many utility models and you can mix models in an expression: visible="{= ${utility>/}.doSomething(${bla>/blub}, 42) } (not tried that).

See Plunker for an example