Skip to Content
0
Former Member
Dec 27, 2015 at 06:18 AM

Sap UI5 with Local JSON Model - Not working

441 Views

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.

Attachments

error.PNG (66.8 kB)