@sapui5/sap.ushell 1.134.0 → 1.135.0

package/src/main/js/sap/ushell/components/shell/SideNavigation/Component.js

@@ -1,16 +1,32 @@
 // Copyright (c) 2009-2025 SAP SE, All Rights Reserved
 sap.ui.define([
+    "sap/m/library",
+    "sap/m/VBox",
     "sap/ui/core/ComponentContainer",
+    "sap/ui/core/Fragment",
     "sap/ui/core/mvc/XMLView",
     "sap/ui/core/UIComponent",
     "sap/ui/Device",
-    "sap/ushell/Container",
-    "sap/ui/core/Fragment",
+    "sap/ui/model/json/JSONModel",
     "sap/ushell/Config",
-    "sap/ui/model/json/JSONModel"
-], function (ComponentContainer, XMLView, UIComponent, Device, Container, Fragment, Config, JSONModel) {
+    "sap/ushell/Container"
+], function (
+    mLibrary,
+    VBox,
+    ComponentContainer,
+    Fragment,
+    XMLView,
+    UIComponent,
+    Device,
+    JSONModel,
+    Config,
+    Container
+) {
     "use strict";
 
+    const FlexRendertype = mLibrary.FlexRendertype;
+    const FlexAlignItems = mLibrary.FlexAlignItems;
+
     return UIComponent.extend("sap.ushell.components.shell.SideNavigation.Component", {
         metadata: {
             manifest: "json",
@@ -18,31 +34,23 @@ sap.ui.define([
             interfaces: ["sap.ui.core.IAsyncContentCreation"]
         },
         init: function () {
-            this.sSideNavigationMode = Config.last("/core/sideNavigation/mode");
-            this.runAsOwner(() => {
-                this.oMainViewPromise = XMLView.create({
-                    viewName: "sap.ushell.components.shell.SideNavigation.view.Main"
-                });
-                this.oSideNavigationViewPromise = XMLView.create({
-                    viewName: "sap.ushell.components.shell.SideNavigation.view.SideNavigation"
-                });
-            });
             UIComponent.prototype.init.apply(this, arguments);
+            this.sSideNavigationMode = Config.last("/core/sideNavigation/mode");
             this.oResourceBundle = this.getModel("i18n").getResourceBundle();
 
-            if (this.sSideNavigationMode === "Docked") {
-                Promise.all([this.oMainViewPromise, this.oSideNavigationViewPromise]).then((aResult) => {
-                    const [oMainView, oSideNavigationView] = aResult;
-                    oMainView.byId("mainLayout")?.addItem(oSideNavigationView);
-                    const oSideNavigationComponentContainer = new ComponentContainer({
-                        id: "SideNavigationComponentContainer",
-                        height: "100%",
-                        component: this
-                    });
+            this._oSideNavigationComponentContainer = new ComponentContainer({
+                id: this.createId("SideNavigationComponentContainer"),
+                height: "100%",
+                component: this
+            });
+            this._oDockedMainLayout = new VBox({
+                id: this.createId("mainLayout"),
+                renderType: FlexRendertype.Bare,
+                alignItems: FlexAlignItems.Start,
+                height: "100%"
+            });
+            Container.getRendererInternal().setSideNavigation(this._oDockedMainLayout);
 
-                    Container.getRendererInternal().setSideNavigation(oSideNavigationComponentContainer);
-                });
-            }
             this._addHamburgerButton();
 
             const oViewConfiguration = new JSONModel({
@@ -56,9 +64,10 @@ sap.ui.define([
             Device.resize.attachHandler(this._handleRenderModeChange.bind(this));
 
             this.setModel(oViewConfiguration, "viewConfiguration");
+            this._handleRenderModeChange(true);
         },
 
-        _handleRenderModeChange: function () {
+        _handleRenderModeChange: function (bModeChange) {
             const oModel = this.getModel("viewConfiguration");
             let sValue = Config.last("/core/sideNavigation/mode");
 
@@ -66,29 +75,24 @@ sap.ui.define([
                 sValue = "Popover";
                 oModel.setProperty("/expanded", true);
             }
-            const bModeChange = this.sSideNavigationMode !== sValue;
+            bModeChange = bModeChange ?? (this.sSideNavigationMode !== sValue);
             this.sSideNavigationMode = sValue;
             oModel.setProperty("/renderMode", sValue);
 
             if (bModeChange) {
-                Promise.all([this.oMainViewPromise, this.oSideNavigationViewPromise]).then((aResult) => {
-                    const [oMainView, oSideNavigationView] = aResult;
+                this.rootControlLoaded().then(() => {
                     if (sValue === "Docked") {
-                        oMainView.byId("mainLayout")?.addItem(oSideNavigationView);
+                        this._oDockedMainLayout.addItem(this._oSideNavigationComponentContainer);
                         this.popoverClose();
                     } else {
                         this._getPopover().then((oPopover) => {
-                            oPopover.addContent(oSideNavigationView);
+                            oPopover.addContent(this._oSideNavigationComponentContainer);
                         });
                     }
                 });
             }
         },
 
-        createContent: function () {
-            return this.oMainViewPromise;
-        },
-
         /**
          * Adds (attach) the hamburger button to the shell bar.
          * Shows the button on the home page and for all apps.
@@ -112,7 +116,7 @@ sap.ui.define([
          * @since 1.134.0
          * @private
          */
-        toggleSideNavigation: function (bExpanded) {
+        toggleSideNavigationExpansion: function (bExpanded) {
             const oViewConfigModel = this.getModel("viewConfiguration");
             if (bExpanded === undefined) {
                 bExpanded = !oViewConfigModel.getProperty("/expanded");
@@ -120,13 +124,18 @@ sap.ui.define([
             oViewConfigModel.setProperty("/expanded", !!bExpanded);
         },
 
+        /**
+         * Returns a promise that resolves with the Fragment including the Popover.
+         *
+         * @returns {Promise<sap.ui.core.Control>} A promise that resolves with the Popover.
+         * @since 1.135.0
+         * @private
+         */
         _getPopover: function () {
             if (!this._pPopover) {
-                const oView = this.getRootControl();
                 this._pPopover = Fragment.load({
-                    id: oView.createId("popoverMenuContainer"),
-                    name: "sap.ushell.components.shell.SideNavigation.fragment.Popover",
-                    controller: oView.getController()
+                    id: this.createId("sideNavigationPopover"),
+                    name: "sap.ushell.components.shell.SideNavigation.fragment.Popover"
                 });
             }
             return this._pPopover;
@@ -134,15 +143,18 @@ sap.ui.define([
 
         /**
          * Handles the press event of the side navigation button (hamburger button) in the shell bar.
-         * Expands or collapses the side navigation based on its current state.
+         *
+         * Expands or collapses the side navigation based on its current state if in Docked mode or
+         * opens or closes the side navigation popover if in Popover mode.
+         *
          * @param {object} oEvent The press event object.
          * @since 1.133.0
          */
-        onCollapseSideNavigationPress: async function (oEvent) {
+        onSideNavigationTogglePress: async function (oEvent) {
             switch (this.sSideNavigationMode) {
                 case "Docked":
-                    this.toggleSideNavigation();
-                    this.oSideNavigationViewPromise.then(function (oSideNavigation) {
+                    this.toggleSideNavigationExpansion();
+                    this.rootControlLoaded().then(function (oSideNavigation) {
                         const oNavContainer = oSideNavigation.byId("navContainer");
                         if (oNavContainer.getCurrentPage() !== "sideNavigation") {
                             oNavContainer.to(oSideNavigation.byId("sideNavigation"));
@@ -154,12 +166,8 @@ sap.ui.define([
 
                     if (!this._pPopover) {
                         this._getPopover().then((oPopover) => {
-                            this.oMainViewPromise.then(function (oMainView) {
-                                oMainView.addDependent(oPopover);
-                            });
-                            this.oSideNavigationViewPromise.then(function (oRootView) {
-                                oPopover.addContent(oRootView);
-                            });
+                            oPopover.addContent(this._oSideNavigationComponentContainer);
+
                             this.getModel("viewConfiguration").setProperty("/popover", oPopover);
                             return oPopover;
                         });
@@ -218,7 +226,7 @@ sap.ui.define([
                 id: "sideMenuExpandCollapseBtn",
                 ariaHaspopup: "dialog",
                 icon: "sap-icon://menu2",
-                press: this.onCollapseSideNavigationPress.bind(this),
+                press: this.onSideNavigationTogglePress.bind(this),
                 tooltip: "{= ${viewConfiguration>/renderMode} === 'Popover' ? ${i18n>ShellBar.SideNavigation.Button.Open.Tooltip}" +
                     " : (${viewConfiguration>/expanded} ? ${i18n>ShellBar.SideNavigation.Button.Collapse.Tooltip} : ${i18n>ShellBar.SideNavigation.Button.Expand.Tooltip})}"
             }, {
@@ -228,6 +236,21 @@ sap.ui.define([
             oHeaderItemControl.setModel(this.getModel("i18n"), "i18n");
             oHeaderItemControl.setModel(this.getModel("viewConfiguration"), "viewConfiguration");
             return oHeaderItem;
+        },
+
+        /**
+         * Called when the component is destroyed.
+         *
+         * Cleans up the component by destroying the controls created by the component.
+         *
+         * @since 1.135.0
+         */
+        exit: function () {
+            // The component needs to be removed first because destroying the ComponentContainer triggers also calls the destroy
+            // method of the component. This could cause an infinite loop.
+            this._oSideNavigationComponentContainer?.setComponent(undefined);
+            this._oSideNavigationComponentContainer?.destroy();
+            this._oDockedMainLayout?.destroy();
         }
     });
 });

package/src/main/js/sap/ushell/components/shell/SideNavigation/controller/SideNavigation.controller.js

@@ -18,6 +18,11 @@ sap.ui.define([
 ) {
     "use strict";
 
+    /**
+     * The default key value when no key is selected.
+     */
+    const sNoneSelectedKey = "NONE";
+
     /**
      * @alias sap.ushell.components.shell.SideNavigation.controller.SideNavigation
      * @class
@@ -32,7 +37,6 @@ sap.ui.define([
      * @private
      */
     return Controller.extend("sap.ushell.components.shell.SideNavigation.controller.SideNavigation", /** @lends sap.ushell.components.shell.SideNavigation.controller.SideNavigation.prototype */ {
-
         /**
          * UI5 lifecycle method which is called upon controller initialization.
          * It gets all the required UShell services and
@@ -42,17 +46,7 @@ sap.ui.define([
          * @since 1.132.0
          */
         onInit: function () {
-            this.sNoneSelectedKey = "NONE";
             const oSideNavigation = this.byId("sideNavigation");
-            // Set the "spaces" model for AllSpaces once
-            EventHub.once("SideNavigation.AllSpacesPressed").do(async () => {
-                const oMenuService = await Container.getServiceAsync("Menu");
-                const oSpacesModel = await oMenuService.getMenuModel();
-                this.byId("allSpacesSideMenu").setModel(oSpacesModel, "spaces");
-            });
-            EventHub.on("SideNavigation.AllSpacesPressed").do(async () => {
-                this.byId("navContainer").to(this.byId("allSpacesSideMenu"));
-            });
 
             if (Device.support.touch) {
                 oSideNavigation.addStyleClass("sapUiSizeCozy");
@@ -89,6 +83,7 @@ sap.ui.define([
         _initNavigationListProvider: function (sConfigPath, sAggregationName) {
             return new Promise((resolve) => {
                 const oSideNavigation = this.byId("sideNavigation");
+                const oNavContainer = this.byId("navContainer");
                 const modulePath = Config.last(`${sConfigPath}/modulePath`);
                 if (modulePath) {
                     const oAPIClosure = {
@@ -101,18 +96,25 @@ sap.ui.define([
                             }
                             return ObjectPath.get(sPath, oConfig);
                         },
-                        getNavContainer: () => this.byId("navContainer"),
+                        getNavContainerFacade: () => {
+                            return {
+                                add: (oControl) => oNavContainer.addPage(oControl),
+                                to: (vControl) => oNavContainer.to(vControl),
+                                toRoot: () => oNavContainer.to(oSideNavigation)
+                            };
+                        },
+                        updateSelectedKey: () => this._selectIndexAfterRouteChange(),
                         openSideNavigation: () => this.getOwnerComponent().popoverOpen(),
                         closeSideNavigation: () => this.getOwnerComponent().popoverClose(),
-                        expandSideNavigation: () => this.getOwnerComponent().toggleSideNavigation(true),
-                        collapseSideNavigation: () => this.getOwnerComponent().toggleSideNavigation(false)
+                        expandSideNavigation: () => this.getOwnerComponent().toggleSideNavigationExpansion(true),
+                        collapseSideNavigation: () => this.getOwnerComponent().toggleSideNavigationExpansion(false)
                     };
 
                     sap.ui.require([modulePath], async (NavigationListProvider) => {
                         const oNavigationListProvider = new NavigationListProvider(oAPIClosure);
                         const oNavigationListItems = await oNavigationListProvider.getRootItem();
                         if (sAggregationName === "fixedItem") {
-                            this.byId("sideNavigation").setFixedItem(oNavigationListItems);
+                            oSideNavigation.setFixedItem(oNavigationListItems);
                         } else {
                             oSideNavigation.setItem(oNavigationListItems);
                         }
@@ -122,14 +124,6 @@ sap.ui.define([
             });
         },
 
-        /**
-         * Press Event handler to navigate back in the side navigation.
-         */
-        onPressNavigateBackToSideNav: function () {
-            const oNavContainer = this.byId("navContainer");
-            oNavContainer.to(this.byId("sideNavigation"));
-        },
-
         /**
         * Deselects the currently selected side navigation entry when an app is opened,
         * which removes the visual indicator from the currently selected entry.
@@ -141,7 +135,7 @@ sap.ui.define([
         * @since 1.132.0
         */
         deselectSideNavigationEntryOnAppOpened: function () {
-            this.getView().getModel("viewConfiguration").setProperty("/selectedKey", this.sNoneSelectedKey);
+            this.getView().getModel("viewConfiguration").setProperty("/selectedKey", sNoneSelectedKey);
         },
 
         /**
@@ -174,12 +168,15 @@ sap.ui.define([
             const oViewConfigModel = this.getOwnerComponent().getModel("viewConfiguration");
             const oNavigationListProvider = await this.pNavigationListProvider;
             const sSelectedKey = await oNavigationListProvider.findSelectedKey();
-            if (sSelectedKey) {
-                oViewConfigModel.setProperty("/selectedKey", sSelectedKey);
-            } else {
-                oViewConfigModel.setProperty("/selectedKey", this.sNoneSelectedKey);
-            }
-            return sSelectedKey;
+            setTimeout(() => {
+                if (sSelectedKey) {
+                    oViewConfigModel.setProperty("/selectedKey", sSelectedKey);
+                } else {
+                    // no entry found for selection. Remove selection to avoid visual indication
+                    oViewConfigModel.setProperty("/selectedKey", sNoneSelectedKey);
+                    this.byId("sideNavigation").setSelectedItem(null);
+                }
+            }, 0);
         },
 
         /**

package/src/main/js/sap/ushell/components/shell/SideNavigation/fragment/AllSpaces.fragment.xml

@@ -0,0 +1,21 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    core:require="{
+        mLibrary: 'sap/m/library'
+    }">
+    <VBox width="{= %{viewConfiguration>/renderMode} === 'Popover' ? '20rem' : ''}" renderType="{= mLibrary.FlexRendertype.Div}" id="allSpacesSideMenu">
+        <Toolbar style="Clear">
+            <Button type="Back" press="onPressNavigateBackToSideNav" />
+        </Toolbar>
+        <ScrollContainer width="100%" height="100%" vertical="true">
+            <core:ComponentContainer
+                id="NavigationBarMenuComponentContainer"
+                manifest="true"
+                async="true"
+                propagateModel="true"
+                lifecycle="Container"
+            />
+        </ScrollContainer>
+    </VBox>
+</core:FragmentDefinition>

package/src/main/js/sap/ushell/components/shell/SideNavigation/fragment/Popover.fragment.xml

@@ -7,7 +7,12 @@
         mLibrary: 'sap/m/library'
     }">
     <ResponsivePopover
+        id="sideNavigationPopover"
+        verticalScrolling="false"
         showHeader="false"
-        placement="Bottom" />
+        placement="Bottom"
+        ariaLabelledBy="sideNavigationLabel">
+		<core:InvisibleText id="sideNavigationLabel" text="{i18n>SideNavigation.PopoverLabel}"/>
+    </ResponsivePopover>
 
 </core:FragmentDefinition>

package/src/main/js/sap/ushell/components/shell/SideNavigation/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.shell.SideNavigation",
         "applicationVersion": {
-            "version": "1.134.0"
+            "version": "1.135.0"
         },
         "i18n": {
             "bundleUrl": "./resources/resources.properties",
@@ -31,6 +31,10 @@
                 "sap.ui.core": {}
             }
         },
+        "rootView": {
+            "viewName": "sap.ushell.components.shell.SideNavigation.view.Main",
+            "type": "XML"
+        },
         "resources": {
             "css": [
                 {

package/src/main/js/sap/ushell/components/shell/SideNavigation/modules/AllSpaces.js

@@ -3,23 +3,67 @@
 sap.ui.define([
     "sap/tnt/NavigationListItem",
     "sap/ui/core/CustomData",
-    "sap/ushell/EventHub"
+    "sap/ui/core/Fragment",
+    "sap/ui/core/Component",
+    "sap/ushell/Container"
 ], function (
     NavigationListItem,
     CustomData,
-    EventHub
+    Fragment,
+    Component,
+    Container
 ) {
     "use strict";
 
     /**
      * The menu entry "All Spaces" for the SideNavigation
      *
+     * @property {object} oSideNavAPI Holds the side navigation API object passed to the constructor.
      * @property {sap.tnt.NavigationListItem} oRootItem The root navigation list item configured with the AllSpaces entry.
      * @since 1.134.0
      * @private
      */
     class AllSpaces {
-        constructor () {
+
+        /**
+         * The promise that resolves once the fragment is loaded.
+         * @type {Promise<[sap.ui.core.Fragment, sap.ui.core.Component]>}
+         */
+        #pFragmentLoaded;
+
+        /**
+         * Creates a new menu entry "AllSpaces".
+         *
+         * @param {object} oSideNavAPI The side navigation API object.
+         *
+         * @since 1.134.0
+         * @private
+         */
+        constructor (oSideNavAPI) {
+            this.oSideNavAPI = oSideNavAPI;
+
+            if (!this.#pFragmentLoaded) {
+                const pFragmentLoaded = Fragment.load({
+                    id: "AllSpaces",
+                    name: "sap.ushell.components.shell.SideNavigation.fragment.AllSpaces",
+                    controller: this
+                });
+                const pComponentLoaded = Component.create({
+                    name: "sap.ushell.components.shell.NavigationBarMenu", componentData: {renderType: "Menu"}
+                });
+
+                this.#pFragmentLoaded = Promise.all([pFragmentLoaded, pComponentLoaded]).then(async (aResults) => {
+                    const [oAllSpacesFragment, oComponent] = [...aResults];
+                    Fragment.byId("AllSpaces", "NavigationBarMenuComponentContainer").setComponent(oComponent);
+                    oSideNavAPI.getNavContainerFacade().add(oAllSpacesFragment);
+                    const oMenuService = await Container.getServiceAsync("Menu");
+                    const oSpacesModel = await oMenuService.getMenuModel();
+                    oAllSpacesFragment.setModel(oSpacesModel, "spaces");
+
+                    return oAllSpacesFragment;
+                });
+            }
+
             this.oRootItem = new NavigationListItem({
                 text: "{i18n>SideNavigation.Item.AllSpaces.Title}",
                 enabled: "{viewConfiguration>/enableSideNavigation}",
@@ -30,8 +74,8 @@ sap.ui.define([
                 })],
                 icon: "sap-icon://dimension",
                 selectable: false,
-                press: () => {
-                    EventHub.emit("SideNavigation.AllSpacesPressed", Date.now());
+                press: async () => {
+                    oSideNavAPI.getNavContainerFacade().to(await this.#pFragmentLoaded);
                 }
             });
         }
@@ -47,6 +91,13 @@ sap.ui.define([
         async getRootItem () {
             return this.oRootItem;
         }
+
+        /**
+         * Navigate back to SideNavigation.
+         */
+        onPressNavigateBackToSideNav () {
+            this.oSideNavAPI.getNavContainerFacade().toRoot();
+        }
     }
     return AllSpaces;
 }, false);

package/src/main/js/sap/ushell/components/shell/SideNavigation/modules/Favorites.js

@@ -5,6 +5,7 @@ sap.ui.define([
     "sap/tnt/NavigationListGroup",
     "sap/ushell/Config",
     "sap/ushell/Container",
+    "sap/ushell/components/shell/SideNavigation/modules/NavigationHelper",
     "sap/ui/core/CustomData",
     "sap/ui/model/Filter",
     "sap/ui/model/FilterOperator",
@@ -14,6 +15,7 @@ sap.ui.define([
     NavigationListGroup,
     Config,
     Container,
+    NavigationHelper,
     CustomData,
     Filter,
     FilterOperator,
@@ -29,22 +31,28 @@ sap.ui.define([
      */
     class Favorites {
         /**
-         * The side navigation API object.
-         * @type {object} Holds the side navigation API object passed to the constructor.
+         * The side navigation API object passed to the constructor.
+         * @type {object}
          */
         #oSideNavAPI;
 
         /**
-         * The root navigation list item.
-         * @type {sap.tnt.NavigationListGroup} The root navigation list group item configured with sections and apps.
+         * The promise which resolves with the root navigation list item when everything is loaded.
+         * @type {Promise<sap.tnt.NavigationListGroup>}
+         */
+        #pItemReady;
+
+        /**
+         * The root navigation list item group item configured with sections and apps.
+         * @type {sap.tnt.NavigationListGroup}
          */
         #oRootItem;
 
         /**
-         * The promise which resolves with the root navigation list item when everything is loaded.
-         * @type {Promise<sap.tnt.NavigationListGroup>} Resolves with the root navigation list item.
+         * Helper class for performing navigation actions.
+         * @type {NavigationHelper} Helper class for performing navigation actions.
          */
-        #pItemReady;
+        #NavigationHelper;
 
         /**
          * Creates a new menu entry "Favorites" with the sections and apps from the MyHome page for the SideNavigation.
@@ -73,6 +81,8 @@ sap.ui.define([
             this.#pItemReady = new Promise((resolve, reject) => {
                 this.#prepareModel(resolve, reject);
             });
+
+            this.#NavigationHelper = new NavigationHelper();
         }
 
         /**
@@ -98,6 +108,10 @@ sap.ui.define([
         onItemPressed (oEvent) {
             const sTargetUrl = oEvent.getSource().getBindingContext("favorites").getProperty("targetURL");
             if (sTargetUrl) {
+                this.#NavigationHelper.navigate({
+                    target: { shellHash: sTargetUrl },
+                    type: "IBN"
+                });
                 this.#oSideNavAPI.closeSideNavigation();
             }
         }
@@ -179,8 +193,8 @@ sap.ui.define([
                 }
             });
             if (oDefaultSection?.visualizations?.length > 0) {
-                // Add default section at the end
-                aFavorites.push(...oDefaultSection.visualizations);
+                // Add default section visualizations to the beginning
+                aFavorites.splice(0, 0, ...oDefaultSection.visualizations);
             }
             oFavoritesModel.setProperty("/", aFavorites);
         }
@@ -200,6 +214,7 @@ sap.ui.define([
                 enabled: "{viewConfiguration>/enableSideNavigation}",
                 expanded: "{favorites>expanded}",
                 icon: "{= %{favorites>visualizations} ? 'sap-icon://folder' : '' }",
+                href: "{favorites>targetURL}",
                 selectable: false,
                 items: {
                     path: "favorites>visualizations",