<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script>
globalThis["sap-ui-config"] = {
securityTokenHandlers: [
() => new Promise(resolve => resolve({ "X-CSRF-Token": "42" })),
]
};
</script>
<!-- In production: use a specific UI5 version. -->
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludeJQueryCompat="true"
data-sap-ui-resourceRoots='{ "demo": "./" }'
data-sap-ui-xx-waitForTheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], (UIComponent) => {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
});
});
{
"_version": "1.63.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"myDataSource": {
"uri": "https://services.odata.org/TripPinRESTierService/(S(mysvc))/",
"type": "OData",
"settings": {
"odataVersion": "4.0"
}
}
}
},
"sap.ui5": {
"commands": {
"MyRefresh": {
"shortcut": "F5"
}
},
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.96",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {},
"sap.ui.unified": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"": {
"dataSource": "myDataSource",
"settings": {
"autoExpandSelect": true,
"operationMode": "Server",
"groupId": "$direct",
"earlyRequests": true,
"sharedRequests": true
},
"preload": true
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"height": "100%"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
}
}
<mvc:View controllerName="demo.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
height="100%"
displayBlock="true"
>
<App autoFocus="false">
<Page showHeader="false">
<List id="list"
headerText="Press F5"
items="{
path: '/People',
events: {
dataReceived: '.onDataReceived'
}
}"
>
<StandardListItem
title="{FirstName}"
description="{LastName}"
/>
<dependents>
<core:CommandExecution
command="MyRefresh"
execute=".onRefreshData"
/><!-- Ensure MyRefresh exists in manifest.json! Otherwise error in exit -->
</dependents>
</List>
</Page>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
], (Controller) => {
"use strict";
return Controller.extend("demo.controller.App", {
onDataReceived() {
setTimeout(() => this.byId("list").getItems()[0].focus());
},
onRefreshData() {
alert("Triggering data reload by F5");
// ...
},
});
});