<!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-resourceroots='{
				"home": "./"
			}'>
		</script>
		<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

		<script>
				var app = new sap.m.SplitApp("oSplitApp",{mode:"StretchCompressMode"});
				var oMasterPage = sap.ui.xmlview({id:"master", viewName:"home.MasterPage"});
				app.addMasterPage(oMasterPage);
				var oDetailPage = sap.ui.xmlview({id:"detail", viewName:"home.DetailPage"});
				app.addDetailPage(oDetailPage);
				app.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>
// Code goes here

/* Styles go here */

sap.ui.controller("home.MasterPage", {

/**
* 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 home.Home
*/
	onInit: function() {
	var dataObject = [
				{Product: "1-product", Weight: "2", Material:"Computer"},
				{Product: "2", Weight: "321", Material:"Product"}];
	var oModel = new sap.ui.model.json.JSONModel();
		oModel.setData(dataObject);
	sap.ui.getCore().setModel(oModel);
	
	
	
	},

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

/** 
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf home.Home
*/ 
//	onExit: function() { 
//
//	}
onUpdateFinish : function(oEvent){
  var firstItem = this.getView().byId("myList12").getItems()[0];   
          this.getView().byId("myList12").setSelectedItem(firstItem,true);
          debugger;
  var iPOCount = this.getView().byId("myList12").getSelectedItem().getBindingContext().getObject().Product;
			sap.ui.getCore().getModel().setProperty("/ProductSelected", iPOCount);
          
          
},
onPress: function(oEvent){
  var oModelContext = oEvent.getParameter("listItem").getBindingContext().getObject();
  sap.ui.getCore().getModel().setProperty("/ProductSelected", oModelContext.Product);
  
  
},
onPress2 : function(){
  var oSplitContainer = sap.ui.getCore().byId("oSplitApp");
  oSplitContainer.setMode(sap.m.SplitAppMode.StretchCompressMode);
  if(oSplitContainer.isMasterShown()){
 oSplitContainer.setMode(sap.m.SplitAppMode.HideMode);
}
  
  
}

});
<mvc:view
controllerName="home.MasterPage"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
  <Page title="Master Page" >
    <headerContent>
			<Button icon="sap-icon://menu2" tooltip="menu2" press="onPress2"/>
		</headerContent>
		<subHeader>
			<Toolbar>
				<SearchField />
			</Toolbar>
		</subHeader>
    <content>
      
      <List id="myList12" mode="SingleSelectMaster" updateFinished= "onUpdateFinish" selectionChange="onPress" items="{/}">
        <StandardListItem title="{Product}" description="{Weight}" type="Navigation"/>
      </List>
    </content>
  </Page>
</mvc:view>
<mvc:view
controllerName="home.DetailPage"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
  <Page title="Detail Page">
    <Label text="{/ProductSelected}" />
    
  </Page>
</mvc:view>
sap.ui.controller("home.DetailPage", {

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

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

/*onPress: function(oEvent){
  var oValue = oEvent.getParameter("listItem").getTitle();
  var oApp = sap.ui.getCore().byId("oApp");
  		var page = app.getPage("idDetail1");
	if(page === null )
	{
	var page = new sap.ui.jsview("idDetail1", "home.Detail");
		oApp.addPage(page);
	}
  oApp.to("idDetail1",{oTitle:oValue});
  
}*/

});