SAP UI5 bindValue is not working

former_member1974 — Mon, 21 Jun 2021 07:48:23 GMT

Hi,

I am beginner in UI5 development. I am trying to bind a data from JSON model to the property of the element but it's not working. I can see data is being loaded but not assigned to the element. Help would be appreciated.

Here are the files below:

Thanks

Models.js

sap.ui.define(
[
"sap/ui/model/json/JSONModel"
],
function(JSONModel){
"use strict";
return {

loadModel:function(){
 var oModel = new JSONModel();
 oModel.loadData("model/mockData/data.json");
 return oModel;

}
};
});//end of function

HTML index file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5</title>

<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
"fennecd": "./"
}'></script>

</head>
<body id="content">
<!--This module scans the DOM for HTML elements containing a special data attribute named data-sap-ui-component. 
All DOM elements marked with this data attribute will be regarded as container elements 
into which a sap/ui/core/ComponentContainer is inserted.-->
<div data-sap-ui-component data-name="fennecd" data-id="container" data-settings='{"id" : "idCont"}'></div>
</body>
</html>

XML file:

<mvc:View
   controllerName="fennecd.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc" 
   xmlns:simpleform="sap.ui.layout.form"
   displayBlock="true">
  <Shell>
 <App>
      <pages>
      <Page title="{i18n>appTitle}">
      <content>
        <simpleform:SimpleForm>
        <Label text="Business Name"></Label>
        <Input id="buz"></Input>
        <Label text="Address"></Label>
        </simpleform:SimpleForm>
        </content>
      </Page>
      </pages>
   </App>
  </Shell>
</mvc:View>

Controller file:

sap.ui.define([
"sap/ui/core/mvc/Controller", "../model/models", "sap/m/MessageToast"
], function(Controller, Models, MessageToast) {
"use strict";
return Controller.extend("fennecd.controller.App", {
onInit: function() {
/*var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"business": {
"name": "XYZ",
"age": "12",
"salary": "100000",
"pin": "410020"
}
});
sap.ui.getCore().setModel(oModel);*/

var objModel = Models.loadModel();
sap.ui.getCore().setModel(objModel);
var oBuz = this.getView().byId("buz");
oBuz.bindValue("/business/name");
//oBuz.bindProperty("value", "/business/name");
MessageToast.show("Hi");
}
});
});

Re: SAP UI5 bindValue is not working

boghyon — Mon, 21 Jun 2021 12:28:07 GMT

See https://stackoverflow.com/a/42251431/5846045.

Re: SAP UI5 bindValue is not working

former_member752553 — Mon, 21 Jun 2021 13:20:30 GMT

Hi Prasad,

Replace your setModel statement with either of the above lines and your code should work.

this.getView().setModel(objModel)  //or
this.getOwnerComponent().setModel(objModel);

By default UI5 does not inherit models from the UI core. In order to do that you have to add the property propagateModel:true to your ComponentContainer as shown below.

new sap.ui.core.ComponentContainer({
  name: "fennecd.webapp.Component",
  propagateModel: true
}).placeAt("content");

However, setting model to UI core is not recommended as per the UI5 guidelines.

Re: SAP UI5 bindValue is not working

former_member1974 — Mon, 21 Jun 2021 14:06:24 GMT

Thank you for your replies.

I set my model at component


var oData = {
"business": {
"name": "xyz",
"age": 12,
"salary": 100000,
"pin": 411020
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);

and accessed directly at view/controller

Question Re: SAP UI5 bindValue is not working in Technology Q&A

SAP UI5 bindValue is not working

Re: SAP UI5 bindValue is not working

Re: SAP UI5 bindValue is not working

Re: SAP UI5 bindValue is not working