cancel
Showing results for 
Search instead for 
Did you mean: 

How can i implement fullscreen button in splitApp

0 Kudos

Hi Everyone,

I have been trying to find a solution to implement a fullscreen button in my splitApp, which makes detailPage part of the splitApp  as fullscreen (as wide as the screen).

I have a view which has the following code in createContent:

createContent : function( controller ) {

        if ( !sap.ui.Device.support.touch ) {

            this.addStyleClass( "sapUiSizeCompact" );

        }

        this.splitApp = new sap.m.SplitApp( "MySplitApp" );

        this.shell = new sap.m.Shell("MyShell",{

        app : this.splitApp

        });

        return this.shell;

Here is what i have tried for making detailPage as fullscreen. I have another view which has a fullscreen button, which when pressed hides the masterPage and i can see only the detailPage. So far so good. But i also want to make the detailPage as wide as the screen, which i am not able to find solution to. I have tried using setAppWidthLimited(false) method but it doesn't work. Any suggestion would be very helpful.

Thanks and Regards,

Abinash

Accepted Solutions (0)

Answers (1)

Answers (1)

Qualiture
Active Contributor
0 Kudos

The SAPUI5 Explored app has a fullscreen button, and it works by toggling the 'appWidthLimited' property (false for fullscreen, true otherwise) as well as setting the SplitApp's mode ('HideMode' for fullscreen, 'ShowHideMode' otherwise)

0 Kudos

Hi Robin,

Thanks for the info. That is exactly where i found out about setAppWidthLimited method by looking at the sourcecode. I tried to implement the same, but without any results.

Qualiture
Active Contributor
0 Kudos

Have you changed the 'mode' property to 'HideMode' too?

0 Kudos

Yes, i changed it as this.splitApp.setMode('HideMode');

But this just hides the masterPage. The width of the shell is not incremented.

Qualiture
Active Contributor
0 Kudos

You must be doing something wrong then; check this working demo: Edit fiddle - JSFiddle which spans the available screen width as well, not just the Shell width

0 Kudos

It works in the example which you have provided link to. But i already had the same approach earlier, but doesn't work. The masterPage is hidden and i can only see detailPage in the whole Shell container, but the screen width doesn't change at all.

I read somewhere that some SAP UI5 properties work in xml view but doesn't work in javascript view. My Shell component is inside a javascripte view. Do you think its a compatibility issue?

Qualiture
Active Contributor
0 Kudos

I don't think that matters; any properties such as 'appWidthLimited' property which expects just basic value types (int, string, boolean, etc) can be used in any view type.

Do you get any runtime errors in the console? Or did you use any custom CSS wrt app/shell/pages?