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");
}
});
});
Bluesky
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.