<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>SAPUI5 v1.30 MVC 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, sap.ui.comp' data-sap-ui-compatVersion='edge' data-sap-ui-bindingSyntax='complex' data-sap-ui-preload='async'
data-sap-ui-resourceroots='{
"sap.anz.mvc": "./"
}'>
/*
for debugging mode, add sap-ui-debug=true to the URL
*/
</script>
<script>
sap.ui.getCore().attachInit(function() {
sap.ui.require([
"sap/anz/mvc/service/server"
], function(server) {
server.init();
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
});
});
<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>
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, "schedule");
// 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",
"dataSources": {
"mainService": {
"uri": "/here/goes/your/serviceUrl/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
},
"sap.ui": {
"_version": "1.0.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.0.0",
"rootView": "sap.anz.mvc.view.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {},
"sap.ui.comp": {}
}
},
"models": {
"": {
"dataSource": "mainService"
},
"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"
}]
}
},
"models": {
"": {
"dataSource": "mainService",
"settings" : {
"defaultBindingMode": "TwoWay"
}
}
}
}
# App Descriptor
appTitle=Hello World SAP ANZ
appDescription=A simple MVC-based SAPUI5 Greenfield app
# Overview View
homePageTitle=Smart Table w/ Smart Filter Bar
# 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 */
<mvc:View
controllerName="sap.anz.mvc.controller.Overview"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:smartTable="sap.ui.comp.smarttable">
<Page title="{i18n>homePageTitle}">
<content>
<smartFilterBar:SmartFilterBar
id="smartFilterBar"
entityType="Product"
persistencyKey="SmartFilterPKey">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration
key="Category" visibleInAdvancedArea="true"
preventInitialDataFetchInValueHelpDialog="false">
</smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable
id="smartTable_ResponsiveTable"
smartFilterId="smartFilterBar"
tableType="ResponsiveTable"
editable="false"
entitySet="Products"
useVariantManagement="true"
useTablePersonalisation="true"
header="Products"
showRowCount="true"
useExportToExcel="false"
enableAutoBinding="true"
persistencyKey="SmartTablePKey">
</smartTable:SmartTable>
</content>
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("sap.anz.mvc.controller.Overview", {
onInit: function() {
this.getView().bindElement("/Products('4711')");
}
});
});
<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/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.anz.mvc.controller.NotFound", {
onInit: function () {
}
});
});
[
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "INR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm"
},
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "INR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm"
},
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "INR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm"
}
]
sap.ui.define([
"sap/ui/core/util/MockServer"
], function (MockServer) {
"use strict";
return {
init: function () {
// create
var oMockServer = new MockServer({
rootUri: "/here/goes/your/serviceUrl/"
});
// configure
MockServer.config({
autoRespond: true,
autoRespondAfter: 1000
});
// simulate
var sPath = jQuery.sap.getModulePath("sap.anz.mvc.service");
oMockServer.simulate(sPath + "/metadata.xml", sPath);
// start
oMockServer.start();
}
};
});
[{
"CURR": "EUR",
"DESCR": "European Euro"
},
{
"CURR": "USD",
"DESCR": "United States Dollar"
},
{
"CURR": "GBP",
"DESCR": "British Pound"
},
{
"CURR": "DKK",
"DESCR": "Danish Krone"
},
{
"CURR": "INR",
"DESCR": "Indian Rupee"
},
{
"CURR": "NOK",
"DESCR": "Norwegian Krone"
},
{
"CURR": "SEK",
"DESCR": "Swedish Krona"
},
{
"CURR": "CHF",
"DESCR": "Swiss Franc"
}]
<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0"
xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
xmlns:sap="http://www.sap.com/Protocols/SAPData">
<edmx:DataServices m:DataServiceVersion="2.0">
<Schema Namespace="com.sap.wt05"
sap:schema-version="1" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
<EntityType Name="Product">
<Key>
<PropertyRef Name="ProductId" />
</Key>
<Property Name="ProductId" Type="Edm.String"
sap:filterable="false" />
<Property Name="Name" Type="Edm.String" MaxLength="30"
sap:label="Name" sap:filterable="false" />
<Property Name="Category" Type="Edm.String" sap:label="Category"
sap:filterable="true" />
<Property Name="Price" Type="Edm.String" sap:unit="CurrencyCode"
MaxLength="3" sap:label="Price" sap:filterable="false" />
<Property Name="CurrencyCode" Type="Edm.String" MaxLength="3"
sap:label="Currency" sap:semantics="currency-code" sap:filterable="true" />
</EntityType>
<EntityType Name="Currency">
<Key>
<PropertyRef Name="CURR" />
</Key>
<Property Name="CURR" Type="Edm.String" MaxLength="4"
sap:display-format="UpperCase" sap:text="DESCR" sap:label="Currency Code"
sap:filterable="false" />
<Property Name="DESCR" Type="Edm.String" MaxLength="25"
sap:label="Description" />
</EntityType>
<EntityType Name="Category">
<Key>
<PropertyRef Name="CAT" />
</Key>
<Property Name="CAT" Type="Edm.String" MaxLength="4"
sap:display-format="UpperCase" sap:text="DESCR" sap:label="Category"
sap:filterable="false" />
<Property Name="DESCR" Type="Edm.String" MaxLength="25"
sap:label="Description" />
</EntityType>
<EntityContainer m:IsDefaultEntityContainer="true"
sap:supported-formats="atom json">
<EntitySet Name="Products" EntityType="com.sap.wt05.Product" />
<EntitySet Name="Currency" EntityType="com.sap.wt05.Currency" />
<EntitySet Name="Category" EntityType="com.sap.wt05.Category" />
</EntityContainer>
<Annotations Target="com.sap.wt05.Product/CurrencyCode"
xmlns="http://docs.oasis-open.org/odata/ns/edm">
<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
<Record>
<PropertyValue Property="Label" String="Currency" />
<PropertyValue Property="CollectionPath" String="Currency" />
<PropertyValue Property="SearchSupported" Bool="true" />
<PropertyValue Property="Parameters">
<Collection>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterOut">
<PropertyValue Property="LocalDataProperty"
PropertyPath="CurrencyCode" />
<PropertyValue Property="ValueListProperty"
String="CURR" />
</Record>
<Record
Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty"
String="DESCR" />
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
<Annotations Target="com.sap.wt05.Product/Category"
xmlns="http://docs.oasis-open.org/odata/ns/edm">
<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
<Record>
<PropertyValue Property="Label" String="Category" />
<PropertyValue Property="CollectionPath" String="Category" />
<PropertyValue Property="SearchSupported" Bool="true" />
<PropertyValue Property="Parameters">
<Collection>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterOut">
<PropertyValue Property="LocalDataProperty"
PropertyPath="Category" />
<PropertyValue Property="ValueListProperty"
String="CAT" />
</Record>
<Record
Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty"
String="DESCR" />
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
<Annotations Target="com.sap.wt05.Product"
xmlns="http://docs.oasis-open.org/odata/ns/edm">
<Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
<Collection>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Value" Path="ProductId" />
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Value" Path="Price" />
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Value" Path="Name" />
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Value" Path="Category" />
</Record>
</Collection>
</Annotation>
</Annotations>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
[{
"CAT": "PRO",
"DESCR": "Projector"
},
{
"CAT": "GCD",
"DESCR": "Graphics Card"
},
{
"CAT": "ACC",
"DESCR": "Accessory"
},
{
"CAT": "PRI",
"DESCR": "Printer"
},
{
"CAT": "MON",
"DESCR": "Monitor"
},
{
"CAT": "LAP",
"DESCR": "Laptop"
},
{
"CAT": "KBD",
"DESCR": "Keyboard"
}]