Custom Composite Control Binding Issue with Hidden Aggregation

Question

I'm facing issue while doing aggregation binding the custom control. I m not able to do two-way data binding with the custom control inner element.

Custom control:

(function(){
    "use strict";

    var PriceRangeComponent = sap.ui.core.Control.extend('PriceRangeComponent', {
        constructor: function(mSettings) {
            sap.ui.core.Control.apply(this, arguments);

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

            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");
        }

    });

    PriceRangeComponent.prototype.clone = function(){
        var clone = sap.ui.core.Control.prototype.clone.apply(this, arguments),
            bindingInfo;

        clone.ef.bindProperty("value",this.getBindingInfo("value"));

        return clone;
    };

    return PriceRangeComponent;
})();

In the control, i want to do two way data binding with the outer model.

usage of custom control:

var priceGridwindowShade = new sap.ui.commons.windowshade.WindowShade({
            openFirstSection:false,
            sections:[],
            //layoutData: new sap.ui.layout.GridData({span: "L9 M9"}),
            width: "800px",

        });

        var oTemplateSection = new sap.ui.commons.windowshade.WindowShadeSection({
            title: {
                parts: [
                    {path: "startRange"},{path: "endRange"}
                ],
                formatter: function(startRange, endRange){
                    //console.log(val);
                    return startRange + " to " + endRange;
                }
            },
            content: [
                new PriceRangeComponent({
                    value: "{startRange}"
                }),

                new sap.m.Input({ // this input is for checking the 2 way data binding
                    width: "80px",
                    value: "{startRange}"
                })
            ]
        });

        priceGridwindowShade.bindAggregation("sections", {
            path: "/items",
            template: oTemplateSection,
            templateShareable: true});

        return priceGridwindowShade;

Please help me. When i just instantiate the control and bind the properties, two-way binding works properly. Just that it stop working when i do the aggregation binding.

cschuff cschuff · Accepted Answer · 2019-03-07T15:08:35

first of all you are not at all setting the properties of your custom control but only the ones of the inner input. Try sth. like this for all setters and remove the getters:

setValue: function (sValue) {
  this.setProperty('value', sValue, true /* bSupressInvalidate */);
  this.ef.setValue(sValue);
},

And you have to populate the value of your input backwards (do this in init):

init: function() {
  this.ef = new sap.m.Input({
    width: '100px'
  }).attachChange(function(oEv) {
    this.setValue(oEv.getParameters("value"));
  }.bind(this));

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

Some more remarks:

For initialization use init instead of overriding constructor
Use AMD

If you use a newer SAPUI5 version (I think 1.58+) you can also have a look into XML Composite Controls.

BR Chris

Custom Composite Control Binding Issue with Hidden Aggregation

1 Answers