@sapui5/sap.ushell 1.132.1 → 1.134.0

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

@@ -1,28 +1,20 @@
-// Copyright (c) 2009-2023 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
 sap.ui.define([
     "sap/base/util/ObjectPath",
-    "sap/tnt/NavigationListItem",
-    "sap/ui/core/CustomData",
     "sap/ui/core/EventBus",
     "sap/ui/core/mvc/Controller",
     "sap/ui/Device",
-    "sap/ui/model/json/JSONModel",
     "sap/ushell/Container",
     "sap/ushell/EventHub",
-    "sap/ushell/utils/UrlParsing",
-    "sap/ushell/utils/WindowUtils"
+    "sap/ushell/Config"
 ], function (
     ObjectPath,
-    NavigationListItem,
-    CustomData,
     EventBus,
     Controller,
     Device,
-    JSONModel,
     Container,
     EventHub,
-    UrlParsing,
-    WindowUtils
+    Config
 ) {
     "use strict";
 
@@ -50,7 +42,17 @@ 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");
@@ -58,32 +60,74 @@ sap.ui.define([
                 oSideNavigation.addStyleClass("sapUiSizeCompact");
             }
 
+            this.pNavigationListProvider = this._initNavigationListProvider("/core/sideNavigation/navigationListProvider");
+            this.pFixedNavigationListProvider = this._initNavigationListProvider("/core/sideNavigation/fixedNavigationListProvider", "fixedItem");
+
             this.oContainerRouter = Container.getRendererInternal().getRouter();
 
             this.oContainerRouter.getRoute("home").attachMatched(this._selectIndexAfterRouteChange, this);
             this.oContainerRouter.getRoute("openFLPPage").attachMatched(this._selectIndexAfterRouteChange, this);
             this.oContainerRouter.getRoute("openWorkPage").attachMatched(this._selectIndexAfterRouteChange, this);
 
-            this._addHamburgerButton();
-
             this.oEnableMenuBarNavigationListener = EventHub.on("enableMenuBarNavigation").do((bEnableSideNavigation) => this.onEnableSideNavigation(bEnableSideNavigation));
             EventBus.getInstance().subscribe("sap.ushell", "appOpened", this.deselectSideNavigationEntryOnAppOpened, this);
 
-            this.sNoneSelectedKey = "NONE";
-            const oViewConfiguration = new JSONModel({
-                //We need to initialize with a non-empty key to avoid flickering of the selection.
-                selectedKey: this.sNoneSelectedKey,
-                enableSideNavigation: true
-            });
-
-            this.getView().setModel(oViewConfiguration, "viewConfiguration");
+            this._selectIndexAfterRouteChange();
+        },
 
-            this.oGetDefaultSpacePromise = Container.getServiceAsync("Menu")
-                .then(function (oMenuService) {
-                    return oMenuService.getDefaultSpace();
-                });
+        /**
+         * Initializes the NavigationListProvider.
+         *
+         * It initializes the navigation list provider and passes an API closure to access the side navigation API.
+         *
+         * @param {string} sConfigPath The path to the configuration.
+         * @param {string} sAggregationName The name of the aggregation.
+         * @returns {Promise<object>} A promise that resolves with the NavigationListProvider when it is initialized.
+         * @private
+         * @since 1.134.0
+         */
+        _initNavigationListProvider: function (sConfigPath, sAggregationName) {
+            return new Promise((resolve) => {
+                const oSideNavigation = this.byId("sideNavigation");
+                const modulePath = Config.last(`${sConfigPath}/modulePath`);
+                if (modulePath) {
+                    const oAPIClosure = {
+                        getConfigValue: (sPath) => {
+                            let oConfig;
+                            try {
+                                oConfig = JSON.parse(Config.last(`${sConfigPath}/configuration`));
+                            } catch (oError) {
+                                oConfig = {};
+                            }
+                            return ObjectPath.get(sPath, oConfig);
+                        },
+                        getNavContainer: () => this.byId("navContainer"),
+                        openSideNavigation: () => this.getOwnerComponent().popoverOpen(),
+                        closeSideNavigation: () => this.getOwnerComponent().popoverClose(),
+                        expandSideNavigation: () => this.getOwnerComponent().toggleSideNavigation(true),
+                        collapseSideNavigation: () => this.getOwnerComponent().toggleSideNavigation(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);
+                        } else {
+                            oSideNavigation.setItem(oNavigationListItems);
+                        }
+                        resolve(oNavigationListProvider);
+                    });
+                }
+            });
+        },
 
