<!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>SplitApp Selection</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<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"></script>
<style>
.masterStyle{
width: 40%;
}
</style>
<!-- XML-based view definition -->
<script id="tableView" type="sapui5/xmlview">
<mvc:View controllerName="myView.SplitApp" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:s="sap.suite.ui.commons" xmlns="sap.m">
<App>
<pages>
<Page showHeader="false">
<content>
<SplitApp id="oSplitApp">
<masterPages>
<Page title="Master1" />
</masterPages>
<detailPages>
<Page title="Detail1">
</Page>
</detailPages>
</SplitApp>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("myView.SplitApp", {
onInit: function() {
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
oMasterNavID: []
}
});
sap.ui.getCore().setModel(model);
},
onAfterRendering: function(){
var oSplitApp = this.getView().byId("oSplitApp");
oSplitApp.getAggregation("_navMaster").addStyleClass("masterStyle");
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#tableView').html()
});
oView.placeAt('uiArea');
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 table -->
<div id="uiArea"></div>
</body>
</html>
// Code goes here
/* Styles go here */