SAPUI5 full screen app

[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.

Thanks

[Former Member]

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

[former_member287057]

This will fix your problem:

In your component file add configuration for full screen as:

metadata: { manifest: "json", 
config: { fullWidth: true }   <-- this line of code

 },

[german_castaneda]

I added this line of code and also removed the <shell ... from my project.view.xml file

[iftah_peretz]

Hi,

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%"
			})
		}).placeAt("content");
	});

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"
					})]
				})
				]
		}).placeAt("content");
});	

[former_member227918]

please share screenshot..

[Former Member]

I've added the screen of my app.

[nova_carol]

SAP Web IDE is a web-based development environment that is optimized for developing SAPUI5 complex apps using the latest innovations, developing and extending SAP Fiori apps, developing mobile hybrid apps, and extending SAP Web IDE with plug-ins and templates.

https://sapui5.hana.ondemand.com/#/topic/13ced9493472408999143bc99bbb73b9

[Ivan-Mirisola]

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.

Regards,
Ivan