Solved: SAP UI5 bindValue is not working

former_member1974 · ‎2021 Jun 21

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

PD

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

boghyon · ‎2021 Jun 21

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

former_member752553 · ‎2021 Jun 21

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.

former_member1974 · ‎2021 Jun 21

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

By Category

Related Content

Activity Groups

Industry Groups

Influence and Feedback Groups

Interest Groups

Location Groups

Customer Only Groups

Forums

Related Resources

Products

Learning and Support

About

My Account

My Account

SAP UI5 bindValue is not working

Know the answer?

Need more details?

Accepted Solutions (1)

Accepted Solutions (1)

Answers (2)

Answers (2)