CODEWITHSUNDEEP
sapui5
Anto
Anto

Reputation: 4305

Model property treated as object instead of string in formatOptions

I have a fragment containing labels and input components. Its values are mostly set statically and it works as expected:

<Label text="Customer" />
<Input
  value="John Smith"
  editable="true"
  change=".liveChangeVehicleGrossPrice"
/>
<Label text="Price" />
<Input
  editable="true"
  change=".liveChangeVehicleGrossPrice"
  value="{
    parts: [
      'P02_Model>/VehicleGrossPrice',
      'valuta>/convert'
    ],
    type: 'sap.ui.model.type.Currency',
    formatOptions: {
      showMeasure: false
    }
  }"
/>

Now I have created in the controller a model containing values to be used in the input components: one value (customer) to be added in the customer name field and two properties (groupingSeparator and decimalSeparator) for formatting the currency: 

var json = {
  "groupingSeparator": " ",
  "decimalSeparator": ",",
  "customer": "John Wayne",
};
var model = new JSONModel(json);
this.getView().setModel(model, "P02_Model");

Following the creation of this model, I modify the fragment in order to use these values:

<Label text="Customer" />
<Input
  editable="true"
  change=".liveChangeVehicleGrossPrice"
  value="{P02_Model>/customer}"
/>
<Label text="Price" />
<Input
  editable="true"
  change=".liveChangeVehicleGrossPrice"
  value="{
    parts: [
      'P02_Model>/VehicleGrossPrice',
      'valuta>/convert'
    ],
    type: 'sap.ui.model.type.Currency',
    formatOptions: {
      showMeasure: false,
      groupingSeparator: {P02_Model>/groupingSeparator},
      decimalSeparator: {P02_Model>/decimalSeparator}
    }
  }"
/>

The problem is that when the page is loaded, the name John Wayne is correctly mapped in the associated input, but the input containing the currency will have

112[Object object]323[Object object]2

instead of 112 323,2.

Somehow the two values associated with groupingSeparator and decimalSeparator, which are strings, are treated as objects. WHY?

Upvotes: 1

Views: 494

Answers (1)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18054

WHY?

It's because binding info objects are not a ManagedObject but a plain simple object which doesn't support binding capabilities. You'll have to do it in JS.

<Input id="myInput" />

onInit: function() {
  // ...    
  const model = this.getView().getModel("P02_Model");
  this.byId("myInput").bindValue({
    parts: [
      "P02_Model>/VehicleGrossPrice",
      "valuta>/convert"
    ],
    type: this.createCurrencyType()
  });
},

onModelDataChanged: function() {
  this.byId("myInput").getBinding("value").setType(this.createCurrencyType());
},

createCurrencyType: function() {
  return new CurrencyType({ // required "sap/ui/model/type/Currency"
    groupingSeparator: model.getProperty("/groupingSeparator"),
    decimalSeparator: model.getProperty("/decimalSeparator")
  });
},

Upvotes: 1

Related Questions