How to customise Shell container in SAPUI5

Question

I've a shell container and on big screens i want to utilize full with of screen. i want to cover full area. how i can customize it.

score 6 · Answer 1 · answered Oct 19 '16 at 15:30

6

I assume you are using XML for your views. Add the following attribute appWidthLimited="false" to the Shell tag.

answered Oct 19 '16 at 15:30

matbtt

4,230
19
26

score 5 · Answer 2 · edited Apr 24 '19 at 19:38

As per latest documentation, I referred to 1.48.X, and it's not there in the sap.ui5 anymore:

"sap.ui": {
    "technology": "UI5",
    "icons": {
        "icon": "sap-icon://add-contact",
        "favIcon": "icon/F1373_Approve_Purchase_Orders.ico",
        "phone": "icon/launchicon/57_iPhone_Desktop_Launch.png",
        "phone@2": "icon/launchicon/114_iPhone-Retina_Web_Clip.png",
        "tablet": "icon/launchicon/72_iPad_Desktop_Launch.png",
        "tablet@2": "icon/launchicon/144_iPad_Retina_Web_Clip.png"
    },
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": false
    },
    "supportedThemes": [
        "sap_hcb"
    ],
    "fullWidth": true
},

For more info: https://openui5.hana.ondemand.com/#/topic/be0cf40f61184b358b5faedaec98b2da

Also, if you are using sap.m.Shell, then the above will not help.
For that you need to set the property appWidthLimited: false:

<script>
    sap.ui.getCore().attachInit(function () {
        new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                height: "100%",
                name: "APPNAME"
            }),
            appWidthLimited: false
        })
        .placeAt("content");
    });
</script>

I do have this behavior in desktop, but I wonder why I have different appearance in iPad. Do anyone know to handle that, please? — Pille, Jul 19 '18 at 19:56
I tried both `appWidthLimited: false` and `"fullWidth": true`, but none of them works for me. I'm using SAPUI5 1.66 library. — Mike, Apr 24 '19 at 19:45
I would suggest please check the documentation once. As I have not checked with 1.66 version — Kunal Panchal, Jul 31 '19 at 09:42

score 4 · Accepted Answer · answered Oct 24 '16 at 17:53

4

When working with a manifest.json file and the UI5-framework instantiates a shell control, do the following (appWidthLimited="false" cannot be used as you don't have a xml containing a shell 'tag').

manifest.json

...
"sap.ui5": {
    "config": {
        "fullWidth": true
    },
    ...
...

answered Oct 24 '16 at 17:53

Michael Biermann

3,105
27
23

Hi there. How can I do it in run-time? I have 2 views. I need just 1 one of them in fullwidth format – MJBZA Jan 19 '18 at 12:05
@MahdiJ.Ansari You can do that with the service module `sap/ushell/services/AppConfiguration` while the app is running on FLP. See https://stackoverflow.com/a/56137602/5846045 – Boghyon Hoffmann May 14 '19 at 19:50

Mike · Answer 4 · 2019-05-10T07:45:53.413

It can be done either statically, via XML-template:

<mvc:View controllerName="letterboxing.widescreen.controller.index" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell" appWidthLimited="false">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content></content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Or dynamically via JS-controller, which will set appWidthLimited:false to the sap.m.Shell.

How to customise Shell container in SAPUI5

4 Answers4

Linked