Skip to Content
avatar image
Former Member

SAPUI5 full screen app

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Dec 20, 2017 at 06:04 PM
    -2

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jun 06, 2017 at 09:41 AM

    please share screenshot..

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 07 at 08:46 AM

    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");
    });	
    
    Add comment
    10|10000 characters needed characters exceeded