SAP UI5 : Unable to bind a controller variable in xml

Question

Button on click of which the variable is getting changed:

<f:content> 
    <Button icon="sap-icon://edit" press="editClick" type="Transparent"></Button>
</f:content>

xml code where i need 2-way binding:

<VBox class="sapUiSmallMargin">
       <form:SimpleForm id="SimpleFormDisplayColumn_oneGroup">
           <form:content>
               <Label text="{i18n>contextofusage}"/> 
               <Text text="{contextofusagetext}" visible="{!isInfoEditable}"/>
               <Input type="Text" visible="{isInfoEditable}" value="{contextofusagetext}"></Input>
           </form:content>
       </form:SimpleForm>
   </VBox>

controller:

var isInfoEditable=false;
   return Controller.extend("abc.controller.Detail", {
      editInfoClick: function(event){
            if(isInfoEditable){
               isInfoEditable=false;
            }
            else{
                isInfoEditable=true;
            }

        }
   });

Marc Marc · Accepted Answer · 2019-12-25T11:47:58

It seems like you have tried nothing, but I will try to guide you:

You cannot simply declare a variable in your controller and then use it in your view. That's not how UI5 works. Instead create a model and bind it to your view. I also give my models a name, in this case "view":

onInit: function() {
    var oViewModel = new sap.ui.model.json.JSONModel({
        isInfoEditable: false
    });
    this.getView().setModel(oViewModel, "view");
}

Then use it in your view. Make sure that you use the name of your model ("view") in your bindings. If you want to do more than simply use the raw value (e.g. negate it) you have to use expression binding. Also you have to use an absolute path starting with /:

<form:SimpleForm id="SimpleFormDisplayColumn_oneGroup">
    <form:content>
        <Label text="{i18n>contextofusage}"/> 
        <Text text="{contextofusagetext}" visible="{= !${view>/isInfoEditable} }"/>
        <Input type="Text" visible="{view>/isInfoEditable}" value="{contextofusagetext}"></Input>
    </form:content>
</form:SimpleForm>

When you click on the button you have to modify/toggle the value in your model:

editClick: function (oEvent) {
    var oViewModel = this.getView().getModel("view");
    var bIsEditable = oViewModel.getProperty("/isInfoEditable");
    // negate the current value and set it as the new value
    oViewModel.setProperty("/isInfoEditable", !bIsEditable);
}

I suggest strongly reading on the basics of UI5. Your approach looks more like Vue.js, but UI5 has its own paradigms.

SAP UI5 : Unable to bind a controller variable in xml

1 Answers