MessageBox.success('You will be navigated back to the Fiori Launchpad', {
onClose: () => {
const oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation")
oCrossAppNavigator.toExternal({
target: {
semanticObject: "#"
}
})
}
})
Category: Fiori / SAPUI5
[SAPUI5] Add your own Logout functionality to the Launchpad Sandbox
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>
[SAPUI5] Enable Variant Management in Launchpad Sandbox
https://sapui5.hana.ondemand.com/sdk/#/topic/642dab291a7b47ec9d46c39b3c482aba
data-sap-ui-flexibilityServices='[{"connector": "LocalStorageConnector"}]'
[SAPUI5] Add custom header parameter to all oData queries
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
[SAPUI5] Suppress default oData error message / display meaningful error messages
Create a separate ErrorHandler.js file, like it is described here and either do your own error handler implementation, or take the sample from here. To avoid displaying multiple errors at once, follow this chapter.
Thanks to the provided dsag sample, this is takes only a few minutes and improves the user experience a lot!
[SAPUI5] Set custom header logo in Launchpad Sandbox
If you are using the Launchpad Sandbox in your CAP project (like it is done here or here) and you want to change the logo in the header bar, simply add this little CSS snippet in the launchpad.html file:
<style>
#shell-header-icon {
content: url("./logo.png");
}
</style>
Of course you could also provide a base64 encoded image:
<style>
#shell-header-icon {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAGGoAAAVNCAYAAAAIhfswAA...);
}
</style>
[SAPUI5] Create date object in UTC YYYY-MM-ddTHH:mm:ss
https://sapui5.hana.ondemand.com/#/api/sap.ui.core.format.DateFormat%23methods/format
const today = new Date()
const oDateTimeFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: "yyyy-MM-ddTHH:mm:ss",
UTC: true
})
const todayISO = oDateTimeFormat.format(today)
The UTC flag can also be set, when calling the format function.
const today = new Date()
const oDateTimeFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: "yyyy-MM-ddTHH:mm:ss",
//UTC: true
})
const todayISO = oDateTimeFormat.format(today, true)
[SAPUI5] Adding Lanes to a Process Flow
Manually adding Lanes to a Process Flow Control:
https://sapui5.hana.ondemand.com/#/api/sap.suite.ui.commons.ProcessFlow
https://sapui5.hana.ondemand.com/#/api/sap.suite.ui.commons.ProcessFlowLaneHeader
https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.commons.ProcessFlow/sample/sap.suite.ui.commons.sample.ProcessFlowUpdateLanes/code
In my case, there was no way to bind the model to the view, so I did the mapping for each ProcessFlowLaneHeader in the callback function after reading the oData entity.
view.xml
<flow:ProcessFlow id="process-flow"/>
controller.js
var oProcessFlow = this.getView().byId("process-flow")
var oRequestFilter = new sap.ui.model.Filter({
path: "myId",
operator: sap.ui.model.FilterOperator.EQ,
value1: myId
})
this.getView().getModel().read("/WorkflowSet", {
filters: [oFormularIdFilter],
success: (oData, response) => {
for (var i = 0; i < oData.results.length; i++) {
var oLaneHeader = new ProcessFlowLaneHeader({
laneId: oData.results[i].LaneId,
iconSrc: oData.results[i].IconSrc,
text: oData.results[i].Text,
position: oData.results[i].Position,
state: [{state: oData.results[i].State, value: "100"}]
});
oProcessFlow.addLane(oLaneHeader)
}
},
error: oError => {
sap.m.MessageToast.show("An error occured while reading entity /WorkflowSet.")
}
});
[Fiori Elements] Custom Column in a Table is not visible
I had a generated Fiori Elements App (done by using @sap/generator-fiori), containing a List, where I needed to add a custom column containing a Button. I found this well explained in the official documentation:
https://sapui5.hana.ondemand.com/#/topic/d525522c1bf54672ae4e02d66b38e60c
I followed the instructions exactly, but it didn’t work. When comparing my manifest.json again with the example, I noticed one minor difference. In my generated App, there was an extra items/ in front of the @com.sap.vocabularies.UI.v1.LineItem.
After removing items/ the custom column was suddenly visible. When I noticed the difference, I thought that would never be the reason. Luckily, I tested it after all. That really is a big problem with Fiori Elements. These are problems that can no longer be solved by debugging or similar.
Here some more helpful links, when challenging with a custom column:
[SAPUI5] Place fields horizontally opposite each other
Because I always forget how to place a field at the beginning of a line and one opposite at the end, I create this post…
The easiest way to do this is using a Flex Box and the property justifyContent like in this sample: https://sapui5.hana.ondemand.com/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxOpposingAlignment
<FlexBox alignItems="Center" width="100%" justifyContent="SpaceBetween">
<Text text="Text1" textAlign="Begin"/>
<Text text="Text2" textAlign="End"/>
</FlexBox>
Another way is a using a Toolbar and a ToolbarSpacer. But of course a Toolbar should only be used, when it makes sense to use a Toolbar.
<Toolbar>
<Text text="Text1" textAlign="Begin"/>
<ToolbarSpacer/>
<Text text="Text2" textAlign="End"/>
</Toolbar>