@sapui5/sap.cux.home 1.141.0 → 1.142.1

package/src/sap/cux/home/CardsPanel.js

@@ -2,7 +2,7 @@
  * SAP UI development toolkit for HTML5 (SAPUI5)
  *  * (c) Copyright 2009-2025 SAP SE. All rights reserved
  */
-sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettings", "sap/fe/navigation/SelectionVariant", "sap/insights/CardHelper", "sap/insights/base/InMemoryCachingHost", "sap/m/HBox", "sap/m/HeaderContainer", "sap/m/VBox", "sap/ui/core/EventBus", "sap/ui/integration/widgets/Card", "sap/ui/model/json/JSONModel", "sap/ushell/Container", "sap/ushell/api/S4MyHome", "./BasePanel", "./MenuItem", "./utils/AppManager", "./utils/CommonUtils", "./utils/Constants", "./utils/DataFormatUtils", "./utils/Device", "./utils/DragDropUtils", "./utils/FESRUtil", "./utils/InsightsUtils", "./utils/PersonalisationUtils", "./utils/UshellPersonalizer"], function (Log, GridContainer, GridContainerSettings, SelectionVariant, CardHelper, InsightsInMemoryCachingHost, HBox, HeaderContainer, VBox, EventBus, Card, JSONModel, Container, S4MyHome, __BasePanel, __MenuItem, __AppManager, ___utils_CommonUtils, ___utils_Constants, ___utils_DataFormatUtils, ___utils_Device, ___utils_DragDropUtils, ___utils_FESRUtil, ___utils_InsightsUtils, __PersonalisationUtils, __UShellPersonalizer) {
+sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettings", "sap/fe/navigation/SelectionVariant", "sap/insights/CardHelper", "sap/insights/base/InMemoryCachingHost", "sap/m/Button", "sap/m/HBox", "sap/m/HeaderContainer", "sap/m/VBox", "sap/ui/core/EventBus", "sap/ui/integration/widgets/Card", "sap/ui/model/json/JSONModel", "sap/ushell/Container", "sap/ushell/api/S4MyHome", "./BasePanel", "./ErrorPanel", "./MenuItem", "./utils/AppManager", "./utils/CommonUtils", "./utils/Constants", "./utils/DataFormatUtils", "./utils/Device", "./utils/DragDropUtils", "./utils/FESRUtil", "./utils/InsightsUtils", "./utils/PersonalisationUtils", "./utils/UshellPersonalizer"], function (Log, GridContainer, GridContainerSettings, SelectionVariant, CardHelper, InsightsInMemoryCachingHost, Button, HBox, HeaderContainer, VBox, EventBus, Card, JSONModel, Container, S4MyHome, __BasePanel, __ErrorPanel, __MenuItem, __AppManager, ___utils_CommonUtils, ___utils_Constants, ___utils_DataFormatUtils, ___utils_Device, ___utils_DragDropUtils, ___utils_FESRUtil, ___utils_InsightsUtils, __PersonalisationUtils, __UShellPersonalizer) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -31,6 +31,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
     }
     return finalizer(false, result);
   }
+  const ErrorPanel = _interopRequireDefault(__ErrorPanel);
   const MenuItem = _interopRequireDefault(__MenuItem);
   const AppManager = _interopRequireDefault(__AppManager);
   const getPageManagerInstance = ___utils_CommonUtils["getPageManagerInstance"];
@@ -42,8 +43,9 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
   const fetchElementProperties = ___utils_Device["fetchElementProperties"];
   const focusDraggedItem = ___utils_DragDropUtils["focusDraggedItem"];
   const addFESRId = ___utils_FESRUtil["addFESRId"];
-  const createShowMoreActionButton = ___utils_InsightsUtils["createShowMoreActionButton"];
-  const createShowMoreMenuItem = ___utils_InsightsUtils["createShowMoreMenuItem"];
+  const addFESRNavigationSource = ___utils_FESRUtil["addFESRNavigationSource"];
+  const FESRNavigationSource = ___utils_FESRUtil["FESRNavigationSource"];
+  const getAssociatedFullScreenButton = ___utils_InsightsUtils["getAssociatedFullScreenButton"];
   const getAssociatedFullScreenMenuItem = ___utils_InsightsUtils["getAssociatedFullScreenMenuItem"];
   const sortMenuItems = ___utils_InsightsUtils["sortMenuItems"];
   const targetsAreEqual = ___utils_InsightsUtils["targetsAreEqual"];
@@ -52,21 +54,17 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
   var cardsMenuItems = /*#__PURE__*/function (cardsMenuItems) {
     cardsMenuItems["REFRESH"] = "cards-refresh";
     cardsMenuItems["EDIT_CARDS"] = "cards-editCards";
-    cardsMenuItems["AI_INSIGHT_CARD"] = "cards-addAIInsightCard";
     return cardsMenuItems;
   }(cardsMenuItems || {});
