UI Integration Cards: Custom Formatter

[tomba07]

Dear colleagues,

I would like to use the integration card's "custom formatter" functionality.

The documentation mentions that a custom formatter can be defined and then used "in the manifest the same way as the already predefined formatters which the card provides". (link)

Is there an example on how this custom formatter is defined and used within the manifest?

screen-shot-2021-07-12-at-54129-pm.png

[former_member229604]

Hi Mirko

we can use custom formatters in the integration card as follows

1. In the card manifest, add the extension definition

    "sap.card": {
        "type": "Analytical",
        "extension": "utils/FormatterExtension",
        ...
    } ...

2. The binding goes like this (e..g, from numeric header)
   

   ...  
      "mainIndicator": {
             "number": "{path:'n', formatter:'extension.formatters.randomSuffix'}", 
             "unit": "{u}" 
      }
   ...

3. the formatter function in the extension can be like this
   
   

   sap.ui.define(["sap/ui/integration/Extension"], function (Extension) {
       "use strict";
       var CardExtension = Extension.extend("com.sap.easyui5app.easyui5app.utils.FormatterExtension");
       // should return a promise
       CardExtension.prototype.randomSuffix = function (val) {
           // formatter logic //
           return val;
       };
       CardExtension.prototype.getFormatters = function() {
           return {
               randomSuffix: this.randomSuffix
           }
       }; 
       return CardExtension;
   });