Pass Static Value to Formatter Parameters in XML View

Question

I want to call the function getCountdown with two parameters:

The first (AuctionEnd) is dynamic from a model.
The second should be hard coded in either "Time" or "Status".

This is my code:

<ObjectStatus
  title="Time"
  text="{
    parts: [
      {path: 'AuctionEnd'},
      {path: 'Time'}
    ],
    formatter: '.formatter.getCountdown'
  }"
/>

In formatter.js, there is only the first parameter as seen in my console log:

["2016-05-20T12:00:00", undefined]

In JS, I would do it this way:

var AuctionEnd = "2016-05-20T12:00:00";
getCountdown(AuctionEnd, "Time");

Related feature request: https://github.com/SAP/openui5/issues/2148 — Boghyon Hoffmann, Nov 17 '18 at 11:05
That feature is added now: [stackoverflow.com/a/53609552](https://stackoverflow.com/a/53609552/5846045) — Boghyon Hoffmann, Dec 04 '18 at 09:43

Boghyon Hoffmann · Answer 1 · 2021-08-11T20:29:12.667

As of UI5 1.61 (commit), you can add static values to the binding info object. The syntax is value instead of path.

parts: [
  { path: '/modelPath' },
  { value: 123 }
],

Same as with path, you can enhance the value binding info with more settings as shown in this demo ==> https://jsbin.com/yeguhow/edit?js,output

⚡ Bug in UI5 1.79 and below

As reported on GitHub issue #2916, there is a bug which was fixed first in UI5 1.80.
Consider adding { value: 123, model: <modelName> } as a temporary solution, or removing the model name from the path (binding from a default model) to circumvent the issue.

score 4 · Answer 2 · answered Aug 15 '20 at 14:38

I found another possibility, maybe not completely for the usecase of this question but it was what I was looking for when I found this question.

If the "constant" or "static" text you want to set is an actual translatable text you can define it in the i18n model and then access it like this:

<ObjectStatus
  title="Time"
  text="{
    parts: [
      {path: 'AuctionEnd'},
      {path: 'i18n>/Time'}
    ],
    formatter: '.formatter.getCountdown'
  }"
/>

Maybe a more fitting usecase would be setting the title of a table column and adding an unit from a model to the end like this: "Space [m^2]". Since "Space" has to be translated anyways, you can just pull it from the model directly.

score 1 · Answer 3 · answered Feb 12 '20 at 13:47

For passing static value to formatter you can use i18n model with no translation (since if you look for property that doesn't exist in i18n.prop it returns the key-word you are looking for):

I was trying to represent 'X, , ,X' as list of check boxes:

// will format the first of values boolvalues.split(',')[index]
selected="{parts: [ 'modelName>/boolvalues', 'i18n>0'], formatter: '.formatter.checkBoxFormatter'}"

In this case I later followed different approach when I realiesd I don't even need formatter:

selected="{= ${modelName>/boolvalues}.split(',')[0] === 'X' }

score 1 · Answer 4 · edited Mar 01 '20 at 13:42

Solution for version < 1.61:

Register a model to view in init method

onInit: function() { // JSONModel required from "sap/ui/model/json/JSONModel"
  var oModelConstants = new JSONModel(Object.freeze({ myConstant: 123 }));
  oModelConstants.setDefaultBindingMode("OneTime");
  this.getView().setModel(oModelConstants, "constants");
}

In XML view, assign your formatter with the following parts:

<ObjectStatus text="{
  parts: [
    'AuctionEnd',
    'constants>/myConstant'
  ],
  formatter: '.formatter.getCountdownTime'
}" />

For version 1.61 and above, see answer 53609552.

score 0 · Answer 5 · answered May 19 '16 at 16:10

As far as I know, you cannot add static parts to the formatter, it can only take model values. For a combination of dynamic and static parts in a property see Expression Binding and Complex Binding Syntax.

For your case, you could add two more specialized formatter functions and call the one you need:

<ObjectStatus text="{parts: ['AuctionEnd'], formatter: '.formatter.getCountdownTime'}" />

(You can just provide an array of path-strings in the part array.)

formatter.getCountdownTime = function (auctionEnd) {
    return formatter.getCountdown(auctionEnd, "Time");
}

formatter.getCountdownStatus = function (auctionEnd) {
    return formatter.getCountdown(auctionEnd, "Status");
}

score 0 · Answer 6 · answered Oct 05 '18 at 10:40

I think the aspect @hirse whereas you cannot add static parts to the formatter is correct.

I recommend you to put the static values into an ViewModel-Property like >/countdownType. Then set this property in your controller before binding the objectstatus-text (also in your controller). For this approach you have to give your ObjectStatus an id. Then you cand bind the property text with your formatter.

Your formatter would look something like this:

    getCountdown: function(auctionEnd){

        var sType = this.getView().getModel("<yourviewmodelname>").getProperty("/countdownType");
        //whatever you want to do

    }

And your controller something like this:

var sType = "<yourLogicToDefineEitherTimeOrStatus>";
this.getView().getModel("<yourviewmodelname>").setProperty("/countdownType", sType);

var oObjectStatus = this.getView().byId("<yourNewImplementedObjectStatusId>");
oObjectStatus.bindProperty("text", {
    path: "AuctionEnd",
    formatter: this.formatter.getCountdown.bind(this)
});

Hope this helps.

Regards, Mike

Pass Static Value to Formatter Parameters in XML View

6 Answers6

⚡ Bug in UI5 1.79 and below

Linked

Related