<!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 Form
# 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:form="sap.ui.layout.form"
xmlns:smartForm="sap.ui.comp.smartform"
xmlns:smartField="sap.ui.comp.smartfield">
<Page title="{i18n>homePageTitle}">
<content>
<smartForm:SmartForm
id="smartForm"
editTogglable="true"
title="{Name}"
flexEnabled="false">
<smartForm:Group label="Product">
<smartForm:GroupElement>
<smartField:SmartField value="{ProductId}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Name}" />
</smartForm:GroupElement>
<smartForm:GroupElement elementForLabel="1">
<smartField:SmartField value="{CategoryName}" />
<smartField:SmartField value="{Description}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Price}" />
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group label="Supplier">
<smartForm:GroupElement>
<smartField:SmartField value="{SupplierName}" />
</smartForm:GroupElement>
</smartForm:Group>
</smartForm:SmartForm>
</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": "4711",
"Name": "Power Projector 4711",
"CategoryName": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"Price": 856.49,
"CurrencyCode": "EUR"
}]
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.wt04"
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" Nullable="false"
sap:updatable="false" MaxLength="20" sap:label="Product ID" />
<Property Name="Name" Type="Edm.String" Nullable="false"
MaxLength="30" sap:label="Name" />
<Property Name="CategoryName" Type="Edm.String" sap:label="Category Description"
sap:updatable="true" />
<Property Name="Description" Type="Edm.String" MaxLength="256"
sap:label="Description" sap:updatable="true" />
<Property Name="Price" Type="Edm.String" Nullable="false"
sap:unit="CurrencyCode" MaxLength="3" sap:label="Price"
sap:updatable="true" />
<Property Name="CurrencyCode" Type="Edm.String" Nullable="true"
MaxLength="3" sap:label="Currency" sap:semantics="currency-code"
sap:updatable="true" />
<Property Name="SupplierName" Type="Edm.String" Nullable="false"
sap:label="Supplier" sap:updatable="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>
<EntityContainer m:IsDefaultEntityContainer="true"
sap:supported-formats="atom json">
<EntitySet Name="Products" EntityType="com.sap.wt04.Product" />
<EntitySet Name="Currency" EntityType="com.sap.wt04.Currency" />
</EntityContainer>
<Annotations Target="com.sap.wt04.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>
</Schema>
</edmx:DataServices>
</edmx:Edmx>