-            this._selectIndexAfterRouteChange();
+        /**
+         * Press Event handler to navigate back in the side navigation.
+         */
+        onPressNavigateBackToSideNav: function () {
+            const oNavContainer = this.byId("navContainer");
+            oNavContainer.to(this.byId("sideNavigation"));
         },
 
         /**
@@ -113,166 +157,6 @@ sap.ui.define([
             this.getView().getModel("viewConfiguration").setProperty("/enableSideNavigation", bEnableSideNavigation);
         },
 
-        /**
-         * Triggered whenever a user selects a side navigation item.
-         *
-         * @param {sap.base.Event} oEvent The 'itemSelect' event.
-         *
-         * @private
-         * @since 1.132.0
-         */
-        onSideNavigationItemSelection: function (oEvent) {
-            const sSelectedNavigationEntryKey = oEvent.getParameter("item").getProperty("key");
-            const oSideNavigationModel = this.getView().getModel("sideNavigation");
-            let aSideNavigationEntries = oSideNavigationModel.getProperty("/");
-            const oDestinationIntent = this._getNestedSideNavigationEntryByUid(aSideNavigationEntries, sSelectedNavigationEntryKey);
-
-            if (oDestinationIntent.type === "IBN") {
-                this._performNavigation(oDestinationIntent.target);
-            } else if (oDestinationIntent.type === "URL") {
-                this._openURL(oDestinationIntent.target);
-            }
-        },
-
-        /**
-        * Recursively searches for a nested side navigation entry that satisfies the provided check function.
-        *
-        * @param {object[]} aSideNavigationEntries An array of side navigation entries to search through.
-        * @param {function} fnCheck A function that takes a side navigation entry object and returns a boolean indicating whether it satisfies the desired condition.
-        * @returns {object|undefined} The matched side navigation entry object or undefined if no match is found.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _getNestedSideNavigationEntry: function (aSideNavigationEntries, fnCheck) {
-            return aSideNavigationEntries.reduce((oSelectedSideNavigationEntry, oSideNavigationEntry) => {
-                if (oSelectedSideNavigationEntry) {
-                    return oSelectedSideNavigationEntry;
-                }
-
-                if (fnCheck(oSideNavigationEntry)) {
-                    return oSideNavigationEntry;
-                }
-
-                if (oSideNavigationEntry.menuEntries) {
-
-                    return this._getNestedSideNavigationEntry(oSideNavigationEntry.menuEntries, fnCheck);
-                }
-            }, undefined);
-        },
-
-        /**
-        * Searches for a nested side navigation entry with the specified unique
-        * identifier (UID) by calling the "_getNestedSideNavigationEntry" function
-        * with a custom check function.
-        *
-        * @param {object[]} aSideNavigationEntries An array of side navigation entries to search through.
-        * @param {string} sUid The unique identifier (UID) of the side navigation entry to find.
-        * @returns {object|undefined} The matched side navigation entry object or undefined if no match is found.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _getNestedSideNavigationEntryByUid: function (aSideNavigationEntries, sUid) {
-            function fnCheck (oSideNavigationEntry) {
-                return oSideNavigationEntry.uid === sUid;
-            }
-            return this._getNestedSideNavigationEntry(aSideNavigationEntries, fnCheck);
-        },
-
-        /**
-        * Factory function for creating a new NavigationListItem.
-        *
-        * - Responsible for rendering all side navigation entries upon initialization.
-        *
-        * @param {string} sId The ID of the NavigationListItem.
-        * @param {object} oContext The context containing the side navigation entry data.
-        * @returns {sap.tnt.NavigationListItem} The created NavigationListItem instance.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _sideNavigationFactory: function (sId, oContext) {
-            let sIcon = oContext.getProperty("icon");
-            // Provide icon fallback only for Top Level Menu Entries
-            if (!sIcon && this._isTopLevelEntry(oContext)) {
-                sIcon = "sap-icon://document-text";
-            }
-
-            const oNewItem = new NavigationListItem(sId, {
-                key: "{sideNavigation>uid}", // is not unique if used multiple times in a hierarchy
-                icon: sIcon,
-                text: "{sideNavigation>title}",
-                enabled: "{viewConfiguration>/enableSideNavigation}",
-                items: {
-                    path: "sideNavigation>menuEntries",
-                    factory: this._sideNavigationFactory.bind(this)
-                },
-                customData: [new CustomData({
-                    key: "help-id",
-                    value: "{= 'MenuEntry-' + ${sideNavigation>help-id}}",
-                    writeToDom: "{= !!${sideNavigation>help-id}}"
-                })]
-            });
-
-            return oNewItem;
-        },
-
-        /**
-        * Checks for top level menu entries.
-        *
-        * @param {oContext} oContext The context containing the menu entry path.
-        * @returns {boolean} True if top level menu entry.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _isTopLevelEntry: function (oContext) {
-            return oContext.getPath().split("/").length === 2;
-        },
-
-        /**
-        * Performs navigation to the specified destination target using the Navigation service.
-        *
-        * @param {object} oDestinationTarget The destination target object containing the navigation details.
-        * @returns {Promise} A promise that resolves when the navigation is completed.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _performNavigation: function (oDestinationTarget) {
-            return Container.getServiceAsync("Navigation").then(function (oNavigationService) {
-                const oParams = {};
-                oDestinationTarget.parameters.forEach(function (oParameter) {
-                    if (oParameter.name && oParameter.value) {
-                        oParams[oParameter.name] = [oParameter.value];
-                    }
-                });
-
-                oNavigationService.navigate({
-                    target: {
-                        semanticObject: oDestinationTarget.semanticObject,
-                        action: oDestinationTarget.action
-                    },
-                    params: oParams
-                });
-            });
-        },
-
-        /**
-         * Opens the provided URL in a new browser tab.
-         *
-         * @param {object} destinationTarget
-         *  The destination target which is used to determine the URL which should be
-         *  opened in a new browser tab
-         *
-         * @private
-         * @since 1.132.0
-         */
-        _openURL: function (destinationTarget) {
-            WindowUtils.openURL(destinationTarget.url, "_blank");
-        },
-
         /**
         * Selects the appropriate side navigation entry after a route change
         * based on the current hash and default space.
@@ -286,135 +170,16 @@ sap.ui.define([
         * @private
         * @since 1.132.0
         */
