<!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});
}*/
});