https://experience.sap.com/fiori-design-web/full-screen/
Simply add appWidthLimited:false in your index.html
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
appWidthLimited:false,
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "my.demo.app"
})
}).placeAt("content");
);
});
</script>
After redefining an OData Service like it is described here, you also have to add your new service in your Extension Project, so that the App knows, that it should use your redefined service instead of the default one. In the WebIDE there was a wizard that helped you with this task. In BAS there is also a wizard, but only for Adaptions Projects. For a classic extension project, there is no wizard anymore, and you have to manually add your new service to the manifest.json. But it is quite simple. You have to add your new service as data source and then also as a model. When no model name is provided, it will be used as default model.
"sap.app": {
"dataSources": {
"ZMY_NEW_SERVICE": {
"uri": "/sap/opu/odata/sap/ZHCMFAB_LEAVE_REQUEST_SRV/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
}
}
"sap.ui5": {
"models": {
"": {
"dataSource": "ZMY_NEW_SERVICE",
"preload": true,
"settings": {
"defaultBindingMode": "TwoWay",
"useBatch": true,
"refreshAfterChange": false,
"disableHeadRequestForToken": true,
"defaultCountMode": "Inline",
"metadataUrlParams": {
"sap-documentation": "heading"
}
}
}
}
},
I was wondering for quite some time, what the difference is between Extension Projects and Adaptions Projects. In the comments to this blog post, I finally found the answer from Oliver Graeff:
Adaptation projects are one of the capabilities of SAPUI5 flexibility, which lets developers, key users and end users adapt/extend SAPUI5 applications. Adaptation projects are the go-to solution for developer adaptation in SAPUI5 and are the ‘next-generation’ extension projects. Using the concepts of SAPUI5 flexibility, adaptation projects offer many more possibilities, such as extending SAP Fiori elements applications or extending apps without pre-defined extension points.
To check for a specific application, what the recommended extension approach is, simply go to the Fiori Reference Library, search for your app, choose the backend system (S/4 or Business Suite) and the current release version, navigate to Implementation Information and expand Extensibility. For example, My Overtime Requests on S/4HANA can be extended via an Adaption Project.
But on R/3, the only approach is an Extension Project.
Further helpful links:
Extending an SAP Fiori Application for an On-Premise System
Working with an Adaptation Project
Working with an SAPUI5 Extension Project
https://ga.support.sap.com/dtp/viewer/#/tree/1910/actions/24709
https://developers.sap.com/group.sapui5-adaptation-projects.html
https://sapui5.hana.ondemand.com/#/topic/a269671fc49e4c75920c108961bf31f2
This is discussed for many years and unfortunately will not be implemented in the UI5 framework itself (see here). There are already different blogs describing how to build a wrapper for oData requests (for example here and here).
But with ES2024 it now got super simple to do this:
async function readData(model, entitySet) {
const [promise, resolve, reject] = Promise.withResolver( )
model.read(entitySet, {
success: data => resolve(data),
error: error => reject(error)
})
return promise
}
const user = await readData(oDataModel, "/user")
this.getView().bindElement({
path: sObjectPath,
events: {
dataRequested: (oEvent) => {}, // Executed when a request to server is send
dataReceived: (oEvent) => {}, // Executed when data from server is received
change:(oEvent) => {}, // Executed everytime you do ElementBinding
}
})
The events for dataRequested and dataReceived are only fired, when data is requested or data is received from a backend. This is not the case, when the requested data is already available in the model from a previous backend call. In such situations, the change event comes in handy.
The same can also be done via XML:
binding="{
path: '/myEntitySet',
events: {
dataRequested: 'onDataRequested',
dataReceived: 'onDataReceived',
change: 'onDataChange'
}
}"
Just noticed, that with UI5 version 1.119.0 the getSecurityToken() function got replaced with securityTokenAvailable().
https://sapui5.hana.ondemand.com/#/api/sap.ui.model.odata.v2.ODataModel%23methods/getSecurityToken
// Returns the current security token if available; triggers a request to fetch the security token if it is not available.
const token = this.getModel().getSecurityToken() // Deprecated
// Returns a promise, which will resolve with the security token as soon as it is available.
const token = await this.getModel().securityTokenAvailable()
MessageBox.success('You will be navigated back to the Fiori Launchpad', {
onClose: () => {
const oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation")
oCrossAppNavigator.toExternal({
target: {
semanticObject: "#"
}
})
}
})
Use the attachLogoutEvent of the ushell container to trigger your approuter logout endpoint, that needs to be configured in your xs-app.json. The code in my launchpad.html looks like this:
<script>
sap.ui.getCore().attachInit(() => {
sap.ushell.Container.createRenderer('fiori2', true).then(renderer => renderer.placeAt("content"))
sap.ushell.Container.attachLogoutEvent(e => {
e.preventDefault()
window.location.replace('/do/logout')
}, false)
})
</script>
This way, you can reuse the default logout dialog logic the launchpad provides.
For completeness, find also my approuter configuration and custom logout page below.
My xs-app.json:
{
"welcomeFile": "index.html",
"authenticationMethod": "route",
"logout": {
"logoutEndpoint": "/do/logout",
"logoutPage": "/logged-out.html"
},
"sessionTimeout": 60,
"routes": [
{
"source": "^/logged-out.html$",
"localDir": ".",
"authenticationType": "none"
},
{
"source": "^/launchpad.html$",
"localDir": ".",
"authenticationType": "xsuaa",
"cacheControl": "no-cache, no-store, must-revalidate"
},
{
"source": "^/appconfig/(.*)$",
"localDir": ".",
"authenticationType": "xsuaa"
},
{
"source": "^/user-api(.*)",
"target": "$1",
"service": "sap-approuter-userapi",
"authenticationType": "xsuaa"
},
...
]
}
My logged-out.html file, placed in the approuter folder next to the launchpad.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logged out</title>
<style>
h2 {
font-family: "Arial", sans-serif;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="centered">
<h2>You are now logged out</h2>
</div>
</body>
</html>
https://sapui5.hana.ondemand.com/sdk/#/topic/642dab291a7b47ec9d46c39b3c482aba
data-sap-ui-flexibilityServices='[{"connector": "LocalStorageConnector"}]'
Simply go to your Component.js file and add this line to the init function:
this.getModel().setHeaders({"myCustomParameter": "test"})
In a CAP Backend, you get this parameter from the express req object, which can be accessed via the req.http property:
req.http.req.headers['myCustomParameter']
And here is a nice code snippet, on how to read this header parameter in an ABAP system: https://answers.sap.com/answers/425621/view.html