Skip to Content
0

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

Jan 12 at 12:20 PM

133

avatar image
Former Member

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Arjun Biswas Jan 15 at 03:37 AM
0

Use sap.m.Shell.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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

0

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

0
Antonette Venter Jan 15 at 07:25 AM
0

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 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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>

0

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

0