Skip to Content

SAPUI5 full screen app

Jun 01, 2017 at 06:22 PM


avatar image
Former Member

Hi ! I've createa an app using template 'SAP UI5 Application' in webIDE, but the app is not showing full screen. It has lateral borders. Is there any way I can set it to be full screen ?

I tried setting in component.js config : { fullWidth : true} but it doesn't do anything.

I am using:

<script id="sap-ui-bootstrap" src="../../resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-compatVersion="edge" > </script>

The app is custom, neither master-detail nor list, that's why I'm using simple UI5 App template.


10 |10000 characters needed characters left characters exceeded
Former Member

Here's the screen now: I want a full screen without the lateral light-blue borders.

bordersapp.png (29.9 kB)
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Ivan Mirisola
Dec 20, 2017 at 06:04 PM

Hi Jesap,

It depends on what you mean by full screen application. SAPUI5 is a responsive framework based on HTML5/CSS/Javascript and it automates the web application display based on the device you are using. In other words, it doesn't really matter if you are accessing the same application via browser on a 17" monitor or on a mobile phone - SAPUI5 will render the screen based on the available screen size and will place the screen components where they fit best. For instance: if you have a SplitApp (left list menu and detail pane) opened on a phone, the list will be displayed only while no item is pressed whereas on an iPad the list may be displayed the whole time. On the other hand, if you are using a 21" screen or larger you may have a centered app space with lateral bars on each side. The way it does this is by setting the width (either by percentage or by pixels) of components.

However, If you have a component from "sap.m" which is the one used in most cases, usually you do not have a width attribute. That's because these components are responsive and the width is automatically determined by the framework based on the available space. So you don't actually need to care about setting the app to full screen mode.

The concept of full screen toggle itself in SAPUI5 is usually a function that alters a particular piece of your app (i.e.: a table) to take all the available space. So instead of looking at a navigation list and details with header and items in a table you might be interested in looking just at the table items in full screen. For such cases you have a toggle button on the table header that users can switch the visualization mode of the app. But, even for such cases, the framework will deal with the available width and display the table on it. So, if your app has a width of 640px and has lateral bars on a 21" monitor, the table will use as much as 640px and not the entire screen. Take a look at the Smart Table control samples or any sample from the SDK to see that toggle button in action.


10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Jun 06, 2017 at 09:41 AM

please share screenshot..

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

I've added the screen of my app.

Iftah Peretz
Jan 07 at 08:46 AM


Good that you added a screenshot (in future cases add it to the question, by using the "Edit" button, or better yet upload it to begin with).

As you forgot to upload your code too, I am guessing your issue is the following:

In your "index.html" file, you have something like this

sap.ui.getCore().attachInit(function () {
	new sap.m.Shell({
		app: new sap.ui.core.ComponentContainer({
			name: "sap.ui.demo.wt",
			height: "100%"

The use of Shell is what I suspect causes this issue. Change it to this (of course, make sure to do the required adaptations to your app - I am just keeping it aligned with the example I started)

sap.ui.getCore().attachInit(function() {
	new sap.m.App ({
		pages: [
			new sap.m.Page({
				title: "Hello",
				enableScrolling : false,
				content: [ new sap.ui.core.ComponentContainer({
						height : "100%", name : "sap.ui.demo.wt"
10 |10000 characters needed characters left characters exceeded