How to pass control reference to formatter in XMLView?

Question

In SAPUI5\'s JSView, it is quite easy to pass the current control reference to a formatter function:

oTable.bindItems(         


        

Answer 1

Formatter must be defined with variable. Formatter reference must be included in controller. Formatter must be referenced with absolut path.

Formatter.js

sap.ui.define([], function () {
var Formatter = {
    myFormatter: function () {
        return "";
    }
}

return Formatter }, /* bExport */ true)

View.controller.js

sap.ui.define([
 ...
"com/my/company/utils/Formatter"], function (..., Formatter) {
"use strict";

return Controller.extend("com.my.company.View", {

View.view.xml

<GenericTag status="{path: 'MyStatus', formatter: 'com.my.company.utils.Formatter.myFormatter'}/>

Answer 2

Define your formatter functions in a separate file. Then this will be the Control whose property is being formatted.

my/own/Formatter.js:

sap.ui.define(function () {
    "use strict";
    return {
        formatCell: function (iValue) {
            var idText = this.getId(); //this references the current control
            return iValue;
        }
    };
});

View:

<Table items="{/rows}">
    <columns>
        <Column>
            <Text text="Some Integer" />
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Text text="{ path : 'someInteger', formatter : 'my.own.Formatter.formatCell' }" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

Answer 3

The answer of @codeworrior in this issue make it more clear:

A name that starts with a dot (e.g. ".foo") is searched for in the controller of the view and the execution context will be enforced to being the controller.

All other names are resolved starting from the window object and they get the control/element as context which holds the binding.

---

Just complement @hirse's answer, and for those who get formatter function xxx not found error:

both .formatter.myformatter and mynamespace.Formatter.myformatter is working.

The logic of parse formatter is in sap.ui.base.BindingParser.resolveRef(oBindingInfo,'formatter')

BindingParser seems different in sapUI5(1.54) and openUI5. I'll take sapUI5 version as an example.

If formatter name starts with a dot ('.'), eg. .formatter.myformatter, lookup will start with the given context(the Controller of the view), otherwise("mynamespace.Formatter.myformatter") it will start with the global context (window).

and jQuery.sap.getObject("formatter.myformatter", oContext) or jQuery.sap.getObject("mynamespace.Formatter.myformatter", window) is called.

so If you get formatter function xxx not found! error. set a break point in jQuery.sap.getObject, and check if there is "myformatter" in oContext or window object.

And I found that there is no mynamespace.Formatter.myformatter in my window object. so I change my formatter from

sap.ui.define([], function() {
  return {
    myformatter: function () {}
  }
})

To

sap.ui.define([], function() {
  var Formatter = {
    myformatter: function () {}
  }
  
  return Formatter
}, /* bExport */ true)

And it's working.