on 01-12-2018 12:20 PM
Hi,
since sap.ui.unified.shell is seprecated since 1.44.0 I'm looking for an alternative. Isn't there a control in the framework anymore to display some user information and actions (log off, navigation back, home...)?
Hi Manual
The Fiori Launchpad has a built in Shell with logoff, home, back, app title etc. So we only have to develop the pages in UI5, the rest will be displayed in the Fiori Launchpad Shell.
If you don't have FLP and still need the icons and a header in your app, you can use the customHeader tag in a sap.m.Page and use a sap.m.OverflowToolbar to create a header that looks like Shell. Use ToolbarSpacer to align the icons/buttons/content left, in the middle and right.
<Page
id="pageMainViewId"
<customHeader>
<OverflowToolbar>
// Left
<ToolbarSpacer />
// Middle
<Title text="My App Title" />
<ToolbarSpacer />
// Right
<Text text="Welcome {userName}" />
<Image
src="images/logo.jpg"
height="35px"></Image>
</OverflowToolbar>
</customHeader>
<content>
...
Regards
Antonette
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Antonette,
thanks for your help.
unfortunately we do not use Fiori Launchpad, so I'm trying to use sap.m.page.
If I use sap.m.page without sap.m.app the content area is only a few pixels high.
If I use it with sap.m.app there is a ugly scrollbar at the right.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Übersicht Probenahme</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.50.8/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"MyApp": "./"}'
data-sap-ui-preload="">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "MyApp",
height : "100%"
})
}).placeAt("content");
});
</script>
</head>
<body id="content">
</body>
</html>
<mvc:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:variant="sap.ui.comp.variants"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:f="sap.ui.layout.form"
xmlns:fb="sap.ui.comp.filterbar"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
controllerName="myApp.controller.overview" >
<App>
<Page title="Text" showNavButton="true" class="sapUiContentPadding" enableScrolling="true">
<customHeader>
<OverflowToolbar>
<ToolbarSpacer />
<Title text="My App Title" />
<ToolbarSpacer />
<Text text="Welcome {userName}" />
<Image
src="https://c.s-microsoft.com/de-de/CMSImages/Windows_Homepage_Icon_OS_1920.jpg?version=5ed8b4a9-95b2-f795-62c8-e0bc2ade742a"
height="35px"></Image>
</OverflowToolbar>
</customHeader>
<content>
...
</content>
</Page>
</App>
</mvc:View>
Use sap.m.Shell.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Okay, for the actions, you can use the SemanticPage (go through both m and f library).
User | Count |
---|---|
96 | |
11 | |
11 | |
10 | |
9 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.