Preface – This post is part of the UI5 Programs series.

Introduction

When we create a blank UI5 Application, it is created with a blank view and controller. It is recommended to create an App view on top of these Individual views for pages, so that it can act as a root view for others. SAP recommends to have this file as a root view.

As a developer you might have these questions in mind:

1. Why App View is required in UI5?
   Ans. It is a root element of UI5 mobile App. It adds certain header tags which is important for mobile apps. Also, it provides navigation capabilities.
2. What will happen if no App view is added?
   Ans. You might get issue during navigation or during mobile view.
3. What all you can do with the help of App view?
   Ans. You can modify the background colour, background image, set home icon, set initial screen loader with the help of App view.

App View

You can simple add a new UI5 View by right clicking at project level and name it “App”. This will add a view and a controller in respective folders with name “App.view.xml” and “App.controller.js”. Remember, we don’t need any routing and navigation for the App view, hence you should delete that if it is created automatically.
Add the given code in view file:

<mvc:View controllerName="TestApp.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
    <App id="app"
         busy="{appView>/busy}"
         busyIndicatorDelay="{appView>/delay}"/>
    </Shell>
</mvc:View>

App Controller

Add the following code in controller file:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("TestApp.controller.App", {
        onInit: function () {
 
        }
    });
});

Manifest Changes

Inside manifest file, modify the object “rootView” as shown below:

"rootView": {
            "viewName": "TestApp.view.App",
            "type": "XML",
            "id": "app"
        }

Also set the controlId as “app” under config of routing.

Now, you have successfully added an App Root view in your custom UI5 App.

Full Manifest Code

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "testApp",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "oDataService": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "testApp.i18n.i18n"
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            },
            "ODataModel": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Request",
                    "json": true,
                    "defaultUpdateMethod": "PUT",
                    "useBatch": false
                },
                "dataSource": "oDataService",
                "preload": true
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "rootView": {
            "viewName": "testApp.view.App",
            "type": "XML",
            "id": "app"
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewPath": "testApp.view",
                "controlId": "app",
                "bypassed": {
                    "target": ["NotFound"]
                }
            },
            "routes": [{
                "name": "Tab_1",
                "pattern": "",
                "target": ["masterTarget", "Tab_1"]
            }, {
                "name": "Tab_2",
                "pattern": "Tab_2",
                "target": ["masterTarget", "Tab_2"]
            }],
            "targets": {
                "masterTarget": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "masterPages",
                    "viewId": "idMaster",
                    "viewName": "Master",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_1",
                    "viewName": "Tab_1",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_2": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_2",
                    "viewName": "Tab_2",
                    "viewLevel": 2,
                    "controlId": "Splitapp"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "webapp",
        "_version": "1.1.0"
    }
}