SAPUI5 Table Cell Custom Control Binding

Question

I was wondering if someone could shed some light on the issue I am having. I can't seem to get the data model updated when I use my custom input control in a cell. When using the standard sap.m.Input, updates to the data model are performed properly.

Here is the Plunker: https://plnkr.co/edit/GxE6F8DbW9DHqWjpfdO0

I have overrriden the getter for the 'value' properly to get the data from the entry field. Debugging in Chrome shows that this function is not called which I believe is the reason the data model is not updated.

getValue: function() {
  var me = this;
  var ef = sap.ui.getCore().byId(me.sId + '-ef');

  return ef.getProperty('value');
}

Basically, there is a table with two rows and four columns. The first column uses my custom input. The second column has a custom button with an aggregation (additionalParameters) containing the bound data used in the first column. The third column uses a standard sap.m.Input and lastly the fourth column is again a custom button with the 'additionalParameters' aggregation bound to the data in the third column. When any of the buttons are pressed it fires an event which in turn updates the 'Sample' input field.

So, when I type something in the first column, tab out and press the respective 'PB1' button, only the original data from the model appears in the 'Sample' input field. If I type something in the third column, tab out of the field and press the respective 'PB2' button, the 'Sample' input field is properly set by the newly entered data implying the data model has been updated.

Edit I can get the value from the Input no problem. Maybe I can clarify. The 'MyCustomInput' in cell 1 has 'value' bound to 'list>colOne'. The 'MyCustomButton' in cell 2 has the 'text' of the first item in aggregation 'additionalParameters' bound to the same 'list>colOne'. Any text entered into MyCustomInput does not update the model and thus does not update the 'additionalParameters' item. If I do the exact same thing but use a standard Input instead of MyCustomInput it works. As can be seen with the Input in Cell 3 and the button in Cell 4.

Thank you

D. Seah D. Seah · Accepted Answer · 2017-12-31T05:11:36

May be you can provide more information. We have a simple example here http://jsbin.com/yukujag/edit?html,js,output and it works on with getValue and setValue

sap.ui.define(['sap/m/Input', 'sap/m/Button', 'sap/m/VBox'],
              function(Input, Button, VBox) {
  Input.extend('MyInput', {
    value: 'abc',
    renderer: {},
    getValue: function() {
      return this.value;
    },
    setValue: function(v) {
      this.value = v;
    },
  });

  var oInput = new MyInput();

  var oBox = new VBox({
    items: [
      oInput,
      new Button({
        text: 'Test',
        press: function() {
          alert(oInput.getValue());
        }
      })
    ]
  })
  oBox.placeAt('content');
});

Thanks -D

SAPUI5 Table Cell Custom Control Binding

1 Answers