-  var cardsContainerMenuItems = /*#__PURE__*/function (cardsContainerMenuItems) {
-    cardsContainerMenuItems["REFRESH"] = "container-cards-refresh";
-    cardsContainerMenuItems["EDIT_CARDS"] = "container-cards-editCards";
-    cardsContainerMenuItems["SHOW_MORE"] = "cardsContainerFullScreenMenuItem";
-    cardsContainerMenuItems["AI_INSIGHT_CARD"] = "container-cards-addAIInsightCard";
-    return cardsContainerMenuItems;
-  }(cardsContainerMenuItems || {});
-  var cardsContainerActionButtons = /*#__PURE__*/function (cardsContainerActionButtons) {
-    cardsContainerActionButtons["SHOW_MORE"] = "cardsContanerFullScreenActionButton";
-    return cardsContainerActionButtons;
-  }(cardsContainerActionButtons || {});
-  const sortedMenuItems = [cardsMenuItems.REFRESH, cardsMenuItems.EDIT_CARDS, cardsMenuItems.AI_INSIGHT_CARD, "showMore", "settings"];
+  var cardsActionButtons = /*#__PURE__*/function (cardsActionButtons) {
+    cardsActionButtons["SHOW_MORE"] = "fullScreen";
+    return cardsActionButtons;
+  }(cardsActionButtons || {});
+  var errorPanelMenuItems = /*#__PURE__*/function (errorPanelMenuItems) {
+    errorPanelMenuItems["EDIT_CARDS"] = "cards-errorPanel-editCards";
+    return errorPanelMenuItems;
+  }(errorPanelMenuItems || {});
+  const sortedMenuItems = [cardsMenuItems.REFRESH, cardsMenuItems.EDIT_CARDS, "showMore", "settings"];
   const Constants = {
     PLACEHOLDER_CARD_COUNT: 10,
     CARDS_GAP: 16
@@ -171,7 +169,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
       this.aVisibleCardInstances = [];
       this.cardsInViewport = [];
       this._appSwitched = false;
-      this._headerVisible = false;
+      this.cardHelper = null;
     },
     /**
      * Initializes the Cards Panel.
@@ -182,6 +180,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
     init: function _init() {
       const _this = this;
       BasePanel.prototype.init.call(this);
+      this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")}`);
       this.setProperty("key", "cards");
       this.setProperty("enableFullScreen", true);
       this.cardWidth = "19rem";
@@ -207,9 +206,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
       this.oEventBus.subscribe("importChannel", "cardsImport", function (sChannelId, sEventId, oData) {
         try {
           return Promise.resolve(_this._createCards(oData)).then(function () {
-            return Promise.resolve(_this.rerenderCards()).then(function () {
-              _this._importdone();
-            });
+            _this._importdone();
           });
         } catch (e) {
           return Promise.reject(e);
@@ -266,8 +263,10 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
     _createCards: function _createCards(aCards) {
       try {
         const _this3 = this;
-        return Promise.resolve(_this3.cardHelperInstance?._createCards(aCards)).then(function () {
-          return _this3.rerenderCards();
+        return Promise.resolve(_this3.getCardHelper()).then(function (cardHelper) {
+          return Promise.resolve(cardHelper?._createCards(aCards)).then(function () {
+            return _this3.rerenderCards();
+          });
         });
       } catch (e) {
         return Promise.reject(e);
@@ -313,8 +312,23 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         try {
           const sType = oEvent.getParameter("type");
           let oParameters = oEvent.getParameter("parameters") || {};
-          const _temp3 = function () {
+          const _temp5 = function () {
             if (sType === "Navigation" && oParameters.ibnTarget) {
+              function _temp4() {
+                let aContentActions = _this4.getContentActions(oIntegrationCardManifest);
+                const oHeaderAction = aHeaderActions[0] || {},
+                  oContentAction = aContentActions[0] || {};
+                const bOldCardExtension = !!(oHeaderAction?.parameters && typeof oHeaderAction.parameters === "string" && oHeaderAction.parameters.indexOf("{= extension.formatters.addPropertyValueToAppState") > -1 || oContentAction?.parameters && typeof oContentAction.parameters === "string" && oContentAction.parameters.indexOf("{= extension.formatters.addPropertyValueToAppState") > -1);
+                _this4._manageOldCardExtension(bOldCardExtension, oEvent, oParameters);
+                return Promise.resolve(Container.getServiceAsync("Navigation")).then(function (navigationService) {
+                  return Promise.resolve(navigationService.navigate({
+                    target: oParameters.ibnTarget,
+                    params: oParameters.ibnParams
+                  })).then(function () {
+                    addFESRNavigationSource(FESRNavigationSource.Cards);
+                  });
+                });
+              }
               oEvent.preventDefault();
               const oCard = oEvent.getParameter("card") || {},
                 oIntegrationCardManifest = oCard?.getManifestEntry("sap.card") || {},
@@ -326,23 +340,17 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
               if (oIntegrationCardManifest?.configuration?.parameters?._semanticDateRangeSetting?.value) {
                 oCheckSemanticProperty = JSON.parse(oIntegrationCardManifest.configuration.parameters._semanticDateRangeSetting.value);
               }
-              if (oCheckSemanticProperty && Object.keys(oCheckSemanticProperty).length) {
-                oParameters = _this4.cardHelperInstance.processSemanticDate(oParameters, oIntegrationCardManifest);
-              }
-              let aContentActions = _this4.getContentActions(oIntegrationCardManifest);
-              const oHeaderAction = aHeaderActions[0] || {},
-                oContentAction = aContentActions[0] || {};
-              const bOldCardExtension = !!(oHeaderAction?.parameters && typeof oHeaderAction.parameters === "string" && oHeaderAction.parameters.indexOf("{= extension.formatters.addPropertyValueToAppState") > -1 || oContentAction?.parameters && typeof oContentAction.parameters === "string" && oContentAction.parameters.indexOf("{= extension.formatters.addPropertyValueToAppState") > -1);
-              _this4._manageOldCardExtension(bOldCardExtension, oEvent, oParameters);
-              return Promise.resolve(Container.getServiceAsync("Navigation")).then(function (navigationService) {
-                return Promise.resolve(navigationService.navigate({
-                  target: oParameters.ibnTarget,
-                  params: oParameters.ibnParams
-                })).then(function () {});
-              });
+              const _temp3 = function () {
+                if (oCheckSemanticProperty && Object.keys(oCheckSemanticProperty).length) {
+                  return Promise.resolve(_this4.getCardHelper()).then(function (cardHelper) {
+                    oParameters = cardHelper?.processSemanticDate(oParameters, oIntegrationCardManifest);
+                  });
+                }
+              }();
+              return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
             }
           }();
-          return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+          return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
         } catch (e) {
           return Promise.reject(e);
         }
@@ -404,25 +412,27 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
             return Promise.resolve(_this7._getManifestEntryFromCard(oCard, "sap.insights").then(function (oEntry) {
               try {
                 if (oEntry) {
-                  return Promise.resolve(_this7.cardHelperInstance.getParentAppDetails({
-                    descriptorContent: oCard.getManifestEntry("/")
-                  })).then(function (parentApp) {
-                    if (parentApp.semanticObject && parentApp.action) {
-                      return Promise.resolve(Container.getServiceAsync("Navigation")).then(function (navigationService) {
-                        const intents = [{
-                          target: {
-                            semanticObject: parentApp.semanticObject,
-                            action: parentApp.action
-                          }
-                        }];
-                        return Promise.resolve(navigationService.isNavigationSupported(intents)).then(function (_navigationService$is) {
-                          const aResponses = _navigationService$is;
-                          return aResponses[0].supported || false;
+                  return Promise.resolve(_this7.getCardHelper()).then(function (cardHelper) {
+                    return Promise.resolve(cardHelper?.getParentAppDetails({
+                      descriptorContent: oCard.getManifestEntry("/")
+                    })).then(function (parentApp) {
+                      if (parentApp.semanticObject && parentApp.action) {
+                        return Promise.resolve(Container.getServiceAsync("Navigation")).then(function (navigationService) {
+                          const intents = [{
+                            target: {
+                              semanticObject: parentApp.semanticObject,
+                              action: parentApp.action
+                            }
+                          }];
+                          return Promise.resolve(navigationService.isNavigationSupported(intents)).then(function (_navigationService$is) {
+                            const aResponses = _navigationService$is;
+                            return aResponses[0].supported || false;
+                          });
                         });
-                      });
-                    } else {
-                      return true;
-                    }
+                      } else {
+                        return true;
+                      }
+                    });
                   });
                 } else {
                   return Promise.resolve(false);
@@ -437,16 +447,20 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         },
         action: function (oCard) {
           try {
-            return Promise.resolve(_this8.cardHelperInstance.getParentAppDetails({
-              descriptorContent: oCard.getManifestEntry("/")
-            })).then(function (parentApp) {
-              const sShellHash = parentApp.semanticURL || parentApp.semanticObject;
-              return Promise.resolve(Container.getServiceAsync("Navigation")).then(function (navigationService) {
-                return Promise.resolve(navigationService.navigate({
-                  target: {
-                    shellHash: sShellHash
-                  }
-                })).then(function () {});
+            return Promise.resolve(_this8.getCardHelper()).then(function (cardHelper) {
+              return Promise.resolve(cardHelper?.getParentAppDetails({
+                descriptorContent: oCard.getManifestEntry("/")
+              })).then(function (parentApp) {
+                const sShellHash = parentApp.semanticURL || parentApp.semanticObject;
+                return Promise.resolve(Container.getServiceAsync("Navigation")).then(function (navigationService) {
+                  return Promise.resolve(navigationService.navigate({
+                    target: {
+                      shellHash: sShellHash
+                    }
+                  })).then(function () {
+                    addFESRNavigationSource(FESRNavigationSource.Cards);
+                  });
+                });
               });
             });
           } catch (e) {
@@ -548,7 +562,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
     refreshData: function _refreshData() {
       try {
         const _this9 = this;
-        const _temp4 = _catch(function () {
+        const _temp6 = _catch(function () {
           return Promise.resolve(CardHelper.getServiceAsync()).then(function (_getServiceAsync) {
             _this9.cardHelperInstance = _getServiceAsync;
             return Promise.resolve(_this9.cardHelperInstance._refreshUserCards(false)).then(function () {
@@ -558,39 +572,75 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         }, function (error) {
           Log.error("Failed to refresh cards: ", error instanceof Error ? error.message : error);
         });
-        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
     },
     /**
-     * Renders the panel.
+     * Retrieves the Card Helper instance.
      *
      * @private
-     * @returns {Promise<void>} A promise that resolves when the panel is rendered.
+     * @returns {Promise<ICardHelperInstance>} A promise that resolves with the Card Helper instance.
      */
