SAPUI5 Custom Control Binding

Question

I am trying to figure out how to bind a data model to a custom control. I have searched a number of similar questions here but they don't seem to match what I am trying to do. Maybe my method is wrong.

Anyway, I have created a Plunkr (https://plnkr.co/edit/UghwOObcDn1oRndOpCeJ) to demonstrate. Two input fields are created, one of which is on a custom control which extends a sap.m.Panel. I am attempting to bind the name and enabled properties to both input fields. No problem with the simple sap.m.Input on the page but the one in the custom control MyPanel no such luck. The name and enabled properties for both input fields should change when the button is pressed.

For the custom control I am trying to pass the bind properties to the value and enabled properties of the embedded input field as can be seen in App.view.xml.

If I change the following in MyPanel.js:

value: mSettings.value,
enabled: mSettings.enabled

to

value: '{/name}',
enabled: '{/editing}'

all works fine.

Any help or direction would be appreciated.

Same as stackoverflow.com/q/68899274/5846045, your custom control is missing oRm.writeControlData(oControl) in your render function. Custom setters and getters, as suggested by the answer below, aren't required to get it work. — Boghyon Hoffmann
Does this answer your question? Custom UI5 control does not update bound value — Boghyon Hoffmann

Stephen S Stephen S · Accepted Answer · 2017-08-24T20:27:36

You will have to define the 'value' and 'enabled' properties in your custom control. To get the binding working you need to have custom setter/getter methods in your extended control. These methods are called on binding updates.

Here is the updated link

sap.m.Panel.extend('my.App.MyPanel', {
 constructor: function(mSettings) {
 sap.m.Panel.apply(this, arguments);

 this.ef = new sap.m.Input({
   width: '100px',
   value: mSettings.value,
   enabled: mSettings.enabled
 });

 this.setAggregation('_ef', this.ef);
 },

 metadata: {
   properties: {
     enabled: { type: 'boolean', defaultValue: true },
     value: { type: 'String', defaultValue: "" }
  },

   events: {
   },

   aggregations: {
     _ef: { type: 'sap.m.Input', multiple: false, visibility: 'hidden' }
   }
 },

 init: function() {
 },

 renderer: function(oRM, oControl) {
   oRM.renderControl(oControl.getAggregation('_ef'));
 },

 setValue: function (sValue) {
   this.ef.setValue(sValue);
 },

 setEnabled: function (bValue) {
   this.ef.setEnabled(bValue);
 },

 getValue: function(){
   return this.ef.getProperty("value");
 },

 getEnabled: function(){
  return this.ef.getProperty("enabled");
 }

});

SAPUI5 Custom Control Binding

1 Answers