How to have control instance as "this" in formatter?

Question

I am using SAP UI5 1.52. My formatter file is a separate file and loaded in the controller. But logging this in the formatter returns view instance rather than control instance.

I have referred this question before and tried using absolute path and changed the way object is returned in formatter. It throws an error saying function not found.

Answer 1

UI5 1.69+

View

<MyControl xmlns:core="sap.ui.core" core:require="{ format: 'demo/model/format' }"
  property="{
    path: '...',
    formatter: 'format'
  }"
/><!-- Note: remove the dot (.) in front of the formatter function name -->

Formatter

sap.ui.define([], function() { // location: "demo/model/format.js"
  "use strict";

  return function(data) {
    // this === control instance
  };
});

As of UI5 1.69, we can require modules directly in the view definition. Requiring and assigning the formatter directly in the binding info lets us to use this as the corresponding control instance.

The documentation mentions it as well:

• From the API reference sap/ui/base/ManagedObject#bindProperty:

  When the formatter for a property binding (simple or composite) is called, the managed object will be given as this context

• From the topic Property Binding:

  The this context of a formatter function is generally set to the control (or managed object) that owns the binding.

Answer 2

In a control's property, you typically write formatter:'.formatter.functionName'

Just change it to: formatter:'namespace.controllerFolder.controllerName.prototype.formatter.functionName'

And this will now refer to the control instance rather than your controller.

Simple and easy :)