-        _selectIndexAfterRouteChange: function () {
-            const oViewConfigModel = this.getView().getModel("viewConfiguration");
-
-            return Promise.all([
-                this.oGetDefaultSpacePromise,
-                this.getOwnerComponent().oMenuModelPromise
-            ]).then((aResults) => {
-                const oDefaultSpace = aResults[0];
-
-                let sSelectedMenuKey;
-                const sHash = window.hasher.getHash();
-                const oHashParts = UrlParsing.parseShellHash(sHash);
-                const aSideNavigationEntries = this.getView().getModel("sideNavigation").getProperty("/");
-
-                if (oHashParts.semanticObject === "Shell" && oHashParts.action === "home") {
-                    // Determine the user's default page and initiate loading
-                    const oDefaultSpacePage = oDefaultSpace && oDefaultSpace.children && oDefaultSpace.children[0];
-                    sSelectedMenuKey = (oDefaultSpacePage) ? this._getMenuUID(aSideNavigationEntries, oDefaultSpace.id, oDefaultSpacePage.id) || "" : "";
-                    oViewConfigModel.setProperty("/selectedKey", sSelectedMenuKey);
-                } else {
-                    const sSpaceId = ObjectPath.get("params.spaceId.0", oHashParts);
-                    const sPageId = ObjectPath.get("params.pageId.0", oHashParts);
-
-                    // First evaluate the last clicked key and search for the top level entry if it matches the parameters
-                    const sSelectedKey = oViewConfigModel.getProperty("/selectedKey");
-
-                    const oSideNavigationEntry = this._getNestedSideNavigationEntryByUid(aSideNavigationEntries, sSelectedKey);
-                    if (this._hasSpaceIdAndPageId(oSideNavigationEntry, sSpaceId, sPageId)) {
-                        sSelectedMenuKey = oSideNavigationEntry.uid;
-                    } else {
-                        sSelectedMenuKey = this._getMenuUID(aSideNavigationEntries, sSpaceId, sPageId);
-                    }
-
-                    if (sSelectedMenuKey) {
-                        oViewConfigModel.setProperty("/selectedKey", sSelectedMenuKey);
-                    } else {
-                        oViewConfigModel.setProperty("/selectedKey", this.sNoneSelectedKey);
-                    }
-                }
-            });
-        },
-
-        /**
-        * Retrieves the menu unique identifier (UID) based on the provided space ID and page ID.
-        *
-        * @param {object[]} aSideNavigationEntries An array of side navigation entries to search through.
-        * @param {string} spaceId The space ID to match.
-        * @param {string} pageId The page ID to match.
-        * @returns {string|undefined} The menu UID if found, or undefined if not found.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _getMenuUID: function (aSideNavigationEntries, spaceId, pageId) {
-            function fnCheck (oSideNavigationEntry) {
-                return this._hasSpaceIdAndPageId(oSideNavigationEntry, spaceId, pageId);
+        _selectIndexAfterRouteChange: async function () {
+            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);
             }
-            const oMatchedSideNavigationEntry = this._getNestedSideNavigationEntry(aSideNavigationEntries, fnCheck.bind(this));
-            return oMatchedSideNavigationEntry && oMatchedSideNavigationEntry.uid;
-        },
-
-        /**
-        * Checks if a side navigation entry has the specified space ID and page ID in its target parameters.
-        *
-        * @param {object} oSideNavigationEntry The side navigation entry object to check.
-        * @param {string} sSpaceId The space ID to match.
-        * @param {string} sPageId The page ID to match.
-        * @returns {boolean} True if the side navigation entry has the specified space ID and page ID, false otherwise.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _hasSpaceIdAndPageId: function (oSideNavigationEntry, sSpaceId, sPageId) {
-            const aParameters = ObjectPath.get("target.parameters", oSideNavigationEntry) || [];
-            const oSpaceIdParam = aParameters.some(function (oParameter) {
-                return oParameter.name === "spaceId" && oParameter.value === sSpaceId;
-            });
-            const oPageIdParam = aParameters.some(function (oParameter) {
-                return oParameter.name === "pageId" && oParameter.value === sPageId;
-            });
-            return oSpaceIdParam !== false && oPageIdParam !== false;
-        },
-
-        onCollapseSideNavigationPress: function () {
-            const oSideNavigation = this.getView().byId("sideNavigation");
-            oSideNavigation.setExpanded(!oSideNavigation.getExpanded());
-        },
-
-        /**
-        * Creates a header item for the side navigation button (hamburger button) in the shell bar.
-        * The button is used to expand or collapse the side navigation.
-        * @returns {Promise<sap.ushell.services.Extension.Item>} A promise that resolves to the newly created header item.
-        *
-        * @see sap.ushell.services.Extension#createHeaderItem
-        * @async
-        * @since 1.132.0
-        * @private
-        */
-        _hamburgerButtonFatory: async function () {
-            const oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
-            const sTooltipSideMenu = oResourceBundle.getText("ShellBar.SideNavigation.Button.Tooltip");
-            const sTitle = oResourceBundle.getText("ShellBar.SideNavigation.Button.Text");
-            const Extension = await Container.getServiceAsync("Extension");
-
-            return await Extension.createHeaderItem({
-                id: "sideMenuExpandCollapseBtn",
-                ariaLabel: sTooltipSideMenu,
-                ariaHaspopup: "dialog",
-                icon: "sap-icon://menu2",
-                tooltip: sTooltipSideMenu,
-                text: sTitle,
-                press: this.onCollapseSideNavigationPress.bind(this)
-            }, {
-                position: "begin"
-            });
-        },
-
-         /**
-         * Adds (attach) the hamburger button to the shell bar.
-         * Shows the button on the home page and for all apps.
-         *
-         * @since 1.132.0
-         * @private
-         * @async
-         */
-        _addHamburgerButton: async function () {
-            this.headerHamburgerButtonItemStart = await this._hamburgerButtonFatory();
-            this.headerHamburgerButtonItemStart.showOnHome();
-            this.headerHamburgerButtonItemStart.showForAllApps();
+            return sSelectedKey;
         },
 
         /**

package/src/main/js/sap/ushell/components/shell/SideNavigation/css/style.css

@@ -0,0 +1,3 @@
+.sapUshellSideNavigationPositionRelative>.sapMNavItem {
+    position: relative;
+}

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

@@ -0,0 +1,13 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:mvc="sap.ui.core.mvc"
+    xmlns:tnt="sap.tnt"
+    core:require="{
+        mLibrary: 'sap/m/library'
+    }">
+    <ResponsivePopover
+        showHeader="false"
+        placement="Bottom" />
+
+</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.132.1"
+            "version": "1.134.0"
         },
         "i18n": {
             "bundleUrl": "./resources/resources.properties",
@@ -31,6 +31,13 @@
                 "sap.ui.core": {}
             }
         },
+        "resources": {
+            "css": [
+                {
+                    "uri": "css/style.css"
+                }
+            ]
+        },
         "models": {
             "i18n": {
                 "type": "sap.ui.model.resource.ResourceModel",

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

@@ -0,0 +1,52 @@
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+
+sap.ui.define([
+    "sap/tnt/NavigationListItem",
+    "sap/ui/core/CustomData",
+    "sap/ushell/EventHub"
+], function (
+    NavigationListItem,
+    CustomData,
+    EventHub
+) {
+    "use strict";
+
+    /**
+     * The menu entry "All Spaces" for the SideNavigation
+     *
+     * @property {sap.tnt.NavigationListItem} oRootItem The root navigation list item configured with the AllSpaces entry.
+     * @since 1.134.0
+     * @private
+     */
+    class AllSpaces {
+        constructor () {
+            this.oRootItem = new NavigationListItem({
+                text: "{i18n>SideNavigation.Item.AllSpaces.Title}",
+                enabled: "{viewConfiguration>/enableSideNavigation}",
+                customData: [new CustomData({
+                    key: "help-id",
+                    value: "MenuEntry-All-Spaces",
+                    writeToDom: true
+                })],
+                icon: "sap-icon://dimension",
+                selectable: false,
+                press: () => {
+                    EventHub.emit("SideNavigation.AllSpacesPressed", Date.now());
+                }
+            });
+        }
+
+        /**
+         * Asynchronously retrieves the root navigation list item.
+         *
+         * @async
+         * @returns {Promise<sap.tnt.NavigationListItem>} A promise that resolves to NavigationListItem.
+         * @since 1.134.0
+         * @private
+         */
+        async getRootItem () {
+            return this.oRootItem;
+        }
+    }
+    return AllSpaces;
+}, false);

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

