Hi Experts,
I am trying to use json model to display a table using local json file. I am getting below error:
Here is my code:
index.html
==================
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("zui5_json_model");
var view = sap.ui.view({id:"idView11", viewName:"zui5_json_model.View1", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
View1.view.js
===================
sap.ui.jsview("zui5_json_model.View1", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf zui5_json_model.View1
*/
getControllerName : function() {
return "zui5_json_model.View1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf zui5_json_model.View1
*/
createContent : function(oController) {
// Create instance of JSON model
var oModel = new sap.ui.model.json.JSONModel();
// Load Data
oModel.loadData("json/week.json");
// Create instance of table control
var oTable = new sap.ui.table.Table();
oTable.setTitle("Comment this week");
oTable.setVisibleRowCount(7);
// First column
var oColumn1 = new sap.ui.table.Column();
oColumn1.setLabel("Day");
var oTextview = new sap.ui.commons.TextView();
oTextview.bindProperty("text", "we_day");
oColumn1.setTemplate(oTextview);
oColumn1.setWidth("150px");
oTable.addColumn(oColumn1);
// Second column
var oColumn2 = new sap.ui.table.Column();
oColumn2.setLabel("Comment");
var oTextview = new sap.ui.commons.TextView();
oTextview.bindProperty("text", "we_comment");
oColumn2.setTemplate(oTextview);
oColumn2.setWidth("500px");
oTable.addColumn(oColumn2);
// Third column
// var oColumn3 = new sap.ui.table.Column();
// oColumn3.setLabel("Rating indiacator");
// var oRating = new sap.ui.commons.RatingIndicator();
// oRating.setMaxValue(5);
// oRating.setEditable(false);
// oRating.bindValue("we_rating");
// oColumn3.setTemplate(oRating);
// oTable.addColumn(oColumn3);
// Bind model to table control
oTable.setModel(oModel);
oTable.bindRows("/week");
}
});
controller.js
===================
sap.ui.controller("zui5_json_model.View1", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_json_model.View1
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_json_model.View1
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_json_model.View1
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_json_model.View1
*/
// onExit: function() {
//
// }
});
I have not used any controller method.