<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="UTF-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
		data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-xx-bindingSyntax="complex"
		data-sap-ui-resourceroots='{
				"sap.ui.demo.split": "./"
			}'>
	</script>
	<style>
	  .labelStyle{
	    font-size:0.975rem;
	    margin-top:12%;
	  }
	  .inputStyle{
	    margin-left:6%;
	  }
	  .flexStyle{
	        margin-left: 2%;
    }
	</style>
	<script>
				new sap.m.Shell("ShellId",{title: "Split App",
					showLogout: false,
					app: new sap.ui.core.ComponentContainer({
						name: "sap.ui.demo.split"		
					})
				}).placeAt("content");
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here

/* Styles go here */

jQuery.sap.declare("sap.ui.demo.split.Component");  
sap.ui.core.UIComponent.extend("sap.ui.demo.split.Component", {  
   createContent : function () {  
  // create root view  
	  var oView = sap.ui.view({  
		  id : "app",  
		  viewName : "sap.ui.demo.split.SplitHome",  
		  type : "JS",  
	  });  
	  
var myData= {  
  user:[{id:"1",firstname:"x",lastname:"k"},  
  {id:"2",firstname:"y",lastname:"k"},  
  {id:"3",firstname:"z",lastname:"k"}],  
  expense:[{expenseno:"1",uid:"1",item:"c",amount:"1500"},  
  {expenseno:"2",uid:"2",item:"t",amount:"1150"},  
  {expenseno:"3",uid:"3",item:"p",amount:"500"},  
  {expenseno:"4",uid:"1",item:"y",amount:"1000"},  
  {expenseno:"5",uid:"2",item:"t",amount:"3500"},  
  {expenseno:"6",uid:"3",item:"s",amount:"3500"},  
  {expenseno:"7",uid:"1",item:"q",amount:"900"}],  
};  
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			userData : [],
			expenseData : []
			}
			});
		oView.setModel(model);
		oView.getModel().setProperty("/modelData/userData", myData.user); 
		oView.getModel().setProperty("/modelData/expenseData", myData.expense); 
       
return oView;  
  }  
});  
sap.ui.jsview("sap.ui.demo.split.SplitHome", {  
  /** 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 routingdemo.App 
  */  
  getControllerName : function() {  
  return "sap.ui.demo.split.SplitHome";  
  },  
  /** 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 routingdemo.App 
  */  
  createContent : function(oController) {  
  this.setDisplayBlock(true);  
	this.app = new sap.m.App("mainApp",{initialPage:"SplitPage"});

		var page = sap.ui.jsview("SplitPage", "sap.ui.demo.split.SplitPage");
		this.app.addPage(page);
  return this.app;  
  }  
});
sap.ui.controller("sap.ui.demo.split.SplitHome", {

/**
* 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_sample.Home
*/
//	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_sample.Home
*/
//	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_sample.Home
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
//	onExit: function() {
//
//	}

});
sap.ui.jsview("sap.ui.demo.split.SplitPage", {  
  /** 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 routingdemo.App 
  */  
  getControllerName : function() {  
  return "sap.ui.demo.split.SplitPage";  
  },  
  /** 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 routingdemo.App 
  */  
  createContent : function(oController) {  
  var controller = this.oController;
	
	var oList = new sap.m.List({mode : sap.m.ListMode.SingleSelectMaster
		,showSeparators : sap.m.ListSeparators.All
		,swipeDirection : sap.m.SwipeDirection.Both
		,rememberSelections : false
		,selectionChange : function(oEvent){
		  controller.onPress(oEvent);
		}});

	var oTemplate = new sap.m.StandardListItem({
		title : "{firstname}"
			,icon : "sap-icon://employee"
				,type : sap.m.ListType.Navigation
	});

	var oSorter = new sap.ui.model.Sorter("Product", false, false);
	oList.bindItems("/modelData/userData",oTemplate,oSorter);
	
	var oSplitApp = new sap.m.SplitApp("oSplitApp");
	
	var oPage1 = new sap.m.Page({title:"User Details",content:[oList]});
	
	var oPage2 = new sap.m.Page({title:"Expense Details"});
	var oTable = new sap.m.Table({id:"oTable",
						mode:"SingleSelectMaster",
					});
	oPage2.addContent(oTable);
	
	oSplitApp.addMasterPage(oPage1);
	oSplitApp.addDetailPage(oPage2);
	
	return oSplitApp;
  }  
});
sap.ui.controller("sap.ui.demo.split.SplitPage", {

/**
* 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 table_v01.Main
*/

	onInit: function() {

	},
	
	onPress: function(oEvent){
  var oBindingPath = this.getView().getModel().getProperty(oEvent.getSource().getBinding("items").getContexts()[oEvent.getSource().indexOfItem(oEvent.getParameters().listItem)].sPath);
  var oSelectedID = oBindingPath.id;
  var oExpenseData = this.getView().getModel().getProperty("/modelData/expenseData");
  var oVBox = sap.ui.getCore().byId("oVBox");
  if(oVBox){
	  oVBox.removeAllItems();
	}
	var oModel=[];
  for(var i=0;i<oExpenseData.length;i++){
    if (oExpenseData[i].uid == oSelectedID){
    oModel.push(oExpenseData[i]);
    }
  }
  var oTable = sap.ui.getCore().byId("oTable");
  this.getView().getModel().setProperty("/modelData/generatedData",oModel);
	var oColumns = Object.keys(oModel[0]);
	var oColumnNames = [];
	for (var i=0;i<oColumns.length;i++){
	oColumnNames.push({Text:oColumns[i]});
		}
	this.getView().getModel().setProperty("/modelData/columnNames", oColumnNames);
	var oTemplate = new sap.m.Column({header: new sap.m.Label({text:"{Text}"})});
	oTable.bindAggregation("columns", "/modelData/columnNames",oTemplate);
	var oListTemplate = new sap.m.ColumnListItem();
	var oTableHeaders = oTable.getColumns();
	for(var i=0; i<oTableHeaders.length;i++){
	var oHeaderName = oTableHeaders[i].getHeader().getText();
	oListTemplate.addCell(new sap.m.Text({text:"{"+ oHeaderName +"}"}));
		}
	oTable.bindItems("/modelData/generatedData", oListTemplate);
  
	}

});