<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludeJQueryCompat="true"
data-sap-ui-resourceRoots='{ "my.demo": "./" }'
data-sap-ui-xx-componentPreload="off"
data-sap-ui-xx-waitForTheme="init"
></script>
</head>
<body class="sapUiBody sapUiSizeCompact">
<div data-sap-ui-component
data-id="rootComponentContainer"
data-name="my.demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], (UIComponent) => {
"use strict";
return UIComponent.extend("my.demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
init() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
},
});
});
{
"_version": "1.60.0",
"start_url": "index.html",
"sap.app": {
"id": "my.demo",
"type": "application",
"title": "My Awesome App",
"description": "Sample Code",
"applicationVersion": {
"version": "0.0.1"
},
"dataSources": {}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.120",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"config": {
"sapFiori2Adaptation": true
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"css": []
},
"models": {
"": {
"type": "sap.ui.model.json.JSONModel"
}
},
"rootView": {
"viewName": "my.demo.view.App",
"id": "rootView",
"type": "XML",
"height": "100%",
"async": true
},
"routing": {
"routes": [
{
"name": "home",
"pattern": "",
"target": "home"
}
],
"targets": {
"home": {
"id": "homeView",
"name": "Home",
"level": 1
},
"notFound": {
"id": "notFoundView",
"name": "Home",
"transition": "slide",
"level": 98
}
},
"config": {
"routerClass": "sap.m.routing.Router",
"async": true,
"path": "my.demo.view",
"type": "View",
"viewType": "XML",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
}
}
}
}
<mvc:View controllerName="my.demo.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App id="rootApp" autoFocus="false">
<pages>
<!-- will be added by the Router -->
</pages>
</App>
</mvc:View>
<mvc:View controllerName="my.demo.controller.Home"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%"
>
<Page title="Home" showHeader="false" class="sapUiResponsiveContentPadding">
<Text text="Your content ..." />
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
], (Controller) => {
"use strict";
return Controller.extend("my.demo.controller.Home", {
onInit() {
// ...
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
], (Controller) => {
"use strict";
return Controller.extend("my.demo.controller.App", {
onInit() {
// ...
},
});
});
# UI5 Basic Template
Feel free to fork and use it for e.g. reporting issues, sharing samples on Q&A platforms, etc..
1. Open the [edit version of this plunk](https://plnkr.co/edit/16J1TFICxbqETCzaxuZ0).
2. Click on "Fork" or press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>.
3. Edit, save, and share the URL!
I recommend sharing the *embed* plunk with the following URL parameter:
```
https://embed.plnkr.co/<plunkID>/?show=preview:?sap-ui-xx-componentPreload=off
```
## Sharing Options
* Share the *embed* version of the plunk:
```
https://embed.plnkr.co/<plunkID>
```
* Share with specific multiple panes:
```
https://embed.plnkr.co/<plunkID>?show=myFolder/myScript.js,preview
```
* Share with URL parameters for the *preview* pane, whereas a leading `:?` is mandatory and `%26` corresponds to the `&` character in the URL:
```
https://embed.plnkr.co/<plunkID>?show=myFolder/myScript.js,preview:?<param1>=...%26<param2>=...
```
(See https://github.com/plnkr/feedback/issues/545 for the feature description and sample URLs)
For more sharing options, see the [documentation](https://ggoodman.gitbooks.io/plunker/content/embed.html#adding-the-embed-to-your-website).
## What about OData?
### OData V4
- Use the [OData V4 Trippin service](https://services.odata.org/TripPinRESTierService) directly which is [CORS enabled](https://github.com/OData/ODataSamples/issues/29#issuecomment-861736364). No reverse proxy server needed! However, there are [known issues in the TripPin service](https://github.com/search?q=repo%3AOData%2FODataSamples+%22v4%22+OR+%22trippin%22&type=issues&s=created&o=desc&state=open).
- Use one of the V4 services mentioned in https://blogs.sap.com/2017/12/05/new-sap-gateway-demo-system-available/ and sign up for a demo account on the "ES5" system as instructed in the blog post.
### OData V2
- Set up a [mock server](https://sdk.openui5.org/topic/3a9728ec31f94ca18a7d543ce419d85d) as none of the reference OData V2 services from `odata.org` currently support CORS. Consider voting for https://github.com/OData/ODataSamples/issues/145 (Give it a 👍).
- Use one of the V2 services mentioned in https://blogs.sap.com/2017/12/05/new-sap-gateway-demo-system-available/ and sign up for a demo account on the "ES5" system as instructed in the blog post.