@sapui5/sap.ushell 1.134.0 → 1.135.0

package/src/main/js/sap/ushell/renderer/Renderer.js

@@ -13,7 +13,7 @@ sap.ui.define([
     "sap/ushell/Container",
     "sap/ushell/EventHub",
     "sap/ushell/utils",
-    "sap/ushell/components/applicationIntegration/AppLifeCycle",
+    "sap/ushell/appIntegration/AppLifeCycle",
     "sap/ui/Device",
     "sap/ui/model/json/JSONModel",
     "sap/ushell/components/SharedComponentUtils",
@@ -35,8 +35,7 @@ sap.ui.define([
     "sap/ushell/ui/launchpad/ActionItem",
     "sap/ushell/state/ShellModel",
     "sap/ushell/state/StateManager",
-    "sap/ushell/renderers/fiori2/RendererExtensions", // restore deprecated globals
-    "sap/ushell/components/applicationIntegration/configuration/AppMeta"
+    "sap/ushell/renderers/fiori2/RendererExtensions" // restore deprecated globals
 ], function (
     Component,
     Element,
@@ -68,8 +67,7 @@ sap.ui.define([
     ActionItem,
     ShellModel,
     StateManager,
-    RendererExtensions, // restore deprecated globals
-    AppMeta
+    RendererExtensions // restore deprecated globals
 ) {
     "use strict";
 
@@ -102,11 +100,11 @@ sap.ui.define([
      * @since 1.15.0
      * @private
      */
-    var Renderer = UIComponent.extend("sap.ushell.renderer.Renderer", /** @lends sap.ushell.renderer.Renderer.prototype */ {
+    const Renderer = UIComponent.extend("sap.ushell.renderer.Renderer", /** @lends sap.ushell.renderer.Renderer.prototype */ {
         metadata: {
-            version: "1.134.0",
+            version: "1.135.0",
             dependencies: {
-                version: "1.134.0",
+                version: "1.135.0",
                 libs: ["sap.ui.core", "sap.m"],
                 components: []
             },
@@ -303,7 +301,7 @@ sap.ui.define([
         init: function () {
             UIComponent.prototype.init.apply(this, arguments);
 
-            var oRouter = this.getRouter();
+            const oRouter = this.getRouter();
 
             // Track flp navigation with ShellAnalytics
             [
@@ -343,39 +341,44 @@ sap.ui.define([
                 oRouter.navTo("appfinder", {}, true);
             });
 
-            oRouter.getRoute("appfinder").attachMatched(function (oEvent) {
+            oRouter.getRoute("appfinder").attachMatched(async function (oEvent) {
                 if (!Config.last("/core/catalog/enabled")) {
                     Log.warning("AppFinder is disabled. Re-route to the homepage.");
                     oRouter.navTo("home", null, true);
                     return;
                 }
 
-                var oComponent = Component.getComponentById(this.createId("Shell-appfinder-component"));
-                var oData = oEvent.getParameter("arguments");
+                const oComponent = Component.getComponentById(this.createId("Shell-appfinder-component"));
+                const oData = oEvent.getParameter("arguments");
                 if (Container.getRendererInternal("fiori2")) {
                     AppLifeCycleAI.getShellUIService().setBackNavigation();
                     Container.getRendererInternal("fiori2").setCurrentCoreView("appFinder");
                 }
                 AppConfiguration.setCurrentApplication(null);
 
-                var oAppFinderRouter = oComponent.getRouter();
+                const oAppFinderRouter = oComponent.getRouter();
                 // wait for the root view to be loaded before the inner hash is forwarded to the AppFinder component
                 oComponent.getRootControl().loaded().then(function () {
                     oAppFinderRouter.parse(oData["innerHash*"] || "");
                 });
 
-                AppLifeCycleAI.switchViewState("app", false, "Shell-appfinder");
-                AppMeta.setAppIcons();
+                AppLifeCycleAI.switchViewState(LaunchpadState.App, false, "Shell-appfinder");
+
+                if (Config.last("/core/navigation/enableAppLifeCycleFallback")) {
+                    ushellUtils.requireAsync(["sap/ushell/components/applicationIntegration/configuration/AppMeta"]).then(([AppMeta]) => {
+                        AppMeta.setAppIcons();
+                    });
+                }
 
                 oSharedComponentUtils.initializeAccessKeys();
             }, this);
 
             oRouter.getRoute("wzsearch").attachMatched(function (oEvent) {
                 AppLifeCycleAI.getShellUIService().setBackNavigation();
-                AppLifeCycleAI.switchViewState("app", false, "cepsearchresult-app");
+                AppLifeCycleAI.switchViewState(LaunchpadState.App, false, "cepsearchresult-app");
             });
 
-            var oDeviceModel = new JSONModel(Device);
+            const oDeviceModel = new JSONModel(Device);
             oDeviceModel.setDefaultBindingMode("OneWay");
             this.setModel(oDeviceModel, "device");
             this.setModel(resources.i18nModel, "i18n");
@@ -396,18 +399,18 @@ sap.ui.define([
             });
         }
 
-        var sCurrentHash = window.hasher.getHash();
+        const sCurrentHash = window.hasher.getHash();
         if (!Config.last("/core/spaces/enabled") && sCurrentHash.indexOf("Launchpad-openFLPPage") === 0) {
             Container.getServiceAsync("ShellNavigationInternal").then(function (ShellNavigationInternal) {
                 ShellNavigationInternal.replaceHashWithoutNavigation("Shell-home");
             });
         }
 
-        var sCustomHomeTitle = Config.last("/core/shell/homePageTitle");
-        var sHomeTitle = resources.getTranslationFromJSON(sCustomHomeTitle) || resources.i18n.getText("homeBtn_tooltip");
+        const sCustomHomeTitle = Config.last("/core/shell/homePageTitle");
+        const sHomeTitle = resources.getTranslationFromJSON(sCustomHomeTitle) || resources.i18n.getText("homeBtn_tooltip");
 
-        var sRootIntent = this.getShellConfig().rootIntent;
-        var bIsRootIntentFlpHome = !sRootIntent || ushellUtils.isFlpHomeIntent(sRootIntent);
+        const sRootIntent = this.getShellConfig().rootIntent;
+        const bIsRootIntentFlpHome = !sRootIntent || ushellUtils.isFlpHomeIntent(sRootIntent);
 
         // switch to home first so that #set calls below have effect
         AppLifeCycleAI.switchViewState(bIsRootIntentFlpHome ? LaunchpadState.Home : LaunchpadState.App, false, "Shell-home");
@@ -418,7 +421,11 @@ sap.ui.define([
         AppLifeCycleAI.getShellUIService().setTitle(sHomeTitle);
         AppLifeCycleAI.getShellUIService().setHierarchy();
         AppLifeCycleAI.getShellUIService().setRelatedApps();
-        AppMeta.setAppIcons(); // For the custom theme the favicon should be loaded get from theme parameter
+        if (Config.last("/core/navigation/enableAppLifeCycleFallback")) {
+            ushellUtils.requireAsync(["sap/ushell/components/applicationIntegration/configuration/AppMeta"]).then(([AppMeta]) => {
+                AppMeta.setAppIcons(); // For the custom theme the favicon should be loaded get from theme parameter
+            });
+        }
 
         oSharedComponentUtils.initializeAccessKeys();
     };
@@ -432,8 +439,8 @@ sap.ui.define([
      */
     Renderer.prototype._getHomeAppTarget = function () {
         return Container.getServiceAsync("Ui5ComponentLoader").then(function (Ui5ComponentLoader) {
-            var oHomeAppComponent = Config.last("/core/homeApp/component");
-            var aCoreResourcesComplement = Ui5ComponentLoader.getCoreResourcesComplementBundle();
+            const oHomeAppComponent = Config.last("/core/homeApp/component");
+            const aCoreResourcesComplement = Ui5ComponentLoader.getCoreResourcesComplementBundle();
 
             if (oHomeAppComponent.url) {
                 return {
@@ -473,8 +480,8 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.createContent = function () {
-        var viewData = this.getComponentData() || {};
-        var oAppConfig = {
+        const viewData = this.getComponentData() || {};
+        const oAppConfig = {
             applications: { "Shell-home": {} },
             rootIntent: "Shell-home"
         };
@@ -559,7 +566,7 @@ sap.ui.define([
      * @deprecated since 1.120
      */
     Renderer.prototype._createSyncContent = function (viewData) {
-        var oSyncView = sap.ui.view("mainShell", { // LEGACY API (deprecated)
+        const oSyncView = sap.ui.view("mainShell", { // LEGACY API (deprecated)
             type: ViewType.JS,
             viewName: "sap.ushell.renderers.fiori2.Shell",
             height: "100%",
@@ -1115,11 +1122,11 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.setShellFooter = function (oParameters) {
-        var oDeferred = new jQuery.Deferred();
-        var that = this;
-        var oControlInstance;
-        var controlType = oParameters.controlType;
-        var oControlProperties = oParameters.oControlProperties;
+        const oDeferred = new jQuery.Deferred();
+        const that = this;
+        let oControlInstance;
+        const controlType = oParameters.controlType;
+        const oControlProperties = oParameters.oControlProperties;
 
         if (!controlType) {
             Log.warning("You must specify control type in order to create it");
@@ -1133,7 +1140,7 @@ sap.ui.define([
             return oDeferred.promise();
         }
 
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         sap.ui.require([sControlResource], function (ControlObject) {
             // If a control instance is already created - get it by its id
             oControlInstance = Element.getElementById(oControlProperties.id);
@@ -1188,27 +1195,27 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.setFooterControl = function (controlType, oControlProperties) {
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         // Try to require the control in case it is already loaded
-        var ControlObject = sap.ui.require(sControlResource);
-        var bResourceLoadedAsObject = false;
+        const ControlObject = sap.ui.require(sControlResource);
+        let bResourceLoadedAsObject = false;
 
         // Verify whether the control type is already loaded
         if (ControlObject) {
             bResourceLoadedAsObject = true;
         } else if (!ObjectPath.get(controlType || "")) {
             // since 1.94, follow up for deprecation in 1.48
-            Log.error("Renderer.setFooterControl: the referenced control resource " + controlType + " is not available.",
+            Log.error(`Renderer.setFooterControl: the referenced control resource ${controlType} is not available.`,
                 undefined, "sap.ushell.renderer.Renderer");
             return undefined;
         }
 
-        var oControlInstance = this.createItem(oControlProperties, undefined, function (oProperties) {
+        const oControlInstance = this.createItem(oControlProperties, undefined, function (oProperties) {
             if (controlType) {
                 if (bResourceLoadedAsObject) {
                     return new ControlObject(oProperties);
                 }
-                var ControlPrototype = ObjectPath.get(controlType || "");
+                const ControlPrototype = ObjectPath.get(controlType || "");
                 return new ControlPrototype(oProperties);
             }
             Log.warning("You must specify control type in order to create it");
@@ -1395,7 +1402,7 @@ sap.ui.define([
         if (footerId === this.shellCtrl.getFooterId()) {
             this.shellCtrl.removeFooter();
         }
-        var oFooter = Element.getElementById(footerId);
+        const oFooter = Element.getElementById(footerId);
         if (oFooter) {
             oFooter.destroy();
         }
@@ -1414,7 +1421,7 @@ sap.ui.define([
         this.shellCtrl.removeFooter();
         //If the footer was created by the renderer (setFooterControl API) then we will destroy it after it removed
         if (this.lastFooterId) {
-            var oFooter = Element.getElementById(this.lastFooterId);
+            const oFooter = Element.getElementById(this.lastFooterId);
             if (oFooter) {
                 oFooter.destroy();
             }
@@ -1463,14 +1470,14 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.addShellSubHeader = function (oParameters) {
-        var oDeferred = new jQuery.Deferred();
-        var that = this;
-        var oControlInstance;
-        var controlType = oParameters.controlType;
-        var oControlProperties = oParameters.oControlProperties;
-        var bIsVisible = oParameters.bIsVisible;
-        var bCurrentState = oParameters.bCurrentState;
-        var aStates = oParameters.aStates;
+        const oDeferred = new jQuery.Deferred();
+        const that = this;
+        let oControlInstance;
+        const controlType = oParameters.controlType;
+        const oControlProperties = oParameters.oControlProperties;
+        const bIsVisible = oParameters.bIsVisible;
+        const bCurrentState = oParameters.bCurrentState;
+        const aStates = oParameters.aStates;
 
         if (!controlType) {
             Log.warning("You must specify control type in order to create it");
@@ -1484,7 +1491,7 @@ sap.ui.define([
             return oDeferred.promise();
         }
 
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         sap.ui.require([sControlResource], function (ControlObject) {
             // If a control instance is already created - get it by its id
             oControlInstance = Element.getElementById(oControlProperties.id);
@@ -1546,27 +1553,27 @@ sap.ui.define([
     Renderer.prototype.addSubHeader = function (controlType, oControlProperties, bIsVisible, bCurrentState, vStates) {
         const aStates = this._sanitizeStates(vStates);
 
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         // Try to require the control in case it is already loaded
-        var ControlObject = sap.ui.require(sControlResource);
-        var bResourceLoadedAsObject = false;
+        const ControlObject = sap.ui.require(sControlResource);
+        let bResourceLoadedAsObject = false;
 
         // Verify whether the control type is already loaded
         if (ControlObject) {
             bResourceLoadedAsObject = true;
         } else if (!ObjectPath.get(controlType || "")) {
             // since 1.94, follow up for deprecation in 1.48
-            Log.error("Renderer.setFooterControl: the referenced control resource " + controlType + " is not available.",
+            Log.error(`Renderer.setFooterControl: the referenced control resource ${controlType} is not available.`,
                 undefined, "sap.ushell.renderer.Renderer");
             return undefined;
         }
 
-        var oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
             if (controlType) {
                 if (bResourceLoadedAsObject) {
                     return new ControlObject(oProperties);
                 }
-                var ControlPrototype = ObjectPath.get(controlType || "");
+                const ControlPrototype = ObjectPath.get(controlType || "");
                 return new ControlPrototype(oProperties);
             }
             Log.warning("You must specify control type in order to create it");
@@ -1616,8 +1623,8 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.addUserAction = function (oParameters) {
-        var oDeferred = new jQuery.Deferred();
-        var that = this;
+        const oDeferred = new jQuery.Deferred();
+        const that = this;
         let { controlType } = oParameters;
         const {
             oControlProperties,
@@ -1662,7 +1669,7 @@ sap.ui.define([
 
             oDeferred.resolve(oControlInstance);
         }, function () {
-            var sControlTypeErrorMessage = "The control type " + sControlType + " is not available.";
+            const sControlTypeErrorMessage = `The control type ${sControlType} is not available.`;
             Log.error(sControlTypeErrorMessage);
             oDeferred.reject(sControlTypeErrorMessage);
         });
@@ -1702,32 +1709,32 @@ sap.ui.define([
      */
     Renderer.prototype.addActionButton = function (controlType, oControlProperties, bIsVisible, bCurrentState, vStates) {
         const aStates = this._sanitizeStates(vStates);
-        var bResourceLoadedAsObject = false;
+        let bResourceLoadedAsObject = false;
 
         if (controlType === "sap.m.Button") {
             controlType = "sap.ushell.ui.launchpad.ActionItem";
         }
 
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         // Try to require the control in case it is already loaded
-        var ControlObject = sap.ui.require(sControlResource);
+        const ControlObject = sap.ui.require(sControlResource);
 
         // Verify whether the control type is already loaded
         if (ControlObject) {
             bResourceLoadedAsObject = true;
         } else if (!ObjectPath.get(controlType || "")) {
             // since 1.94, follow up for deprecation in 1.48
-            Log.error("Renderer.setFooterControl: the referenced control resource " + controlType + " is not available.",
+            Log.error(`Renderer.setFooterControl: the referenced control resource ${controlType} is not available.`,
                 undefined, "sap.ushell.renderer.Renderer");
             return undefined;
         }
 
-        var oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
             if (controlType) {
                 if (bResourceLoadedAsObject) {
                     return new ControlObject(oProperties);
                 }
-                var ControlPrototype = ObjectPath.get(controlType || "");
+                const ControlPrototype = ObjectPath.get(controlType || "");
                 return new ControlPrototype(oProperties);
             }
             Log.warning("You must specify control type in order to create it");
@@ -1773,14 +1780,14 @@ sap.ui.define([
      * @deprecated since 1.52
      */
     Renderer.prototype.addFloatingButton = function (oParameters) {
-        var oDeferred = new jQuery.Deferred();
-        var that = this;
-        var oControlInstance;
-        var sControlType = oParameters.controlType || "sap.m.Button";
-        var oControlProperties = oParameters.oControlProperties;
-        var bIsVisible = oParameters.bIsVisible;
-        var bCurrentState = oParameters.bCurrentState;
-        var aStates = oParameters.aStates;
+        const oDeferred = new jQuery.Deferred();
+        const that = this;
+        let oControlInstance;
+        const sControlType = oParameters.controlType || "sap.m.Button";
+        const oControlProperties = oParameters.oControlProperties;
+        const bIsVisible = oParameters.bIsVisible;
+        const bCurrentState = oParameters.bCurrentState;
+        const aStates = oParameters.aStates;
 
         if (!oControlProperties) {
             Log.warning("You must specify control properties in order to create it");
@@ -1788,7 +1795,7 @@ sap.ui.define([
             return oDeferred.promise();
         }
 
-        var sControlResource = sControlType.replace(/\./g, "/");
+        const sControlResource = sControlType.replace(/\./g, "/");
         sap.ui.require([sControlResource], function (ControlObject) {
             // If a control instance is already created - get it by its id
             oControlInstance = Element.getElementById(oControlProperties.id);
@@ -1838,32 +1845,32 @@ sap.ui.define([
      */
     Renderer.prototype.addFloatingActionButton = function (controlType, oControlProperties, bIsVisible, bCurrentState, vStates) {
         const aStates = this._sanitizeStates(vStates);
-        var bResourceLoadedAsObject = false;
+        let bResourceLoadedAsObject = false;
 
         if (!controlType) {
             controlType = "sap.m.Button";
         }
 
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         // Try to require the control in case it is already loaded
-        var ControlObject = sap.ui.require(sControlResource);
+        const ControlObject = sap.ui.require(sControlResource);
 
         // Verify whether the control type is already loaded
         if (ControlObject) {
             bResourceLoadedAsObject = true;
         } else if (!ObjectPath.get(controlType || "")) {
             // since 1.94, follow up for deprecation in 1.48
-            Log.error("Renderer.setFooterControl: the referenced control resource " + controlType + " is not available.",
+            Log.error(`Renderer.setFooterControl: the referenced control resource ${controlType} is not available.`,
                 undefined, "sap.ushell.renderer.Renderer");
             return undefined;
         }
 
-        var oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
             if (controlType) {
                 if (bResourceLoadedAsObject) {
                     return new ControlObject(oProperties);
                 }
-                var ControlPrototype = ObjectPath.get(controlType || "");
+                const ControlPrototype = ObjectPath.get(controlType || "");
                 return new ControlPrototype(oProperties);
             }
             Log.warning("You must specify control type in order to create it");
@@ -1919,14 +1926,14 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.addSidePaneContent = function (oParameters) {
-        var oDeferred = new jQuery.Deferred();
-        var that = this;
-        var oControlInstance;
-        var controlType = oParameters.controlType;
-        var oControlProperties = oParameters.oControlProperties;
-        var bIsVisible = oParameters.bIsVisible;
-        var bCurrentState = oParameters.bCurrentState;
-        var aStates = oParameters.aStates;
+        const oDeferred = new jQuery.Deferred();
+        const that = this;
+        let oControlInstance;
+        const controlType = oParameters.controlType;
+        const oControlProperties = oParameters.oControlProperties;
+        const bIsVisible = oParameters.bIsVisible;
+        const bCurrentState = oParameters.bCurrentState;
+        const aStates = oParameters.aStates;
 
         if (!controlType) {
             Log.warning("You must specify control type in order to create it");
@@ -1940,7 +1947,7 @@ sap.ui.define([
             return oDeferred.promise();
         }
 
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         sap.ui.require([sControlResource], function (ControlObject) {
             // If a control instance is already created - get it by its id
             oControlInstance = Element.getElementById(oControlProperties.id);
@@ -1990,27 +1997,27 @@ sap.ui.define([
      */
     Renderer.prototype.addLeftPaneContent = function (controlType, oControlProperties, bIsVisible, bCurrentState, vStates) {
         const aStates = this._sanitizeStates(vStates);
-        var sControlResource = controlType.replace(/\./g, "/");
+        const sControlResource = controlType.replace(/\./g, "/");
         // Try to require the control in case it is already loaded
-        var ControlObject = sap.ui.require(sControlResource);
-        var bResourceLoadedAsObject;
+        const ControlObject = sap.ui.require(sControlResource);
+        let bResourceLoadedAsObject;
 
         // Verify whether the control type is already loaded
         if (ControlObject) {
             bResourceLoadedAsObject = true;
         } else if (!ObjectPath.get(controlType || "")) {
             // since 1.94, follow up for deprecation in 1.48
-            Log.error("Renderer.setFooterControl: the referenced control resource " + controlType + " is not available.",
+            Log.error(`Renderer.setFooterControl: the referenced control resource ${controlType} is not available.`,
                 undefined, "sap.ushell.renderer.Renderer");
             return undefined;
         }
 
-        var oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oControlInstance = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
             if (controlType) {
                 if (bResourceLoadedAsObject) {
                     return new ControlObject(oProperties);
                 }
-                var ControlPrototype = ObjectPath.get(controlType || "");
+                const ControlPrototype = ObjectPath.get(controlType || "");
                 return new ControlPrototype(oProperties);
             }
             Log.warning("You must specify control type in order to create it");
@@ -2077,7 +2084,7 @@ sap.ui.define([
 
         const aStates = this._sanitizeStates(vStates);
 
-        var oItem = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oItem = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
             return new ShellHeadItem(oProperties);
         });
 
@@ -2121,7 +2128,7 @@ sap.ui.define([
      */
     Renderer.prototype.addRightFloatingContainerItem = function (oControlProperties, bIsVisible, bCurrentState, vStates) {
         const aStates = this._sanitizeStates(vStates);
-        var oItem = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oItem = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
             return new NotificationListItem(oProperties);
         });
 
@@ -2173,10 +2180,10 @@ sap.ui.define([
             oControlProperties.visible = !!bIsVisible;
         }
 
-        var fnCreate = function (oProperties) {
+        function fnCreate (oProperties) {
             return new ToolAreaItem(oProperties);
-        };
-        var oItem = this.createItem(oControlProperties, bCurrentState, fnCreate);
+        }
+        const oItem = this.createItem(oControlProperties, bCurrentState, fnCreate);
 
         if (bIsVisible) {
             this.showToolAreaItem([oItem.getId()], bCurrentState, aStates);
@@ -2263,7 +2270,17 @@ sap.ui.define([
         }
         const aStates = this._sanitizeStates(vStates);
 
-        var oItem = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+        const oItem = this.createItem(oControlProperties, bCurrentState, function (oProperties) {
+            if (Config.last("/core/shellBar/enabled")) {
+                oProperties = {
+                    ...oProperties,
+                    click: oProperties.press
+                };
+                delete oProperties.press;
+                //TODO Move to async import once the infrastructure gets updated with the latest browser version
+                const ShellBarItem = sap.ui.require("sap/ushell/thirdparty/ui5/webcomponents-fiori/ShellBarItem");
+                return new ShellBarItem(oProperties);
+            }
             return new ShellHeadItem(oProperties);
         });
 
@@ -2560,10 +2577,10 @@ sap.ui.define([
     Renderer.prototype.convertButtonsToActions = function (aIds, bCurrentState, vStates) {
         const aStates = this._sanitizeStates(vStates);
 
-        var oProperties = {};
-        var that = this;
+        const oProperties = {};
+        const that = this;
         aIds.forEach(function (sId) {
-            var oButton = Element.getElementById(sId);
+            const oButton = Element.getElementById(sId);
             oProperties.id = oButton.getId();
             oProperties.text = oButton.getText();
             oProperties.icon = oButton.getIcon();
@@ -2580,7 +2597,7 @@ sap.ui.define([
 
     Renderer.prototype.createItem = function (oControlProperties, bCurrentState, fnCreateItem) {
         // create the object
-        var oControl;
+        let oControl;
         if (oControlProperties && oControlProperties.id) {
             oControl = Element.getElementById(oControlProperties.id);
         }
@@ -2643,7 +2660,7 @@ sap.ui.define([
     };
 
     Renderer.prototype.ViewPortContainerNavTo = function (sName, sTargetName, sAction) {
-        return this.shellCtrl.getViewPortContainer().navTo(sName, sTargetName, sAction);
+        this.shellCtrl.getNavContainer().navTo(sTargetName);
     };
 
     /**
@@ -2715,7 +2732,7 @@ sap.ui.define([
      */
     Renderer.prototype._isBuiltInIntent = function (oParsedHash) {
         if (!Renderer._aBuiltInRoutes) {
-            var aRoutes = this.getManifestEntry("/sap.ui5/routing/routes");
+            const aRoutes = this.getManifestEntry("/sap.ui5/routing/routes");
             Renderer._aBuiltInRoutes = aRoutes.reduce(function (aConcatenatedRoutes, oCurrentRoutes) {
                 return aConcatenatedRoutes.concat(oCurrentRoutes.pattern);
             }, []);
@@ -2725,7 +2742,7 @@ sap.ui.define([
             return false;
         }
 
-        var sIntent = oParsedHash.semanticObject + "-" + oParsedHash.action;
+        const sIntent = `${oParsedHash.semanticObject}-${oParsedHash.action}`;
 
         return Renderer._aBuiltInRoutes.indexOf(sIntent) !== -1;
     };
@@ -2767,7 +2784,7 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.updateHeaderItem = function (sId, oControlProperties) {
-        var oItem = Element.getElementById(sId);
+        const oItem = Element.getElementById(sId);
 
         if (oItem && oControlProperties) {
             if (oControlProperties.hasOwnProperty("floatingNumber")) {
@@ -2791,7 +2808,7 @@ sap.ui.define([
         const aIds = Array.isArray(vIds) ? vIds : [vIds];
 
         aIds.forEach(function (sId) {
-            var oButton = Element.getElementById(sId);
+            const oButton = Element.getElementById(sId);
             if (oButton) {
                 oButton.destroy();
             }
@@ -2812,7 +2829,7 @@ sap.ui.define([
      * @private
      */
     Renderer.prototype.destroy = function () {
-        var oPromise = this.shellCtrl ? this.shellCtrl.awaitPendingInitializations() : Promise.resolve();
+        const oPromise = this.shellCtrl ? this.shellCtrl.awaitPendingInitializations() : Promise.resolve();
         return oPromise
             .then(function () {
                 return UIComponent.prototype.destroy.apply(this, arguments);

package/src/main/js/sap/ushell/renderer/RendererRootView.fragment.xml

@@ -2,7 +2,7 @@
     xmlns="sap.ushell.ui.shell"
     xmlns:m="sap.m"
     xmlns:core="sap.ui.core"
-    xmlns:ui="sap.ushell.ui"
+    xmlns:renderer="sap.ushell.renderer"
 >
-    <ui:AppContainer id="viewPortContainer" beforeNavigate=".onBeforeNavigate" afterNavigate=".onAfterNavigate"/>
+    <renderer:NavContainer id="viewPortContainer" beforeNavigate=".onBeforeNavigate" afterNavigate=".onAfterNavigate"/>
 </core:FragmentDefinition>

package/src/main/js/sap/ushell/renderer/RendererRootViewFallback.fragment.xml

@@ -0,0 +1,8 @@
+<core:FragmentDefinition
+    xmlns="sap.ushell.ui.shell"
+    xmlns:m="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:ui="sap.ushell.ui"
+>
+    <ui:AppContainer id="viewPortContainer" beforeNavigate=".onBeforeNavigate" afterNavigate=".onAfterNavigate"/>
+</core:FragmentDefinition>