ikiw/northwind.js

## northwind.js
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

		<title>Mobile App with data-bound List</title>

		<script src="/sapui5/resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m,sap.ui.layout"
			data-sap-ui-theme="sap_bluecrystal"></script>
			<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->


		<script type="text/javascript">

			// create a Model with this data
			var url = "/databinding/proxy/http/services.odata.org/V2/(S(rrqobrd4tahidwixz4yffsf4vvyog))/OData/OData.svc";
			var model = new sap.ui.model.odata.ODataModel(url, true);


			var data = {
   "Description":"",
   "DiscontinuedDate":null,
   "ID":1000,
   "Name":"",
   "Price":"",
   "Rating":0,
   "ReleaseDate":"0001-01-01T00:00:00"
};

			var oCreateModel = new sap.ui.model.json.JSONModel(data);


		var oTemplate = new sap.m.StandardListItem({
			title :"{Name}",
			description:"{Description}",
			info:"{Price}",
			type: sap.m.ListType.Active
		});

			var oList = new sap.m.List({mode:"SingleSelect"}).bindAggregation("items",{path: "/Products", template:oTemplate});
		oList.setModel(model);

			var oCreate = new sap.m.Button({text:"Create",type:"Accept",press:function(oEvent){

				oCreateDialog.open();
			}
										   });

			var oDelete = new sap.m.Button({text:"Delete",type:"Reject",press:function(oEvent){

				var sPath = oList.getSelectedContextPaths()[0];
				model.remove(sPath,{success:function(){
						alert("Removed successfully");
				},error:function(){
						alert("Error");
				}
								   });

				model.refresh(true);
			}
										   });


			var oForm = new sap.ui.layout.form.SimpleForm({content : [ new sap.m.Label({text:"Name"}),
																	  new sap.m.Input({value :"{/Name}"}),
																 new sap.m.Label({text : "Description"}),
																	  new sap.m.Input({value : "{/Description}"}),
																	  new sap.m.Label({text : "Price"}),
																	  new sap.m.Input({value : "{/Price}"})
																]
													 });

			oForm.setModel(oCreateModel);

			var oCreateDialog = new sap.m.Dialog({content :[oForm],
												  leftButton : new sap.m.Button({text:"OK",
																				 press : function(oEvent){

																					 oCreateModel.getData().ID = oList.getItems().length + 300;
																					 model.create("/Products",oCreateModel.getData(),{success:
																																	  function(){
																																		  alert("success");
																																	  },
																																	  error :
																																	  function(){
																																		  alert("Error");
																																	  }
																																	 });
																					 oCreateModel.setData(data);
																					 oCreateDialog.close();
																					 model.refresh(true);

																				 }
																				 }),
												  rightButton : new sap.m.Button({text:"Cancel",
																				  press : function(oEvent){
																					  oCreateModel.setData(data);
																					  oCreateDialog.close();
																				  }
																				  })

												 });


			// create the page holding the List
			var page = new sap.m.Page({
				title: "List Page",
				content : oList,
				footer : new sap.m.Bar({contentRight:[oCreate,oDelete]})
			});

			// create a mobile App holding the page and place the App into the HTML document
			var app = new sap.m.App({
				pages: [page]
			}).placeAt("content");

		</script>

	</head>
	<body id="content" class="sapUiBody">
	</body>
</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'/>

	<title>Mobile App with data-bound List</title>

	<script src="/sapui5/resources/sap-ui-core.js"
	id="sap-ui-bootstrap"
	data-sap-ui-libs="sap.m,sap.ui.layout"
	data-sap-ui-theme="sap_bluecrystal"></script>
	<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->


	<script type="text/javascript">

	// create a Model with this data
	var url = "/databinding/proxy/http/services.odata.org/V2/(S(rrqobrd4tahidwixz4yffsf4vvyog))/OData/OData.svc";
	var model = new sap.ui.model.odata.ODataModel(url, true);



	var data = {
	"Description":"",
	"DiscontinuedDate":null,
	"ID":1000,
	"Name":"",
	"Price":"",
	"Rating":0,
	"ReleaseDate":"0001-01-01T00:00:00"
	};

	var oCreateModel = new sap.ui.model.json.JSONModel(data);


	var oTemplate = new sap.m.StandardListItem({
	title :"{Name}",
	description:"{Description}",
	info:"{Price}",
	type: sap.m.ListType.Active
	});

	var oList = new sap.m.List({mode:"SingleSelect"}).bindAggregation("items",{path: "/Products", template:oTemplate});
	oList.setModel(model);

	var oCreate = new sap.m.Button({text:"Create",type:"Accept",press:function(oEvent){

	oCreateDialog.open();
	}
	});

	var oDelete = new sap.m.Button({text:"Delete",type:"Reject",press:function(oEvent){

	var sPath = oList.getSelectedContextPaths()[0];
	model.remove(sPath,{success:function(){
	alert("Removed successfully");
	},error:function(){
	alert("Error");
	}
	});

	model.refresh(true);
	}
	});


	var oForm = new sap.ui.layout.form.SimpleForm({content : [ new sap.m.Label({text:"Name"}),
	new sap.m.Input({value :"{/Name}"}),
	new sap.m.Label({text : "Description"}),
	new sap.m.Input({value : "{/Description}"}),
	new sap.m.Label({text : "Price"}),
	new sap.m.Input({value : "{/Price}"})
	]
	});

	oForm.setModel(oCreateModel);

	var oCreateDialog = new sap.m.Dialog({content :[oForm],
	leftButton : new sap.m.Button({text:"OK",
	press : function(oEvent){

	oCreateModel.getData().ID = oList.getItems().length + 300;
	model.create("/Products",oCreateModel.getData(),{success:
	function(){
	alert("success");
	},
	error :
	function(){
	alert("Error");
	}
	});
	oCreateModel.setData(data);
	oCreateDialog.close();
	model.refresh(true);

	}
	}),
	rightButton : new sap.m.Button({text:"Cancel",
	press : function(oEvent){
	oCreateModel.setData(data);
	oCreateDialog.close();
	}
	})

	});



	// create the page holding the List
	var page = new sap.m.Page({
	title: "List Page",
	content : oList,
	footer : new sap.m.Bar({contentRight:[oCreate,oDelete]})
	});

	// create a mobile App holding the page and place the App into the HTML document
	var app = new sap.m.App({
	pages: [page]
	}).placeAt("content");

	</script>

	</head>
	<body id="content" class="sapUiBody">
	</body>
	</html>