@@ -0,0 +1,48 @@
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+
+sap.ui.define([
+    "sap/tnt/NavigationListItem",
+    "sap/ui/core/CustomData"
+], function (
+    NavigationListItem,
+    CustomData
+) {
+    "use strict";
+
+    /**
+     * The menu entry "App Finder" for the SideNavigation
+     *
+     * @property {sap.tnt.NavigationListItem} oRootItem The root navigation list item configured with the AppFinder.
+     * @since 1.134.0
+     * @private
+     */
+    class AppFinder {
+        constructor () {
+            this.oRootItem = new NavigationListItem({
+                text: "{i18n>SideNavigation.Item.AppFinder.Title}",
+                enabled: "{viewConfiguration>/enableSideNavigation}",
+                customData: [new CustomData({
+                    key: "help-id",
+                    value: "MenuEntry-AppFinder",
+                    writeToDom: true
+                })],
+                href: "#Shell-appfinder",
+                icon: "sap-icon://display"
+            });
+        }
+
+        /**
+        * Asynchronously retrieves the root navigation list item.
+        *
+        * @async
+        * @returns {Promise<sap.tnt.NavigationListItem>} A promise that resolves to NavigationListItem.
+        * @since 1.134.0
+        * @private
+        */
+        async getRootItem () {
+            return this.oRootItem;
+        }
+    }
+
+    return AppFinder;
+}, false);