cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

sap.ui.unified.shell deprecated - what is the alternative?

manzu
Explorer

on ‎01-12-2018 12:20 PM

0 Kudos

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...)?

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (2)

Answers (2)

antonette_oberholster
Active Contributor
‎01-15-2018 7:25 AM
0 Kudos

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

Show replies
Show replies
manzu
Explorer
‎01-15-2018 1:16 PM
0 Kudos

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>

antonette_oberholster
Active Contributor
‎01-15-2018 1:24 PM
0 Kudos

Add this property to all your view's to prevent the scroll bar:

// App.view
<mvc:View 
	height="100%"
	DisplayBlock="true">
// Main.view
<mvc:View 
	DisplayBlock="true">

Regards

Antonette

former_member484715
Contributor
‎01-15-2018 3:37 AM
0 Kudos

Use sap.m.Shell.

Show replies
Show replies
manzu
Explorer
‎01-15-2018 7:01 AM
0 Kudos

But as far as i know sap.m.shell is only a container with no visible controls inside.

former_member484715
Contributor
‎01-15-2018 8:59 AM
0 Kudos

Okay, for the actions, you can use the SemanticPage (go through both m and f library).

former_member566188
Member
‎01-16-2019 4:50 AM
0 Kudos

Could you tell me how did you know that ?

Ask a Question