Pass Control's ID to Formatter function

Question

I need to pass a control's ID to the formatter. Here is my control definition:

<Text id="controlId" text="{parts:[{path: 'details>/key1'},{path: 'details>/key2'}], formatter: '.userFormatter._formatField'}"/>

The formatter is defined in another file:

sap.ui.define(
function(){
    "use strict";
    return {

            _formatField: function(sText1, sText2){
                console.log("this ---> ",this);
                return sText1 + " - " + sText2;
            }
}

Formatter definition in the relevant controller:

sap.ui.define([
    "My/Namespace/controller/BaseController",
    "My/Namespace/common/userFieldsFormatter"
], function(BaseController, userFormatter) {
    "use strict";
    return BaseController.extend("My.Namespace.controller.Detail", {
        userFormatter: userFormatter
});

In console I see the controller object (tried to implement THIS solution to the similar problem - doesn't work).

what error do you get when using the solution you make reference to (specifying formatter as My.Namespace.common.userFieldsFormatter._formatField)? this would be the correct way to change the context of this within the formatter function to be the control itself — Ian MacGregor, Feb 15 '17 at 22:04
@IanMacGregor I dont' get any error, it works fine, but the context of `this` is the controller, not the control. And if I do specify the formatter function as `formatter: 'My.Namespace.common.userFieldsFormatter._formatField'`, I get `formatter function My.Namespace.common.userFieldsFormatter._formatField not found!` error. — keshet, Feb 16 '17 at 06:45

Ian MacGregor · Accepted Answer · 2017-02-16T10:58:12.537

2

If you want to keep your formatter functions in your controller (and have the value of this equal to your UI5 control) you can reference the formatter in your binding as follows...

<Text id="controlId" text="{parts:[{path: 'details>/key1'},{path: 'details>/key2'}], formatter: 'My.Namespace.controller.Detail.prototype.userFormatter._formatField'}"/>

...otherwise you should be able to use a separate formatter function file but will need to require it using jQuery.sap.require

Any formatter on your controller specified in the binding using the syntax .formatterFuncName will be called with 'this' object as the instance of the controller itself, all other scenarios 'this' will be the instance of the UI5 control

You can take a look at this example which should hopefully make things a little clearer

edited Feb 16 '17 at 10:58

answered Feb 16 '17 at 10:05

Ian MacGregor

513
1
4
11

I'm not sure I understand correctly what's the difference between what was done in the example I've mentioned or what I did and your solution. [HERE](http://jsbin.com/fagehuvuho/1/edit?html,output) is a simple example of the issue. Could you please show what's your solution in the linked code? – keshet Feb 16 '17 at 10:26
have updated with a link to an cloned (updated) version of your JS Bin, let me know if you have any questions – Ian MacGregor Feb 16 '17 at 10:59
Excellent example! Thank you! – keshet Feb 16 '17 at 11:42
for me it works only in the " .formatterFuncName" case and with 'this' as the controller; in any other case 'the formatter function cannnot be found' why? i am developing via the WebIde so i guess local files have to be loaded and cannot be accessed directly. – gaugeinvariante Mar 22 '17 at 16:30

Pass Control's ID to Formatter function

1 Answers1