How to pass control reference to formatter in XMLView? - sapui5

Question

In SAPUI5's JSView, it is quite easy to pass the current control reference to a formatter function:
oTable.bindItems("/rows", new sap.m.ColumnListItem({
cells : [ new sap.m.Text().bindProperty("text", {
parts: [
{ path: "someInteger" }
],
formatter: function(iValue) {
var idText = this.getId(); //this references the current control
return iValue;
}
})]
}));
(The 'easy' part of course is because this is referenced in the control's inner formatter function)
However, with XMLViews I haven't managed yet to get a reference to the current control in the formatter function:
<Table items="{/rows}">
<columns>
<Column>
<Text text="Some Integer" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{ path : 'someInteger', formatter : '.formatCell' }" />
</cells>
</ColumnListItem>
</items>
</Table>
And the formatter:
formatCell : function (sValue) {
var a = this; //this references the controller
return sValue;
}
Anyone knows how to make this work in XMLViews?

Answer 1

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 2

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.

Answer 3

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'}/>