-    renderPanel: function _renderPanel() {
+    getCardHelper: function _getCardHelper() {
       try {
         const _this0 = this;
-        function _temp6() {
-          return Promise.resolve(_this0.rerenderCards()).then(function () {
-            _this0.fireEvent("loaded");
-          });
+        function _temp8() {
+          return _this0.cardHelperInstance;
         }
-        const _temp5 = function () {
+        const _temp7 = function () {
           if (!_this0.cardHelperInstance) {
             _this0.pageManagerInstance = _this0.pageManagerInstance || getPageManagerInstance(_this0);
-            return Promise.resolve(Promise.all([CardHelper.getServiceAsync(), _this0.pageManagerInstance.hasCustomSpace()])).then(function ([cardHelperInstance, hasCustomSpace]) {
+            return Promise.resolve(Promise.all([_this0.getCardHelperService(), _this0.pageManagerInstance.hasCustomSpace()])).then(function ([cardHelperInstance, hasCustomSpace]) {
               _this0.cardHelperInstance = cardHelperInstance;
               _this0.hasCustomSpace = hasCustomSpace;
             });
           }
         }();
-        return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    /**
+     * Renders the panel.
+     *
+     * @private
+     * @returns {Promise<void>} A promise that resolves when the panel is rendered.
+     */
+    renderPanel: function _renderPanel() {
+      try {
+        const _this1 = this;
+        const _temp9 = _catch(function () {
+          return Promise.resolve(_this1.rerenderCards()).then(function () {
+            _this1.fireEvent("loaded");
+          });
+        }, function (error) {
+          Log.error(error instanceof Error ? error.message : String(error));
+        });
+        return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
     },
+    /**
+     * Sorts the menu items based on the provided order.
+     *
+     * @private
+     * @param {string[]} menuItems - The order of the menu items.
+     */
+    _sortMenuItems: function _sortMenuItems(menuItems) {
+      const panelMenuItems = this.getAggregation("menuItems");
+      let sortedMenuItems = sortMenuItems(menuItems, panelMenuItems);
+      this.removeAllAggregation("menuItems");
+      sortedMenuItems?.forEach(menuItem => this.addAggregation("menuItems", menuItem));
+    },
+    _setMenuItemsVisibility: function _setMenuItemsVisibility(menuItem, bVisible) {
+      if (menuItem && (menuItem.getId().includes(cardsMenuItems.REFRESH) || menuItem.getId().includes(cardsMenuItems.EDIT_CARDS) || menuItem.getId().includes("showMore"))) {
+        menuItem.setVisible(bVisible);
+      }
+    },
     /**
      * Rerenders the cards.
      *
@@ -599,103 +649,172 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     rerenderCards: function _rerenderCards(skipRecommendation = false) {
       try {
-        const _this1 = this;
-        if (!_this1._cardsRendered) {
-          _this1._cardsRendered = new Promise((resolve, reject) => {
+        const _this10 = this;
+        if (!_this10._cardsRendered) {
+          _this10._cardsRendered = new Promise((resolve, reject) => {
             void function () {
               try {
-                const _temp10 = _catch(function () {
+                const _temp13 = _catch(function () {
                   // Enable placeholders after updating/rerendering cards
-                  const sDefaultAggreName = _this1._getCardContainer().getMetadata().getDefaultAggregationName();
-                  _this1._getCardContainer().removeAllAggregation(sDefaultAggreName);
-                  _this1._showPlaceHolders();
+                  const sDefaultAggreName = _this10._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+                  _this10._getCardWrapperContainer().removeAllAggregation(sDefaultAggreName);
+                  _this10._showPlaceHolders();
                   // Fetch Cards from insights service
-                  const preferedCardIDs = _this1.hasCustomSpace ? PREFERED_CARDS : [];
-                  return Promise.resolve(_this1.cardHelperInstance?._getUserVisibleCardModel(preferedCardIDs)).then(function (userVisibleCardModel) {
-                    const aCards = userVisibleCardModel.getProperty("/cards");
-                    const listBinding = userVisibleCardModel?.bindList("/cards");
-                    if (!listBinding.hasListeners("change")) {
-                      listBinding?.enableExtendedChangeDetection(true, "/cards", {});
-                      listBinding?.attachChange(function () {
-                        try {
-                          return Promise.resolve(_this1._cardsRendered ?? Promise.resolve()).then(function () {
-                            const visibleCards = userVisibleCardModel.getProperty("/cards");
-                            if (visibleCards.length !== _this1.aVisibleCardInstances.length && visibleCards.length > 0) {
-                              _this1._showCards(visibleCards);
-                            } else if (!visibleCards.length) {
-                              _this1.fireHandleHidePanel();
-                            }
-                          });
-                        } catch (e) {
-                          return Promise.reject(e);
-                        }
-                      });
-                    }
-                    _this1._controlModel.setProperty("/userVisibleCards", aCards);
-                    return Promise.resolve(_this1.getPersonalisationProperty(RECOMMENDATION_PATH)).then(function (showRecommendation) {
-                      function _temp1() {
-                        _this1._cardsRendered = undefined;
-                        resolve();
-                      }
-                      const _temp0 = function () {
-                        if (aCards.length === 0 && showRecommendation === undefined && !skipRecommendation) {
-                          return Promise.resolve(_this1._getRecommendationCards()).then(function () {});
-                        } else {
-                          const _temp9 = function () {
-                            if (aCards.length) {
-                              function _temp8() {
-                                // from available cards, check for old recommended cards and update it if present,
-                                // else show available visible cards
-                                return Promise.resolve(_this1.checkForRecommendedCards(aCards)).then(function () {});
+                  return Promise.resolve(_this10.getCardHelper()).then(function (cardHelper) {
+                    const preferedCardIDs = _this10.hasCustomSpace ? PREFERED_CARDS : [];
+                    return Promise.resolve(cardHelper._getUserVisibleCardModel(preferedCardIDs)).then(function (userVisibleCardModel) {
+                      const aCards = userVisibleCardModel.getProperty("/cards");
+                      const listBinding = userVisibleCardModel?.bindList("/cards");
+                      if (!listBinding.hasListeners("change")) {
+                        listBinding?.enableExtendedChangeDetection(true, "/cards", {});
+                        listBinding?.attachChange(function () {
+                          try {
+                            return Promise.resolve(_this10._cardsRendered ?? Promise.resolve()).then(function () {
+                              const visibleCards = userVisibleCardModel.getProperty("/cards");
+                              if (visibleCards.length !== _this10.aVisibleCardInstances.length && visibleCards.length > 0) {
+                                // Show cards in UI
+                                _this10._showCards(visibleCards);
+                              } else if (!visibleCards.length) {
+                                //if there are no tiles, hide the panel and show the error panel
+                                _this10.setProperty("title", `${_this10._i18nBundle?.getText("insightsCards")}`);
+                                _this10.getMenuItems().forEach(item => {
+                                  _this10._setMenuItemsVisibility(item, false);
+                                });
+                                _this10.fireHandleHidePanel();
+                                _this10._addErrorPanel();
                               }
-                              const _temp7 = function () {
-                                if (showRecommendation === undefined) {
-                                  return Promise.resolve(_this1._updateRecommendationStatus()).then(function () {});
-                                }
-                              }();
-                              return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
-                            } else {
-                              _this1.fireHandleHidePanel();
-                            }
-                          }();
-                          if (_temp9 && _temp9.then) return _temp9.then(function () {});
+                            });
+                          } catch (e) {
+                            return Promise.reject(e);
+                          }
+                        });
+                      }
+                      _this10._controlModel.setProperty("/userVisibleCards", aCards);
+                      return Promise.resolve(_this10.getPersonalisationProperty(RECOMMENDATION_PATH)).then(function (showRecommendation) {
+                        function _temp12() {
+                          _this10._cardsRendered = undefined;
+                          resolve();
                         }
-                      }();
-                      return _temp0 && _temp0.then ? _temp0.then(_temp1) : _temp1(_temp0);
+                        const _temp11 = function () {
+                          if (aCards.length === 0 && showRecommendation === undefined && !skipRecommendation) {
+                            return Promise.resolve(_this10._getRecommendationCards()).then(function () {});
+                          } else {
+                            const _temp10 = function () {
+                              if (aCards.length) {
+                                function _temp1() {
+                                  // from available cards, check for old recommended cards and update it if present,
+                                  // else show available visible cards
+                                  return Promise.resolve(_this10.checkForRecommendedCards(aCards)).then(function () {});
+                                }
+                                _this10._errorPanel?.setVisible(false);
+                                //Update the panel title with the number of cards
+                                _this10.setProperty("title", `${_this10._i18nBundle?.getText("insightsCards")} (${aCards.length})`);
+                                //if the panel has been loaded and has cards, update the visibility of header elements of the panel
+                                _this10.getMenuItems().forEach(item => {
+                                  _this10._setMenuItemsVisibility(item, true);
+                                });
+                                const _temp0 = function () {
+                                  if (showRecommendation === undefined) {
+                                    return Promise.resolve(_this10._updateRecommendationStatus()).then(function () {});
+                                  }
+                                }();
+                                return _temp0 && _temp0.then ? _temp0.then(_temp1) : _temp1(_temp0);
+                              } else {
+                                _this10.fireHandleHidePanel();
+                                _this10._addErrorPanel();
+                                const layout = _this10._getCardsContainer()?._getLayout();
+                                if (layout.getProperty("expanded")) {
+                                  _this10.cardsContainer.addContent(_this10);
+                                  layout?.toggleFullScreen(_this10);
+                                  //remove the cards panel from the cards container
+                                  _this10.cardsContainer.removeContent(_this10);
+                                }
+                              }
+                            }();
+                            if (_temp10 && _temp10.then) return _temp10.then(function () {});
+                          }
+                        }();
+                        return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
+                      });
                     });
                   });
                 }, function (error) {
-                  _this1.fireHandleHidePanel();
-                  _this1._cardsRendered = undefined;
+                  _this10.fireHandleHidePanel();
+                  _this10._addErrorPanel(false);
+                  _this10._cardsRendered = undefined;
                   if (error instanceof Error) {
                     Log.error(error.message);
                     reject(error);
                   }
                 });
-                return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(function () {}) : void 0);
+                return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(function () {}) : void 0);
               } catch (e) {
                 return Promise.reject(e);
               }
             }();
           });
         }
-        return Promise.resolve(_this1._cardsRendered);
+        return Promise.resolve(_this10._cardsRendered);
       } catch (e) {
         return Promise.reject(e);
       }
     },
+    /**
+     * Adds an error panel when no cards are available.
+     *
+     * @private
+     */
+    _addErrorPanel: function _addErrorPanel(showActions = true) {
+      const parentContainer = this._getCardsContainer();
+      //set the visibility of cards panel to false
+      this.setVisible(false);
+      if (!this._errorPanel) {
+        this._errorPanel = new ErrorPanel(`${this.getId()}-errorCardsPanel`, {
+          additionalData: [new Button(`${this.getId()}-addInsightsCardsBtn`, {
+            text: this._i18nBundle.getText("addInsightsCardBtn"),
+            type: "Emphasized",
+            press: () => {
+              this._getCardsContainer()?._getLayout().openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS);
+            }
+          })],
+          messageTitle: this._i18nBundle.getText("noAppsTitle"),
+          messageDescription: this._i18nBundle.getText("noInsightsCardsMsg")
+        });
+        this._errorPanel.getData();
+        //Add the menu items and action buttons to the error panel
+        const editCardsMenuItem = this._createEditCardsMenuItem(errorPanelMenuItems.EDIT_CARDS, "manageCards");
+        this._errorPanel.addAggregation("menuItems", editCardsMenuItem);
+        this._sortMenuItems(sortedMenuItems);
+        this._errorPanel.setProperty("enableSettings", true);
+      }
+      this._errorPanel.getProperty("additionalData").forEach(control => control.setVisible(showActions));
+      //Add the title to the error panel
+      this._errorPanel.setProperty("title", this._i18nBundle?.getText("insightsCards"));
+      this._errorPanel.setVisible(true);
+      parentContainer.addAggregation("content", this._errorPanel);
+      //set the visibility of header elements of the error panel
+      this._errorPanel.getMenuItems().forEach(item => {
+        if (item.getId().includes(errorPanelMenuItems.EDIT_CARDS) && showActions || item.getId().includes("settings")) {
+          item.setVisible(true);
+        } else {
+          item.setVisible(false);
+        }
+      });
+    },
     /**
      * Sets the new visible cards in the model and updates the UI.
      * @private
      */
     setNewVisibleCards: function _setNewVisibleCards() {
       try {
-        const _this10 = this;
-        const preferedCardIDs = _this10.hasCustomSpace ? PREFERED_CARDS : [];
-        return Promise.resolve(_this10.cardHelperInstance._getUserVisibleCardModel(preferedCardIDs)).then(function (visibleCardModel) {
-          const aNewCards = visibleCardModel.getProperty("/cards");
-          _this10._controlModel.setProperty("/userVisibleCards", aNewCards);
-          _this10._showCards(aNewCards);
+        const _this11 = this;
+        return Promise.resolve(_this11.getCardHelper()).then(function (cardHelper) {
+          const preferedCardIDs = _this11.hasCustomSpace ? PREFERED_CARDS : [];
+          return Promise.resolve(cardHelper?._getUserVisibleCardModel(preferedCardIDs)).then(function (visibleCardModel) {
+            const aNewCards = visibleCardModel.getProperty("/cards");
+            _this11._controlModel.setProperty("/userVisibleCards", aNewCards);
+            _this11._showCards(aNewCards);
+          });
         });
       } catch (e) {
         return Promise.reject(e);
@@ -715,7 +834,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     checkForRecommendedCards: function _checkForRecommendedCards(aCards) {
       try {
-        const _this11 = this;
+        const _this12 = this;
         let manifestIds = [];
         aCards.forEach((oVisCard, idx) => {
           let oCard = oVisCard.descriptorContent;
@@ -731,24 +850,26 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         });
         return Promise.resolve(function () {
           if (manifestIds.length) {
-            const uniqueManifestDetails = _this11.getUniqueManifestDetails(manifestIds);
-            return Promise.resolve(_this11.regenerateCards(uniqueManifestDetails, manifestIds)).then(function (aUpdatedCards) {
+            const uniqueManifestDetails = _this12.getUniqueManifestDetails(manifestIds);
+            return Promise.resolve(_this12.regenerateCards(uniqueManifestDetails, manifestIds)).then(function (aUpdatedCards) {
               let _exit2 = false;
-              function _temp12(_result2) {
-                return _exit2 ? _result2 : Promise.resolve(_this11.setNewVisibleCards()).then(function () {});
+              function _temp15(_result2) {
+                return _exit2 ? _result2 : Promise.resolve(_this12.setNewVisibleCards()).then(function () {});
               }
-              const _temp11 = function () {
+              const _temp14 = function () {
                 if (aUpdatedCards?.length) {
                   // Update the model with updated cards
-                  return Promise.resolve(_this11.cardHelperInstance._updateCards(aUpdatedCards.map(oCard => oCard?.newManifest?.descriptorContent))).then(function () {});
+                  return Promise.resolve(_this12.getCardHelper()).then(function (cardHelper) {
+                    return Promise.resolve(cardHelper?._updateCards(aUpdatedCards.map(oCard => oCard?.newManifest?.descriptorContent))).then(function () {});
+                  });
                 } else {
                   _exit2 = true;
                 }
               }();
-              return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
+              return _temp14 && _temp14.then ? _temp14.then(_temp15) : _temp15(_temp14);
             });
           } else {
-            _this11._showCards(aCards);
+            _this12._showCards(aCards);
           }
         }());
       } catch (e) {
@@ -789,9 +910,9 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     _getManifests: function _getManifests(manifestIds) {
       try {
-        const _this12 = this;
+        const _this13 = this;
         // from the provided manifestIds which are unique generate new recommended card manifests
-        return Promise.resolve(_this12.appManagerInstance._getCardManifest(undefined, manifestIds)).then(function (aManifests) {
+        return Promise.resolve(_this13.appManagerInstance._getCardManifest(undefined, manifestIds)).then(function (aManifests) {
           if (aManifests?.length) {
             let aRegeneratedCards = aManifests.map(function (oCard) {
               if (oCard?.["sap.card"]) {
@@ -803,7 +924,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
               };
             });
             // sometimes same card is recommended more than once, hence remove such duplicates
-            let mappedResults = _this12._removeDuplicateRegeneratedCards(aRegeneratedCards, manifestIds);
+            let mappedResults = _this13._removeDuplicateRegeneratedCards(aRegeneratedCards, manifestIds);
             return mappedResults;
           } else {
             return [];
@@ -830,9 +951,9 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     regenerateCards: function _regenerateCards(manifestIds, allManifestIds) {
       try {
-        const _this13 = this;
+        const _this14 = this;
         return Promise.resolve(_catch(function () {
-          return Promise.resolve(_this13._getManifests(manifestIds)).then(function (aMappedManifest) {
+          return Promise.resolve(_this14._getManifests(manifestIds)).then(function (aMappedManifest) {
             // create unique identifier for each card based on its id and target properties.
             const createUniqueKey = item => {
               if (item?.target?.semanticObject && item?.target?.action) {
@@ -939,20 +1060,20 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     _getPersonalizationData: function _getPersonalizationData() {
       try {
-        const _this14 = this;
-        function _temp14() {
-          return Promise.resolve(_this14.oPersonalizer.read()).then(function (oPersData) {
+        const _this15 = this;
+        function _temp17() {
+          return Promise.resolve(_this15.oPersonalizer.read()).then(function (oPersData) {
             return oPersData || {};
           });
         }
-        const _temp13 = function () {
-          if (!_this14.oPersonalizer) {
-            return Promise.resolve(_this14._getPersonalization()).then(function (_this14$_getPersonali) {
-              _this14.oPersonalizer = _this14$_getPersonali;
+        const _temp16 = function () {
+          if (!_this15.oPersonalizer) {
+            return Promise.resolve(_this15._getPersonalization()).then(function (_this15$_getPersonali) {
+              _this15.oPersonalizer = _this15$_getPersonali;
             });
           }
         }();
-        return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13));
+        return Promise.resolve(_temp16 && _temp16.then ? _temp16.then(_temp17) : _temp17(_temp16));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -960,8 +1081,8 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
     // Fetch personalization data property value
     getPersonalisationProperty: function _getPersonalisationProperty(propertyKey) {
       try {
-        const _this15 = this;
-        return Promise.resolve(_this15._getPersonalizationData()).then(function (oPersData) {
+        const _this16 = this;
+        return Promise.resolve(_this16._getPersonalizationData()).then(function (oPersData) {
           return oPersData?.[propertyKey];
         });
       } catch (e) {
@@ -976,12 +1097,12 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     _getRecommendationCards: function _getRecommendationCards() {
       try {
-        const _this16 = this;
-        return Promise.resolve(_this16.appManagerInstance.getRecommenedCards()).then(function (aRecommendedCards) {
+        const _this17 = this;
+        return Promise.resolve(_this17.appManagerInstance.getRecommenedCards()).then(function (aRecommendedCards) {
           if (aRecommendedCards?.length) {
-            return _this16._handleRecommendationCards(aRecommendedCards);
+            return _this17._handleRecommendationCards(aRecommendedCards);
           }
-          _this16.fireHandleHidePanel();
+          _this17.fireHandleHidePanel();
         });
       } catch (e) {
         return Promise.reject(e);
@@ -994,11 +1115,13 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     _handleRecommendationCards: function _handleRecommendationCards(aRecommendedCards) {
       try {
-        const _this17 = this;
+        const _this18 = this;
         const cardManifests = aRecommendedCards.map(oCard => oCard.descriptorContent);
-        return Promise.resolve(_this17.cardHelperInstance?._createCards(cardManifests)).then(function () {
-          return Promise.resolve(_this17._updateRecommendationStatus()).then(function () {
-            return _this17.setNewVisibleCards();
+        return Promise.resolve(_this18.getCardHelper()).then(function (cardHelper) {
+          return Promise.resolve(cardHelper?._createCards(cardManifests)).then(function () {
+            return Promise.resolve(_this18._updateRecommendationStatus()).then(function () {
+              return _this18.setNewVisibleCards();
+            });
           });
         });
       } catch (e) {
@@ -1033,12 +1156,12 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         rowSize: this.cardHeight,
         gap: "1rem"
       });
-      this.cardsContainer = new GridContainer(`${this.getId()}-insightsCardsFlexBox`, {
+      this.cardsWrapperContainer = new GridContainer(`${this.getId()}-insightsCardsFlexBox`, {
         visible: "{= !${/isPhone}}"
       }).addStyleClass("sapUiSmallMarginTop").setLayout(this.cardsContainerSettings);
-      this.cardsContainer.setModel(this._controlModel);
-      this.addDragDropConfigTo(this.cardsContainer, oEvent => this._handleCardsDnd(oEvent));
-      return this.cardsContainer;
+      this.cardsWrapperContainer.setModel(this._controlModel);
+      this.addDragDropConfigTo(this.cardsWrapperContainer, oEvent => this._handleCardsDnd(oEvent));
+      return this.cardsWrapperContainer;
     },
     /**
      * Creates the mobile card container.
@@ -1054,7 +1177,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         scrollTime: 1000,
         showDividers: false,
         visible: "{/isPhone}"
-      });
+      }).addStyleClass("sapCuxInsightsMobileCardsContainer");
       this.cardsMobileContainer.setModel(this._controlModel);
       this.addDragDropConfigTo(this.cardsMobileContainer, oEvent => this._handleCardsDnd(oEvent));
       return this.cardsMobileContainer;
@@ -1085,9 +1208,9 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
       });
 
       // add HBox as item to GridList
-      const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
+      const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
       if (sDefaultAggreName) {
-        this._getCardContainer().addAggregation(sDefaultAggreName, oPreviewHBox);
+        this._getCardWrapperContainer().addAggregation(sDefaultAggreName, oPreviewHBox);
       }
     },
     /**
@@ -1097,7 +1220,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      * @returns {number} The number of placeholder cards that should be displayed. Defaults to 1 if no valid count is determined.
      */
     _calculatePlaceholderCardCount: function _calculatePlaceholderCardCount() {
-      const layoutDomRef = this._getInsightsContainer()?._getLayout()?.getDomRef();
+      const layoutDomRef = this._getCardsContainer()?._getLayout()?.getDomRef();
       let count = 0;
       if (layoutDomRef) {
         const sectionDomRef = layoutDomRef.childNodes[0];
@@ -1125,14 +1248,11 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      * @param {ICard[]} aCards - The cards to display.
      */
     _showCards: function _showCards(aCards) {
-      const panelName = this.getMetadata().getName();
+      const parentContainer = this._getCardsContainer();
+      parentContainer.removeContent(this._errorPanel);
       this.fireHandleUnhidePanel();
-      this._getInsightsContainer()?.updatePanelsItemCount(aCards.length, panelName);
-      if (this._headerVisible) {
-        this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")} (${aCards.length})`);
-      }
-      const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-      this._getCardContainer().removeAllAggregation(sDefaultAggreName);
+      const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+      this._getCardWrapperContainer().removeAllAggregation(sDefaultAggreName);
       this.aVisibleCardInstances = [];
       this.cardsInViewport = [];
 
@@ -1176,8 +1296,8 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         });
 
         // add VBox as item to GridList
-        const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-        this._getCardContainer().addAggregation(sDefaultAggreName, oPreviewVBox);
+        const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+        this._getCardWrapperContainer().addAggregation(sDefaultAggreName, oPreviewVBox);
       });
     },
     /**
@@ -1187,34 +1307,14 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      * @param {Event} event - The event object.
      */
     _handleEditCards: function _handleEditCards(event) {
-      /* If called from Panel Header event.source() will return TilesPanel, if called from Insights Container event.source() will return InsightsContainer.
+      /* If called from Panel Header event.source() will return TilesPanel, if called from cards Container event.source() will return cardsContainer.
       _getLayout is available at Container Level*/
       let parent = event.getSource().getParent() || this;
-      if (parent instanceof CardsPanel) {
+      if (parent instanceof CardsPanel || parent instanceof ErrorPanel) {
         parent = parent.getParent();
       }
       parent?._getLayout().openSettingsDialog(SETTINGS_PANELS_KEYS.INSIGHTS_CARDS);
     },
-    /**
-     * Hides the header of the cards panel.
-     *
-     * @private
-     */
-    handleHideHeader: function _handleHideHeader() {
-      this._headerVisible = false;
-      this.setProperty("title", "");
-      this._toggleHeaderActions(false);
-    },
-    /**
-     * Adds the header to the cards panel.
-     *
-     * @private
-     */
-    handleAddHeader: function _handleAddHeader() {
-      this._headerVisible = true;
-      this.setProperty("title", `${this._i18nBundle?.getText("insightsCards")} (${this._controlModel.getProperty("/userVisibleCards")?.length})`);
-      this._toggleHeaderActions(true);
-    },
     /**
      * Refreshes the cards.
      *
@@ -1232,43 +1332,45 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     _handleCardsDnd: function _handleCardsDnd(oEvent) {
       try {
-        const _this18 = this;
+        const _this19 = this;
         const sInsertPosition = oEvent.getParameter("dropPosition"),
           oDragItem = oEvent.getParameter("draggedControl"),
           iDragItemIndex = oDragItem.getParent()?.indexOfItem(oDragItem),
           oDropItem = oEvent.getParameter("droppedControl"),
           iDropItemIndex = oDragItem.getParent().indexOfItem(oDropItem);
-        _this18._cardsFlexWrapper?.setBusy(true);
+        _this19._cardsFlexWrapper?.setBusy(true);
         // take the moved item from dragIndex and add to dropindex
-        const _temp17 = _finallyRethrows(function () {
+        const _temp20 = _finallyRethrows(function () {
           return _catch(function () {
-            function _temp16() {
+            function _temp19() {
               setTimeout(() => {
-                focusDraggedItem(_this18._getCardContainer(), iDropItemIndex);
+                focusDraggedItem(_this19._getCardWrapperContainer(), iDropItemIndex);
               }, 0);
             }
-            const _temp15 = function () {
-              if (!_this18._controlModel.getProperty("/userAllCards").length) {
-                return Promise.resolve(_this18.cardHelperInstance._getUserAllCardModel()).then(function (userAllCardsModel) {
-                  _this18._controlModel.setProperty("/userAllCards", userAllCardsModel.getProperty("/cards"));
-                  return Promise.resolve(_this18.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex)).then(function () {});
+            const _temp18 = function () {
+              if (!_this19._controlModel.getProperty("/userAllCards").length) {
+                return Promise.resolve(_this19.getCardHelper()).then(function (cardHelper) {
+                  return Promise.resolve(cardHelper?._getUserAllCardModel()).then(function (userAllCardsModel) {
+                    _this19._controlModel.setProperty("/userAllCards", userAllCardsModel.getProperty("/cards"));
+                    return Promise.resolve(_this19.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex)).then(function () {});
+                  });
                 });
               } else {
-                return Promise.resolve(_this18.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex)).then(function () {});
+                return Promise.resolve(_this19.updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex)).then(function () {});
               }
             }();
-            return _temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15);
+            return _temp18 && _temp18.then ? _temp18.then(_temp19) : _temp19(_temp18);
           }, function (error) {
             if (error instanceof Error) {
               Log.error(error.message);
             }
           });
         }, function (_wasThrown, _result3) {
-          _this18._cardsFlexWrapper?.setBusy(false);
+          _this19._cardsFlexWrapper?.setBusy(false);
           if (_wasThrown) throw _result3;
           return _result3;
         });
-        return Promise.resolve(_temp17 && _temp17.then ? _temp17.then(function () {}) : void 0);
+        return Promise.resolve(_temp20 && _temp20.then ? _temp20.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -1284,9 +1386,9 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     updateCardList: function _updateCardList(sInsertPosition, iDropItemIndex, iDragItemIndex) {
       try {
-        const _this19 = this;
-        const aUserVisibleCards = _this19._controlModel.getProperty("/userVisibleCards"),
-          aUserAllCards = _this19._controlModel.getProperty("/userAllCards"),
+        const _this20 = this;
+        const aUserVisibleCards = _this20._controlModel.getProperty("/userVisibleCards"),
+          aUserAllCards = _this20._controlModel.getProperty("/userAllCards"),
           sDragedPositionRank = aUserVisibleCards[iDragItemIndex]?.rank,
           sDropedPositionRank = aUserVisibleCards[iDropItemIndex]?.rank;
         let iUpdatedDragItemIndex = aUserAllCards.findIndex(oCard => oCard.rank === sDragedPositionRank),
@@ -1299,18 +1401,20 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         } else if (sInsertPosition === "After" && iUpdatedDragItemIndex > iUpdatedDropItemIndex) {
           iUpdatedDropItemIndex++;
         }
-        const _temp18 = function () {
+        const _temp21 = function () {
           if (iUpdatedDragItemIndex !== iUpdatedDropItemIndex) {
-            const aUpdatedCards = _this19.cardHelperInstance.handleDndCardsRanking(iUpdatedDragItemIndex, iUpdatedDropItemIndex, aUserAllCards);
-            return Promise.resolve(_this19.cardHelperInstance._updateMultipleCards(aUpdatedCards, "PUT")).then(function () {
-              _this19._sortCardsOnRank(aUserAllCards);
-              _this19._controlModel.setProperty("/userAllCards", aUserAllCards);
-              _this19._controlModel.setProperty("/userVisibleCards", aUserAllCards.filter(oCard => oCard.visibility));
-              return Promise.resolve(_this19.rerenderCards()).then(function () {});
+            return Promise.resolve(_this20.getCardHelper()).then(function (cardHelper) {
+              const aUpdatedCards = cardHelper?.handleDndCardsRanking(iUpdatedDragItemIndex, iUpdatedDropItemIndex, aUserAllCards);
+              return Promise.resolve(cardHelper?._updateMultipleCards(aUpdatedCards, "PUT")).then(function () {
+                _this20._sortCardsOnRank(aUserAllCards);
+                _this20._controlModel.setProperty("/userAllCards", aUserAllCards);
+                _this20._controlModel.setProperty("/userVisibleCards", aUserAllCards.filter(oCard => oCard.visibility));
+                return Promise.resolve(_this20.rerenderCards()).then(function () {});
+              });
             });
           }
         }();
-        return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(function () {}) : void 0);
+        return Promise.resolve(_temp21 && _temp21.then ? _temp21.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -1351,10 +1455,10 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      */
     _updateRecommendationStatus: function _updateRecommendationStatus() {
       try {
-        const _this20 = this;
-        return Promise.resolve(_this20._getPersonalizationData()).then(function (oPersData) {
+        const _this21 = this;
+        return Promise.resolve(_this21._getPersonalizationData()).then(function (oPersData) {
           oPersData[RECOMMENDATION_PATH] = true;
-          return _this20.oPersonalizer.write(oPersData);
+          return _this21.oPersonalizer.write(oPersData);
         });
       } catch (e) {
         return Promise.reject(e);
@@ -1367,7 +1471,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      * @returns {number} - The number of visible cards.
      */
     _calculateVisibleCardCount: function _calculateVisibleCardCount() {
-      const layout = this._getInsightsContainer()._getLayout();
+      const layout = this._getCardsContainer()._getLayout();
       const pageDomRef = layout.getDomRef();
       const deviceType = this.getDeviceType();
       let count = 1;
@@ -1403,7 +1507,7 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      * @override
      */
     _adjustLayout: function _adjustLayout() {
-      const layout = this._getInsightsContainer()?._getLayout();
+      const layout = this._getCardsContainer()?._getLayout();
       let cardWidth = this.cardWidth;
       const isMobileDevice = this.getDeviceType() === DeviceType.Mobile;
       if (layout && this.aVisibleCardInstances?.length > 0) {
@@ -1420,8 +1524,8 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         // update cards in viewport
         if (cardCount !== this.cardsInViewport.length) {
           this.cardsInViewport = this.aVisibleCardInstances.slice(0, cardCount);
-          const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-          this._getCardContainer().removeAllAggregation(sDefaultAggreName);
+          const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+          this._getCardWrapperContainer().removeAllAggregation(sDefaultAggreName);
           this.cardsInViewport.forEach(card => {
             const manifest = card.getManifest();
             const sType = manifest["sap.card"]?.type;
@@ -1444,22 +1548,21 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
             if (overlayHBoxWrapper) {
               cardWrapper.addItem(overlayHBoxWrapper);
             }
-            const sDefaultAggreName = this._getCardContainer().getMetadata().getDefaultAggregationName();
-            this._getCardContainer().addAggregation(sDefaultAggreName, cardWrapper);
+            const sDefaultAggreName = this._getCardWrapperContainer().getMetadata().getDefaultAggregationName();
+            this._getCardWrapperContainer().addAggregation(sDefaultAggreName, cardWrapper);
           });
           this.shareCardsInViewport();
         }
-
-        // show/hide Full Screen Button if available
+        // show/hide full screen button
         const showFullScreenButton = isElementExpanded || this.aVisibleCardInstances.length > cardCount;
-        if (this._headerVisible) {
-          this._getInsightsContainer()?.toggleFullScreenElements(this, showFullScreenButton);
-        } else {
-          const fullScreenButton = getAssociatedFullScreenMenuItem(this);
-          const fullScreenText = fullScreenButton?.getTitle();
-          this._getInsightsContainer()?.updateMenuItem(this._controlMap.get(`${this.getId()}-${cardsContainerMenuItems.SHOW_MORE}`), showFullScreenButton, fullScreenText);
-          this._getInsightsContainer()?.updateActionButton(this._controlMap.get(`${this.getId()}-${cardsContainerActionButtons.SHOW_MORE}`), showFullScreenButton, fullScreenText);
-        }
+        const fullScreenButton = getAssociatedFullScreenMenuItem(this);
+        const fullScreenText = fullScreenButton.getTitle();
+        //update the panel menu-item show more button and show more action button in panel header
+        fullScreenButton?.setVisible(showFullScreenButton);
+        fullScreenButton?.setTitle(fullScreenText);
+        const fullScreenActionButton = getAssociatedFullScreenButton(this);
+        fullScreenActionButton?.setVisible(showFullScreenButton);
+        fullScreenActionButton?.setText(fullScreenText);
       } else {
         this.cardWidth = this.getDeviceType() === DeviceType.Mobile ? "19rem" : "22rem";
       }
@@ -1470,50 +1573,17 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
         this.cardsContainerSettings?.setColumnSize(this.cardWidth);
       }
     },
-    /**
-     * Retrieves the menu items for the container.
-     *
-     * @private
-     * @returns {MenuItem[]} An array of MenuItem instances.
-     */
-    getContainerMenuItems: function _getContainerMenuItems() {
-      if (!this._containerMenuItems) {
-        const containerRefreshMenuItem = this._createRefreshMenuItem(cardsContainerMenuItems.REFRESH, "containerCardsRefresh");
-        const containerEditCardsMenuItem = this._createEditCardsMenuItem(cardsContainerMenuItems.EDIT_CARDS, "containerManageCards");
-        const containerShowMoreMenuItem = createShowMoreMenuItem(this, cardsContainerMenuItems.SHOW_MORE, "containerCardsShowMore");
-        this._controlMap.set(`${this.getId()}-${cardsContainerMenuItems.SHOW_MORE}`, containerShowMoreMenuItem);
-        this._containerMenuItems = [containerRefreshMenuItem, containerEditCardsMenuItem, containerShowMoreMenuItem];
-      }
-      return this._containerMenuItems;
-    },
-    /**
-     * Retrieves the action buttons for the container.
-     *
-     * @private
-     * @returns {Button[]} An array of Button instances.
-     */
-    getContainerActionButtons: function _getContainerActionButtons() {
-      if (!this._containerActionButtons) {
-        this._containerActionButtons = [];
-        const actionButton = createShowMoreActionButton(this, cardsContainerActionButtons.SHOW_MORE, "containerCardsShowMore");
-        if (actionButton) {
-          this._controlMap.set(`${this.getId()}-${cardsContainerActionButtons.SHOW_MORE}`, actionButton);
-          this._containerActionButtons.push(actionButton);
-        }
-      }
-      return this._containerActionButtons;
-    },
     /**
      * Retrieves the insights container.
      *
      * @private
-     * @returns {InsightsContainer} - The insights container.
+     * @returns {CardsContainer} - The cards container.
      */
-    _getInsightsContainer: function _getInsightsContainer() {
-      if (!this.insightsContainer) {
-        this.insightsContainer = this.getParent();
+    _getCardsContainer: function _getCardsContainer() {
+      if (!this.cardsContainer) {
+        this.cardsContainer = this.getParent();
       }
-      return this.insightsContainer;
+      return this.cardsContainer;
     },
     /**
      * Creates the refresh menu item.
@@ -1557,18 +1627,6 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
       }
       return menuItem;
     },
-    /**
-     * Toggles the visibility of the header actions.
-     *
-     * @param {boolean} bShow - Whether to show or hide the header actions.
-     * @private
-     */
-    _toggleHeaderActions: function _toggleHeaderActions(bShow) {
-      this.getAggregation("menuItems")?.forEach(menuItem => {
-        this._getInsightsContainer()?.toggleMenuListItem(menuItem, bShow);
-      });
-      this.getAggregation("actionButtons")?.forEach(actionButton => this._getInsightsContainer()?.toggleActionButton(actionButton, bShow));
-    },
     /**
      * Retrieves the card container based on the device type.
      *
@@ -1576,23 +1634,11 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
      * @returns {GridContainer | HeaderContainer} - The card container.
      *
      */
-    _getCardContainer: function _getCardContainer() {
+    _getCardWrapperContainer: function _getCardWrapperContainer() {
       if (this.getDeviceType() === DeviceType.Mobile) {
         return this.cardsMobileContainer;
       }
-      return this.cardsContainer;
-    },
-    /**
-     * Sorts the menu items based on the provided order.
-     *
-     * @private
-     * @param {string[]} menuItems - The order of the menu items.
-     */
-    _sortMenuItems: function _sortMenuItems(menuItems) {
-      const panelMenuItems = this.getAggregation("menuItems");
-      let sortedMenuItems = sortMenuItems(menuItems, panelMenuItems);
-      this.removeAllAggregation("menuItems");
-      sortedMenuItems?.forEach(menuItem => this.addAggregation("menuItems", menuItem));
+      return this.cardsWrapperContainer;
     },
     /**
      * Shares the cards that are currently in the viewport by firing the "visibleCardsUpdated" event.
@@ -1618,11 +1664,44 @@ sap.ui.define(["sap/base/Log", "sap/f/GridContainer", "sap/f/GridContainerSettin
     exit: function _exit() {
       runtimeHostCreated = false;
       this.getAggregation("host")?.destroy();
+    },
+    /**
+     * Initializes the CardHelper service promise.
+     *
+     * @private
+     * @returns {Promise<ICardHelperInstance>} - card helper service.
+     */
+    getCardHelperService: function _getCardHelperService() {
+      if (this.cardHelper === null) {
+        this.cardHelper = CardHelper.getServiceAsync();
+      }
+      return this.cardHelper;
+    },
+    /**
+     * Checks if insights service is enabled.
+     *
+     * @private
+     * @returns {Promise<boolean>} - true if insights service is enabled else false.
+     */
+    isInsightsEnabled: function _isInsightsEnabled() {
+      try {
+        const _this22 = this;
+        return Promise.resolve(_catch(function () {
+          return Promise.resolve(_this22.getCardHelperService()).then(function (_this22$getCardHelper) {
+            return _this22$getCardHelper !== null;
+          });
+        }, function (error) {
+          Log.error(error instanceof Error ? error.message : String(error));
+          return false;
+        }));
+      } catch (e) {
+        return Promise.reject(e);
+      }
     }
   });
   CardsPanel.cardsMenuItems = cardsMenuItems;
-  CardsPanel.cardsContainerMenuItems = cardsContainerMenuItems;
-  CardsPanel.cardsContainerActionButtons = cardsContainerActionButtons;
+  CardsPanel.cardsActionButtons = cardsActionButtons;
+  CardsPanel.errorPanelMenuItems = errorPanelMenuItems;
   return CardsPanel;
 });
 //# sourceMappingURL=CardsPanel.js.map