<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
         <script id="sap-ui-bootstrap" 
                type="text/javascript"
                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.wt": "./"
			            }'>
        </script>
        <style>
          .LabelStyle{
                font-size: 0.975rem;
                margin-top: 15px;
          }
        </style>
        <script>
          var app = new sap.m.SplitApp("splitApp");
          var master = sap.ui.view({id:"master", viewName:"sap.ui.demo.wt.MasterView", type:sap.ui.core.mvc.ViewType.JS});
          app.addMasterPage(master);
          var detail = sap.ui.view({id:"detail", viewName:"sap.ui.demo.wt.DetailView", type:sap.ui.core.mvc.ViewType.JS});
          app.addDetailPage(detail);
          app.placeAt("content");
        </script>
  </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>
// Code goes here

/* Styles go here */

sap.ui.jsview("sap.ui.demo.wt.MasterView", {

	getControllerName : function() {
		return "sap.ui.demo.wt.MasterView";
	},

	createContent : function(oController) {
  
	var oList = new sap.m.List("oList",{mode : "SingleSelectMaster",
		showSeparators : "All",
		swipeDirection : "Both",
		rememberSelections : false,
		selectionChange : $.proxy(this.getController().onSelectionChange, this.getController()),
		updateFinished: $.proxy(this.getController().onUpdateFinished, this.getController())
	  });

	var oTemplate = new sap.m.StandardListItem({
		title : "{Product}",
		description : "{Weight}",
		icon : "sap-icon://product",
		type : "Navigation"
	});

	var oSorter = new sap.ui.model.Sorter("Product", false, false);
	oList.bindItems("/",oTemplate,oSorter);
	var oPage = new sap.m.Page({title:"Products", content:[oList]});
  return oPage;
	}

});
sap.ui.controller("sap.ui.demo.wt.MasterView", {

	onInit: function() {
      var dataObject = [
        {Product: "Power Projector 4713", Weight: "1467"},
        {Product: "Gladiator MX", Weight: "321"},
        {Product: "Hurricane GX", Weight: "588"},
        {Product: "Webcam", Weight: "700"},
        {Product: "Monitor Locking Cable", Weight: "40"},
        {Product: "Laptop Case", Weight: "1289"}];
      var oModel = new sap.ui.model.json.JSONModel();
      oModel.setData(dataObject);
    sap.ui.getCore().setModel(oModel);
	},

	onSelectionChange: function(oEvent) {
    var oContext = oEvent.getParameter("listItem").getBindingContext().getObject();
    sap.ui.getCore().getModel().setProperty("/ProductSelected", oContext.Product);
    sap.ui.getCore().getModel().setProperty("/WeightSelected", oContext.Weight);
	  },
	  
	onUpdateFinished: function(oEvent) {
	  var oList = oEvent.getSource();
    var oFirstItem = oEvent.getSource().getItems()[0];
    oList.setSelectedItem(oFirstItem);
    var oContext = oFirstItem.getBindingContext().getObject();
    sap.ui.getCore().getModel().setProperty("/ProductSelected", oContext.Product);
    sap.ui.getCore().getModel().setProperty("/WeightSelected", oContext.Weight);
	  }
	  
});
sap.ui.jsview("sap.ui.demo.wt.DetailView", {

	getControllerName : function() {
		return "sap.ui.demo.wt.DetailView";
	},

	createContent : function(oController) {
     
  var oHBox =  new sap.m.HBox({justifyContent:"SpaceAround",
    items:[new sap.m.Label({text:"Product Selected"}).addStyleClass("LabelStyle"),
    new sap.m.Input({value:"{/ProductSelected}", enabled:false}),
    new sap.m.Label({text:"Weight Selected"}).addStyleClass("LabelStyle"),
    new sap.m.Input({value:"{/WeightSelected}", enabled:false})]}) 
  var oPage = new sap.m.Page({title:"Product Detail", content:[oHBox]});
	return oPage;

	}

});
sap.ui.controller("sap.ui.demo.wt.DetailView", {

	onInit: function() {

	},


	onAfterRendering: function() {

	},


});