<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>SAPUI5 Greenfield</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' data-sap-ui-compatVersion='edge' data-sap-ui-bindingSyntax='complex' data-sap-ui-preload='async'
data-sap-ui-resourceroots='{
"sap.anz.mvc": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
name: "sap.anz.mvc",
height: "100%"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.anz.mvc.controller.App", {
// add app controller methods here
});
});
sap.ui.define(['sap/ui/core/mvc/Controller'], function(Controller) {
'use strict';
return Controller.extend('sap.anz.mvc.controller.Overview', {
getMonthFromWeek: function(oContext) {
var sCalendarYear = oContext.getProperty('year');
var sCalendarWeek = oContext.getProperty('weekNr');
var oWeekParser = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: 'YYYY-ww',
});
var oMonthFormatter = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: 'MMM',
});
var oWeekDate = oWeekParser.parse(`${sCalendarYear}-${sCalendarWeek}`);
var sMonth = oMonthFormatter.format(oWeekDate);
return sMonth;
},
compareCalendarWeekStrings: function (a, b) {
var iA = parseInt(a, 10),
iB = parseInt(b, 10);
if (iA === iB) {
return 0;
}
if (iA < iB) {
return -1;
}
if (iA > iB) {
return 1;
}
return 0;
}
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.anz.mvc.controller.NotFound", {
onInit: function () {
}
});
});
<mvc:View
controllerName="sap.anz.mvc.controller.App"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<!-- use App for proper headers and navigation -->
<App id="app"/>
</mvc:View>
<mvc:View
controllerName="sap.anz.mvc.controller.Overview"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
id="list"
items="{
path: '/weeks',
operationMode: 'Client',
sorter: {
path: 'weekNr',
comparator: '.compareCalendarWeekStrings',
group: '.getMonthFromWeek'
}
}">
<items>
<StandardListItem
title="{weekNr}" />
</items>
</List>
</mvc:View>
<mvc:View
controllerName="sap.anz.mvc.controller.NotFound"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<MessagePage
title="{i18n>NotFound}"
text="{i18n>NotFound.text}"
description="{i18n>NotFound.description}"/>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/odata/v2/ODataModel"
], function(UIComponent, JSONModel, ODataModel) {
"use strict";
return UIComponent.extend("sap.anz.mvc.Component", {
metadata: {
// instantiates the resource model thanks to the app descriptor
manifest: "json"
},
init: function() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set local data model (schedule.json)
var oConfig = this.getMetadata().getConfig();
var sNamespace = this.getMetadata().getManifestEntry("sap.app").id;
// mapping to the property "modelLocal" in the "config" property of the app descriptor
var oLocalModel = new JSONModel(jQuery.sap.getModulePath(sNamespace, oConfig.modelLocal));
this.setModel(oLocalModel);
// sample for remote JSON model definition
//var oConfig = this.getMetadata().getConfig();
//var oJSONModel = new ODataModel(oConfig./* destination in config prop of app descriptor */);
//this.setModel(oJSONModel, "JSON");
// create the views based on the url/hash
this.getRouter().initialize();
}
});
});
{
"_version": "1.0.0",
"sap.app": {
"_version": "1.0.0",
"id": "sap.anz.mvc",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "CA-UI5-DOC"
},
"sap.ui": {
"_version": "1.0.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize"
]
},
"sap.ui5": {
"_version": "1.0.0",
"rootView": "sap.anz.mvc.view.App",
"dependencies": {
"minUI5Version": "1.46",
"libs": {
"sap.m": {}
}
},
"config": {
"modelLocal": "/model/data.json"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.anz.mvc.i18n.i18n"
}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.anz.mvc",
"controlId": "app",
"controlAggregation": "pages",
"bypassed": {
"target": "notFound"
}
},
"routes": [{
"pattern": "",
"name": "overview",
"target": "overview"
}],
"targets": {
"overview": {
"viewName": "view/Overview",
"viewLevel": 1
},
"notFound": {
"viewName": "NotFound",
"transition": "show"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
}
# App Descriptor
appTitle=Hello World SAP ANZ
appDescription=A simple MVC-based SAPUI5 Greenfield app
# Overview View
homePageTitle=Expression Binding Example
# NotFound view
NotFound=Not Found
NotFound.text=Sorry, but the requested resource is not available.
NotFound.description=Please check the URL and try again.
/* add styles here */
.hideMessage {
display: none;
}
{
"weeks": [
{
"weekNr": "1",
"year": "2018"
},
{
"weekNr": "2",
"year": "2018"
},
{
"weekNr": "3",
"year": "2018"
},
{
"weekNr": "4",
"year": "2018"
},
{
"weekNr": "5",
"year": "2018"
},
{
"weekNr": "6",
"year": "2018"
},
{
"weekNr": "7",
"year": "2018"
},
{
"weekNr": "8",
"year": "2018"
},
{
"weekNr": "9",
"year": "2018"
},
{
"weekNr": "10",
"year": "2018"
},
{
"weekNr": "11",
"year": "2018"
},
{
"weekNr": "12",
"year": "2018"
}
]
}