How to set visible property of element with json model with setVisible() method

Question

I am customizing standard fiori application with Web IDE and in this application I have below requirement.

I want to add one check box and on selection of the checkbox, one of the existing input field should be shown or hidden. Same field is there on the multiple screens. So, I have to add check box on the multiple screens. But, when it is selected on one screen, it should be reflected on another as well.

This is what I have done.

In the init method, I have written below javascript code to add the checkbox.

            if(!this.oOtherDate)
            {
                var that = this;
                this.oOtherDate = new sap.m.CheckBox("cOtherDelDate", {
                    text: "{i18n>OTHER_DELIVERY}",
                    selected: "{path : 'soc_cart>/showRddInput'}", // This carries the checkbox selection to other pages. It is JSON model.
                    select: function(oEvent) {
                        var checked = oEvent.getParameters().selected;
                        oModelList.getData().showRddList = !checked;
                        oModelList.getData().showRddInput = checked;
                    }
                });

        }

On above code, on the selection event of check box, I am setting the two JSON properties. One for the checkbox value and another to make one element hidden and vice versa.

Upto this point, everything works fine. BUT, now, how can I bind the JSON property value "showRddList" to the element's visible property?

I have tried doing below but it is giving error: this.byId("Field1").setVisible("{path : 'soc_cart>/showRddList'}");

setVisible() method expects boolean value and in above line of code, it considers as the string value.

FYI... Element which needs to be hidden is defined on the XML view and we can't extend or customize the view to specify the binding property in the view. So, I have to set it from the controller only.

Is there a possibility to set the visible property from controller to the existing element?

Thanks.

Answer 1

What you are looking for is the bindProperty method of the Input.

this.byId("Field1").bindProperty("visible", {
    "soc_cart>/showRddList"
});