<!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,sap.ui.unified"
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= [{date:"2015-08-17",time:"8AM",title:"UI5 Table Issue",description:"Select is not working"},
{date:"2015-08-17",time:"9AM",title:"OData Issue",description:"Username is not Authorized"},
{date:"2015-08-17",time:"10AM",title:"Client Access",description:"Client Access Issue"},
{date:"2015-08-17",time:"11AM",title:"Busy Dialog",description:"Implmenet Busy Dialog for Applications"},
{date:"2015-08-17",time:"12PM",title:"Navigation Issue",description:"User Navigation Issue"},
{date:"2015-08-17",time:"1PM",title:"Process Issue",description:"Process Manufacturing Process Issue"},
{date:"2015-08-17",time:"2PM",title:"Status Call",description:"Attend Daily Status Call"},
{date:"2015-08-18",time:"3PM",title:"UI5 Page Issue",description:"Page is not working"},
{date:"2015-08-18",time:"4PM",title:"JSON Issue",description:"JSON is not Authorized"},
{date:"2015-08-18",time:"5PM",title:"Server Access",description:"Server Access Issue"},
{date:"2015-08-18",time:"6PM",title:"Busy Control",description:"Implmenet Busy Control for Applications"},
{date:"2015-08-18",time:"7PM",title:"Pagination Issue",description:"Table Pagination Issue"},
{date:"2015-08-18",time:"8PM",title:"Process Control Issue",description:"Process Issue"},
{date:"2015-08-18",time:"9PM",title:"Daily Call",description:"Attend Daily Meeting Call"},
{date:"2015-08-18",time:"10PM",title:"UI5 Table Issue",description:"Select is not working"},
{date:"2015-08-19",time:"8AM",title:"UI5 Table Issue",description:"Select is not working"},
{date:"2015-08-19",time:"9AM",title:"OData Issue",description:"Username is not Authorized"},
{date:"2015-08-19",time:"10AM",title:"Client Access",description:"Client Access Issue"},
{date:"2015-08-19",time:"11AM",title:"Busy Dialog",description:"Implmenet Busy Dialog for Applications"},
{date:"2015-08-19",time:"12PM",title:"Navigation Issue",description:"User Navigation Issue"},
{date:"2015-08-19",time:"1PM",title:"Process Issue",description:"Process Manufacturing Process Issue"},
{date:"2015-08-19",time:"2PM",title:"Status Call",description:"Attend Daily Status Call"},
{date:"2015-08-20",time:"3PM",title:"UI5 Page Issue",description:"Page is not working"},
{date:"2015-08-20",time:"4PM",title:"JSON Issue",description:"JSON is not Authorized"},
{date:"2015-08-20",time:"5PM",title:"Server Access",description:"Server Access Issue"},
{date:"2015-08-20",time:"6PM",title:"Busy Control",description:"Implmenet Busy Control for Applications"},
{date:"2015-08-20",time:"7PM",title:"Pagination Issue",description:"Table Pagination Issue"},
{date:"2015-08-20",time:"8PM",title:"Process Control Issue",description:"Process Issue"},
{date:"2015-08-20",time:"9PM",title:"Daily Call",description:"Attend Daily Meeting Call"},
{date:"2015-08-20",time:"10PM",title:"UI5 Table Issue",description:"Select is not working"},
{date:"2015-08-21",time:"8AM",title:"UI5 Table Issue",description:"Select is not working"},
{date:"2015-08-21",time:"9AM",title:"OData Issue",description:"Username is not Authorized"},
{date:"2015-08-21",time:"10AM",title:"Client Access",description:"Client Access Issue"},
{date:"2015-08-21",time:"11AM",title:"Busy Dialog",description:"Implmenet Busy Dialog for Applications"},
{date:"2015-08-21",time:"12PM",title:"Navigation Issue",description:"User Navigation Issue"},
{date:"2015-08-21",time:"1PM",title:"Process Issue",description:"Process Manufacturing Process Issue"},
{date:"2015-08-21",time:"2PM",title:"Status Call",description:"Attend Daily Status Call"}];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
userData : [],
expenseData : []
}
});
oView.setModel(model);
oView.getModel().setProperty("/modelData/taskData", myData);
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 oCalendar = new sap.ui.unified.Calendar({id:"Calendar",
select:function(oEvent){
controller.handleCalendarSelect(oEvent);
}
});
var oList = new sap.m.List("oList",{showSeparators : sap.m.ListSeparators.All
,swipeDirection : sap.m.SwipeDirection.Both
,rememberSelections : false
,selectionChange : function(oEvent){
}});
var oSplitApp = new sap.m.SplitApp("oSplitApp");
var oPage1 = new sap.m.Page({title:"User Details",content:[oCalendar]});
var oPage2 = new sap.m.Page({title:"Task Details"});
oPage2.addContent(oList);
oSplitApp.addMasterPage(oPage1);
oSplitApp.addDetailPage(oPage2);
return oSplitApp;
}
});
sap.ui.controller("sap.ui.demo.split.SplitPage", {
oFormatYyyymmdd: null,
/**
* 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() {
this.oFormatYyyymmdd = sap.ui.core.format.DateFormat.getInstance({pattern: "yyyy-MM-dd"});
},
handleCalendarSelect: function(oEvent) {
var oCalendar = oEvent.oSource;
var aSelectedDates = oCalendar.getSelectedDates();
var oDate = aSelectedDates[0].getStartDate();
var oSelectedDate = this.oFormatYyyymmdd.format(oDate);
var oTaskData = this.getView().getModel().getProperty("/modelData/taskData");
var oModel=[];
for(var i=0;i<oTaskData.length;i++){
if (oTaskData[i].date == oSelectedDate){
oModel.push(oTaskData[i]);
}
}
this.getView().getModel().setProperty("/modelData/taskGenerated",oModel);
var oList = sap.ui.getCore().byId("oList");
var oTemplate = new sap.m.StandardListItem({
title : "{time}",
description :"{title}",
info:"{description}",
icon : "sap-icon://task"
});
oList.bindItems("/modelData/taskGenerated",oTemplate);
}
});