Hi,
I am new to UI development. While trying to develop personsdata app, and when trying to debug it on browser it is giving strange error. Can anybody help me out with this error. I have tried to google out the cause but no help. I am putting the snapshot from google chrome debugger and source code down here.
Please help.
personsdata.view.js
------------------------------------------
sap.ui.jsview("e2e-nwcloud-app-persons-list-web.personsdata", { getControllerName : function() { return "e2e-nwcloud-app-persons-list-web.personsdata"; }, createContent : function(oController) { //Create Table var oTable = new sap.ui.table.Table( {title : "Persons List", visibleRowCount : 7, firstVisibleRow : 3, selectionMode : sap.ui.table.SelectionMode.Single }); var oToolbar = new sap.ui.commons.Toolbar({ items : [new sap.ui.commons.Label({ id : 'firstNameLabelId', text : "First Name" }), new sap.ui.commons.TextField({ id : 'firstNameFieldId', value : '', width : "10em" }), new sap.ui.commons.Label({id : 'lastNameLabelId', text : "Last Name" }), new sap.ui.commons.TextField({ id : 'lastNameFieldId', value : '', width : "10em" }), new sap.ui.commons.Button( { id : 'addPersonButtonId', text : "Add Person", press : function () { oController.addNewPerson(sap.ui.getCore().getControl("firstNameFieldId").getValue(), sap.ui.getCore().getControl("lastNameFieldId").getValue(), oTable);} })] }); // End of oToolbar oTable.setToolbar(oToolbar); // Creating Columns for Table oTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({ text : "First Name" }), template : new sap.ui.commons.TextField().bindProperty("value","firstName"), sortProperty : "firstName", filterProperty : "firstName", width : "100px" })); oTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({ text : "Last Name" }), template : new sap.ui.commons.TextField().bindProperty("value","lastName"), sortProperty : "lastName", filterProperty : "lastName", width : "200px" })); //binding - (look more tomorrow from DemoKit IE) oTable.bindRows("/persons"); oTable.placeAt("content"); }
});
personsdata.controller.js
sap.ui.controller("e2e-nwcloud-app-persons-list-web.personsdata", {
/**
* 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.
*/ onInit: function() { var oPersonsModel = new sap.ui.model.json.JSONModel(); oPersonsModel.setData({ persons : [{ firstName : "", lastName : "" }] }); this.getView().setModel(oPersonsModel); }, addNewPerson: function(sFirstName, sLastName, oTable) { var oPersonsModel = new sap.ui.model.json.JSONModel(); oPersonsModel.setData({ persons : [{ firstName : sFirstName, lastName : sLastName }] }); this.getView().setModel(oPersonsModel); oTable.unbindRows().bindRows("/persons"); }
/**
* 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!).
*/
// 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.
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
*/
// onExit: function() {
//
// }
});
index.html
Thanks & Regards
Gaurav