@sapui5/sap.cux.home 1.141.0 → 1.142.1

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

@@ -2,13 +2,15 @@
  * SAP UI development toolkit for HTML5 (SAPUI5)
  *  * (c) Copyright 2009-2025 SAP SE. All rights reserved
  */
-sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnListItem", "sap/m/HBox", "sap/m/MessageBox", "sap/m/ObjectIdentifier", "sap/m/Table", "sap/m/Text", "sap/m/ToggleButton", "sap/m/VBox", "sap/ui/core/Element", "sap/ui/core/Icon", "sap/ui/core/Lib", "sap/ui/model/json/JSONModel", "./BaseSettingsPanel", "./flexibility/Layout.flexibility", "./utils/Accessibility", "./utils/Constants", "./utils/DragDropUtils", "./utils/PersonalisationUtils"], function (Log, Button, Column, ColumnListItem, HBox, MessageBox, ObjectIdentifier, Table, Text, ToggleButton, VBox, Element, Icon, Lib, JSONModel, __BaseSettingsPanel, ___flexibility_Layoutflexibility, ___utils_Accessibility, ___utils_Constants, ___utils_DragDropUtils, __PersonalisationUtils) {
+sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnListItem", "sap/m/HBox", "sap/m/MessageBox", "sap/m/ObjectIdentifier", "sap/m/Table", "sap/m/Text", "sap/m/ToggleButton", "sap/m/VBox", "sap/ui/core/Element", "sap/ui/core/Icon", "sap/ui/core/Lib", "sap/ui/model/json/JSONModel", "./BaseContainer", "./BaseSettingsPanel", "./NoDataContainer", "./flexibility/Layout.flexibility", "./utils/Accessibility", "./utils/Constants", "./utils/DragDropUtils", "./utils/PersonalisationUtils"], function (Log, Button, Column, ColumnListItem, HBox, MessageBox, ObjectIdentifier, Table, Text, ToggleButton, VBox, Element, Icon, Lib, JSONModel, __BaseContainer, __BaseSettingsPanel, __NoDataContainer, ___flexibility_Layoutflexibility, ___utils_Accessibility, ___utils_Constants, ___utils_DragDropUtils, __PersonalisationUtils) {
   "use strict";
 
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
   }
+  const BaseContainer = _interopRequireDefault(__BaseContainer);
   const BaseSettingsPanel = _interopRequireDefault(__BaseSettingsPanel);
+  const NoDataContainer = _interopRequireDefault(__NoDataContainer);
   const CHANGE_TYPES = ___flexibility_Layoutflexibility["CHANGE_TYPES"];
   const getInvisibleText = ___utils_Accessibility["getInvisibleText"];
   const SETTINGS_PANELS_KEYS = ___utils_Constants["SETTINGS_PANELS_KEYS"];
@@ -67,30 +69,48 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
      *
      * @private
      */
-    createShowHideChangeFile: function _createShowHideChangeFile(oControlEvent) {
+    createShowHideChangeFile: function _createShowHideChangeFile(oControlEvent, itemIndex) {
       try {
         const _this = this;
         const toggle = oControlEvent.getSource();
         const bValue = !toggle.getPressed();
-        const oContext = toggle.getBindingContext()?.getObject();
-        oContext.visible = bValue;
-        _this._getPanel().getSections().find(section => section.completeId === oContext.completeId).visible = bValue;
+        const contextObject = toggle.getBindingContext()?.getObject();
+        const selectedCompleteId = contextObject.isComposite ? contextObject.children[itemIndex].completeId : contextObject.completeId;
         const sChangeType = bValue ? CHANGE_TYPES.UNHIDE : CHANGE_TYPES.HIDE;
-        const oWrapperItem = Element.getElementById(oContext.completeId);
+        const oWrapperItem = Element.getElementById(selectedCompleteId);
         _this._manageSectionsChanges.push({
           selectorElement: oWrapperItem,
           changeSpecificData: {
-            changeType: sChangeType
+            changeType: sChangeType,
+            content: {
+              compositeId: oWrapperItem.getProperty("compositeId")
+            }
           }
         });
-        // }
         return Promise.resolve(_this._saveManageSectionsDialog()).then(function () {
           setTimeout(() => oWrapperItem.adjustLayout());
 
           // switch to collapsed view if the container is in expanded view
+          //update this._orderedSections visibility
+          //loop through this._orderedSections and update the visibility of the section which has same composite id as oWrapperItem
           if (!bValue) {
             _this._switchToCollapsedViewIfRequired([oWrapperItem]);
           }
+          toggle.setPressed(!bValue);
+          for (const section of _this._orderedSections) {
+            // Check for matching composite ID
+            if (section.compositeId === oWrapperItem.getProperty("compositeId") && section.compositeId !== undefined) {
+              for (const child of section.children || []) {
+                if (child.completeId === selectedCompleteId) {
+                  child.visible = bValue;
+                  return; // Exit the whole function once found & set
+                }
+              }
+            } else if (section.completeId === selectedCompleteId) {
+              section.visible = bValue;
+              return; // Exit the whole function once found & set
+            }
+          }
         });
       } catch (e) {
         return Promise.reject(e);
@@ -106,11 +126,70 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
     _switchToCollapsedViewIfRequired: function _switchToCollapsedViewIfRequired(containers) {
       const layout = this._getPanel();
       const isLayoutExpanded = layout.getProperty("expanded");
-      const expandedContainer = containers.filter(container => layout._getCurrentExpandedElementName() === container.getProperty("fullScreenName"));
+      const expandedContainer = containers.filter(container => {
+        //find the fullscreename of the container if available else loop through the content of container
+        // and search in its panels which are present in its content aggregation
+        let fullScreenName = container.getProperty("fullScreenName") || undefined;
+        if (!fullScreenName) {
+          return container.getContent().some(panel => layout._getCurrentExpandedElementName() === panel.getProperty("fullScreenName"));
+        }
+        return layout._getCurrentExpandedElementName() === container.getProperty("fullScreenName");
+      });
       if (isLayoutExpanded) {
         layout.toggleFullScreen(expandedContainer[0]._getSelectedPanel());
       }
     },
+    //function to update this._orderedSections
+    _updateOrderedSections: function _updateOrderedSections() {
+      const createEmptyCompositeItem = () => ({
+        completeId: "",
+        sContainerType: "",
+        blocked: false,
+        visible: false,
+        title: "",
+        text: "",
+        isComposite: false,
+        children: []
+      });
+      const compositeMap = {};
+      this._orderedSections.forEach(section => {
+        const container = Element.getElementById(section.completeId);
+        if (container instanceof BaseContainer) {
+          const compositeId = container.getProperty("compositeId");
+          if (compositeId) {
+            if (!compositeMap[compositeId]) {
+              compositeMap[compositeId] = [];
+            }
+            section.compositeId = compositeId;
+            section.groupTitle = container.getCustomSettings().groupTitle || "";
+            compositeMap[compositeId].push(section);
+          } else {
+            section.compositeId = null;
+          }
+        }
+      });
+
+      // map through this.orderedSections and replace items with compositeId with a single composite item containing its children
+      this._orderedSections = this._orderedSections.map(section => {
+        if (section.compositeId && compositeMap[section.compositeId]) {
+          const compositeItem = createEmptyCompositeItem();
+          compositeMap[section.compositeId].forEach(section => {
+            this.addToCompositeItem(section, compositeItem, section.groupTitle);
+          });
+          delete compositeMap[section.compositeId];
+          return compositeItem;
+        }
+        return section;
+      });
+
+      //filter this.orderedSections to remove items which has same composite item with no children
+      this._orderedSections = this._orderedSections.filter(section => {
+        if (section.compositeId) {
+          return section.children && section.children.length > 0;
+        }
+        return true;
+      });
+    },
     /**
      * Method to load the sections
      *
@@ -121,52 +200,33 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
         const _this2 = this;
         const layout = _this2._getPanel();
         return Promise.resolve(layout._calculateSectionsState()).then(function () {
-          _this2._orderedSections = JSON.parse(JSON.stringify(layout.getSections()));
-          // not a good way as there could be more than one insights container, discuss
+          const sections = layout.getSections();
+          _this2._orderedSections = JSON.parse(JSON.stringify(sections));
+
+          //loop through this._orderedSections and take out the children items from composite items and add them to same list
           // attach collapse event handler to rearrange layout elements if required
-          _this2._orderedSections.forEach(oSection => {
-            if (oSection.sContainerType === "sap.cux.home.InsightsContainer" && !oSection.title) {
-              oSection.title = String(_this2._i18nBundle?.getText("insights"));
+          _this2._orderedSections = _this2._orderedSections.reduce((accumulator, section) => {
+            if (section.isComposite && section.children) {
+              accumulator.push(...section.children);
+            } else {
+              accumulator.push(section);
             }
-          });
+            return accumulator;
+          }, []);
+          _this2._updateOrderedSections();
           _this2._controlModel = new JSONModel(_this2._orderedSections);
           _this2._layoutTable.setModel(_this2._controlModel);
           _this2._layoutTable.bindItems({
             path: "/",
-            factory: id => {
+            factory: (id, context) => {
               if (!_this2._dndInvisibleText || _this2._dndInvisibleText.isDestroyed()) {
                 _this2._dndInvisibleText = getInvisibleText(_this2.getId() + "--layoutDndText", _this2._i18nBundle.getText("keyPressAriaText"));
               }
-              return new ColumnListItem(`${id}--columnListItem`, {
-                type: "Inactive",
-                cells: [new HBox(`${id}--columnListHBox`, {
-                  alignItems: "Center",
-                  items: [new Icon(`${id}--columnListIcon`, {
-                    src: "sap-icon://vertical-grip"
-                  }).addStyleClass("sapUiSmallMarginEnd"), new HBox(`${id}--columnListItemHBox`, {
-                    justifyContent: "SpaceBetween",
-                    alignItems: "Center",
-                    width: "100%",
-                    items: [new ObjectIdentifier(`${id}--columnListObjectIdentifier`, {
-                      title: "{title}",
-                      text: "{text}",
-                      tooltip: "{title}"
-                    }), new ToggleButton(`${id}--layoutSettingstoggleButton`, {
-                      tooltip: "{= ${visible} ? '" + _this2._i18nBundle.getText("hideBtn") + "' : '" + _this2._i18nBundle.getText("showBtn") + "' }",
-                      icon: "sap-icon://show",
-                      type: "Emphasized",
-                      enabled: "{= !${blocked}}",
-                      press: event => {
-                        void _this2.createShowHideChangeFile(event);
-                      },
-                      pressed: "{= !${visible}}",
-                      ariaLabelledBy: ["selectLabel"]
-                    }).addStyleClass("sapUiTinyMarginEnd sapUiTinyMarginTop")]
-                  }), _this2._dndInvisibleText],
-                  width: "100%"
-                })],
-                ariaLabelledBy: [_this2._dndInvisibleText.getId()]
-              }).addStyleClass("insightsListItem insightsListMargin");
+              //check the condition for news and pages as it is a composite container
+              if (context.getObject()?.isComposite === true) {
+                return _this2.getCompositeLayoutListItem(id);
+              }
+              return _this2.getLayoutListItem(id);
             }
           });
           if (!_this2._isCollapseHandlerAttached) {
@@ -178,6 +238,138 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
         return Promise.reject(e);
       }
     },
+    addToCompositeItem: function _addToCompositeItem(section, compositeItem, compositeTitle) {
+      compositeItem.isComposite = true;
+      compositeItem.title = compositeTitle;
+      if (!compositeItem.completeId) {
+        compositeItem.completeId = section.completeId;
+      }
+      //Add compositeId
+      compositeItem.compositeId = section.compositeId;
+      compositeItem.children?.push({
+        ...section
+      });
+      compositeItem.text = section.text;
+      compositeItem.blocked = section.blocked;
+      compositeItem.visible = section.visible;
+    },
+    getLayoutListItem: function _getLayoutListItem(id) {
+      return new ColumnListItem(`${id}--columnListItem`, {
+        type: "Inactive",
+        cells: [new HBox(`${id}--columnListHBox`, {
+          alignItems: "Center",
+          items: [new Icon(`${id}--columnListIcon`, {
+            src: "sap-icon://vertical-grip"
+          }).addStyleClass("sapUiSmallMarginEnd"), new HBox(`${id}--columnListItemHBox`, {
+            justifyContent: "SpaceBetween",
+            alignItems: "Center",
+            width: "100%",
+            items: [new ObjectIdentifier(`${id}--columnListObjectIdentifier`, {
+              title: "{title}",
+              text: "{text}",
+              tooltip: "{title}"
+            }), new ToggleButton(`${id}--layoutSettingstoggleButton`, {
+              tooltip: "{= ${visible} ? '" + this._i18nBundle.getText("hideBtn") + "' : '" + this._i18nBundle.getText("showBtn") + "' }",
+              icon: "sap-icon://show",
+              type: "Emphasized",
+              enabled: "{= !${blocked}}",
+              press: event => {
+                void this.createShowHideChangeFile(event, 0);
+              },
+              pressed: "{= !${visible}}",
+              ariaLabelledBy: ["selectLabel"]
+            }).addStyleClass("sapUiTinyMarginEnd sapUiTinyMarginTop")]
+          }), this._dndInvisibleText],
+          width: "100%"
+        })],
+        ariaLabelledBy: [this._dndInvisibleText.getId()]
+      }).addStyleClass("insightsListItem insightsListMargin");
+    },
+    getCompositeLayoutListItem: function _getCompositeLayoutListItem(id) {
+      const oTemplateHBox = new VBox(`${id}--compositeVBox`, {
+        items: {
+          path: "children",
+          factory: (childId, oContext) => {
+            const iIndex = parseInt(childId.split("-").pop() || "0", 10);
+            return new HBox(`${id}--columnListItemChildHBox${iIndex}`, {
+              justifyContent: "SpaceBetween",
+              alignItems: "Center",
+              items: [new ObjectIdentifier(`${id}--childObjectIdentifier${iIndex}`, {
+                title: oContext.getProperty("title"),
+                text: oContext.getProperty("text"),
+                tooltip: oContext.getProperty("title")
+              }), new ToggleButton(`${id}--layoutSettingstoggleButtonChild${iIndex}`, {
+                tooltip: {
+                  parts: [{
+                    path: "visible"
+                  }, {
+                    path: "blocked"
+                  }],
+                  formatter: (bVisible, bBlocked) => {
+                    if (bBlocked) {
+                      return this._i18nBundle.getText("blockedTooltip");
+                    }
+                    return bVisible ? this._i18nBundle.getText("hideBtn") : this._i18nBundle.getText("showBtn");
+                  }
+                },
+                icon: "sap-icon://show",
+                type: "Emphasized",
+                enabled: "{= !${blocked}}",
+                pressed: "{= !${visible}}",
+                ariaLabelledBy: ["selectLabel"],
+                press: event => {
+                  void this.createShowHideChangeFile(event, iIndex);
+                }
+              }).addStyleClass("sapUiTinyMarginEnd sapUiTinyMarginTop")]
+            }).addStyleClass("sapCuxCompositeItem");
+          }
+        }
+      });
+      return new ColumnListItem(`${id}--columnListItem`, {
+        type: "Inactive",
+        cells: [new VBox(`${id}--compositeVBoxContainer`, {
+          items: [
+          // Header (main title)
+          new HBox(`${id}--columnListHBox`, {
+            alignItems: "Center",
+            items: [new Icon(`${id}--columnListIcon`, {
+              src: "sap-icon://vertical-grip"
+            }).addStyleClass("sapUiSmallMarginEnd"), new HBox(`${id}--columnListItemHBox`, {
+              justifyContent: "SpaceBetween",
+              alignItems: "Center",
+              width: "100%",
+              items: [new ObjectIdentifier(`${id}--columnListObjectIdentifier`, {
+                title: "{title}",
+                text: "{text}",
+                tooltip: "{title}"
+              })]
+            })],
+            width: "100%"
+          }).addStyleClass("sapUiTinyMarginTopBottom"),
+          // Dynamically bound children
+          oTemplateHBox,
+          // Drag-n-drop invisible text
+          this._dndInvisibleText]
+        })],
+        ariaLabelledBy: [this._dndInvisibleText.getId()]
+      }).addStyleClass("insightsListItem insightsListMargin");
+    },
+    /**
+     * Reduces the ordered sections by flattening composite items.
+     * @private
+     * @returns {IElement[]} The reduced list of ordered sections.
+     */
+    _reduceOrderedSections: function _reduceOrderedSections() {
+      //loop through this._orderedSections and take out the children items from composite items and add them to same list
+      return this._orderedSections.reduce((accumulator, section) => {
+        if (section.isComposite && section.children) {
+          accumulator.push(...section.children);
+        } else {
+          accumulator.push(section);
+        }
+        return accumulator;
+      }, []);
+    },
     /**
      * Rearranges the layout elements if their order has changed.
      *
@@ -187,6 +379,12 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
       const layout = this._getPanel();
       const currentLayoutElements = layout.getItems();
       if (Array.isArray(this._allLayoutElements) && currentLayoutElements.length === this._allLayoutElements.length) {
+        //pick each elements out from this._orderedSections
+        const elementList = this._reduceOrderedSections();
+        //Now loop through elementList and _allLayoutElements to rearrange _allLayoutElements list based on completeId
+        this._allLayoutElements = elementList.map(element => {
+          return this._allLayoutElements.find(layoutElement => layoutElement.getId() === element.completeId);
+        });
         const isOrderChanged = currentLayoutElements.some((element, index) => {
           return element.getId() !== this._allLayoutElements[index].getId();
         });
@@ -319,7 +517,7 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
      */
     _getActualIndex: function _getActualIndex(id) {
       const layout = this._getPanel();
-      this._allLayoutElements = this._allLayoutElements || [...layout.getItems()];
+      this._allLayoutElements = [...layout.getItems()];
       const isLayoutExpanded = layout.getProperty("expanded");
       const expandedElementConfig = layout._getCurrentExpandedElement();
       if (isLayoutExpanded && expandedElementConfig) {
@@ -374,12 +572,42 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
             const sectionOrder = _this4._orderedSections;
             const dragObject = oDragItem.getBindingContext()?.getObject();
             const dropObject = oDropItem.getBindingContext()?.getObject();
-            const actualDragItemIndex = _this4._getActualIndex(dragObject.completeId);
-            const actualDropItemIndex = _this4._getActualIndex(dropObject.completeId);
+            let actualDragItemIndex = _this4._getActualIndex(dragObject.completeId);
+            let actualDropItemIndex = _this4._getActualIndex(dropObject.completeId);
             _this4._rearrangeLayoutElements(actualDragItemIndex, actualDropItemIndex);
             sectionOrder.splice(iDragItemIndex, 1);
             sectionOrder.splice(iDropItemIndex, 0, dragObject);
             oWrapper.setSections(sectionOrder);
+            //loop through the oWrapper.getItems() and find the index and noData Container
+            let noDataContainerIndex = -1;
+            const items = oWrapper.getItems();
+            let noDataContainer = null;
+            for (let i = 0; i < items.length; i++) {
+              const item = items[i];
+              if (item instanceof NoDataContainer) {
+                noDataContainerIndex = i;
+                noDataContainer = item;
+              }
+            }
+
+            //now insert the noDataContainer back to its noDataContainerIndex in sectionOrder
+            if (noDataContainer && noDataContainerIndex !== -1) {
+              sectionOrder.splice(noDataContainerIndex, 0, noDataContainer);
+            }
+            let finalTargetIndex = 0;
+            const elementList = _this4._reduceOrderedSections();
+            finalTargetIndex = elementList.findIndex(element => element.completeId === dragObject.completeId);
+
+            //find the composite child for this dragObject if it has a composite id
+            const compositeChildren = elementList.filter(element => {
+              if (dragObject.compositeId && dragObject.compositeId === element.compositeId && element.completeId !== dragObject.completeId) {
+                return true;
+              }
+            });
+            if (noDataContainer && noDataContainerIndex !== -1) {
+              //remove noDataContainer from sectionOrder to avoid the display of an empty item in myhome Settings dialog
+              sectionOrder.splice(noDataContainerIndex, 1);
+            }
             _this4._manageSectionsChanges.push({
               selectorElement: oWrapper,
               changeSpecificData: {
@@ -387,7 +615,8 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
                 movedElements: [{
                   id: dragObject.completeId,
                   sourceIndex: actualDragItemIndex,
-                  targetIndex: actualDropItemIndex
+                  targetIndex: iDragItemIndex < iDropItemIndex && dragObject.isComposite && compositeChildren.length ? finalTargetIndex + 1 // Adjust index when composite has children and moving forward
+                  : finalTargetIndex
                 }],
                 source: {
                   id: wrapperId,
@@ -399,11 +628,60 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
                 }
               }
             });
+            if (compositeChildren.length > 0) {
+              compositeChildren.forEach(compositeChild => {
+                _this4._manageSectionsChanges.push({
+                  selectorElement: oWrapper,
+                  changeSpecificData: {
+                    changeType: CHANGE_TYPES.MOVE,
+                    movedElements: [{
+                      id: compositeChild.completeId,
+                      sourceIndex: actualDragItemIndex,
+                      targetIndex: finalTargetIndex + 1 // +1 as it will be after the main dragObject
+                    }],
+                    source: {
+                      id: wrapperId,
+                      aggregation: "items"
+                    },
+                    target: {
+                      id: wrapperId,
+                      aggregation: "items"
+                    }
+                  }
+                });
+              });
+            }
             return Promise.resolve(_this4._saveManageSectionsDialog()).then(function () {
-              //switch to collapsed view if any of the containers is in expanded view
-              const draggedContainer = Element.getElementById(dragObject.completeId);
-              const droppedContainer = Element.getElementById(dropObject.completeId);
-              _this4._switchToCollapsedViewIfRequired([draggedContainer, droppedContainer]);
+              // Switch to collapsed view if any of the containers is in expanded view
+              const isLayoutExpanded = oWrapper.getProperty("expanded");
+              if (isLayoutExpanded && dragObject.isComposite) {
+                const expandedElementName = oWrapper._getCurrentExpandedElementName();
+                const compositeContainer = Element.getElementById(dragObject.completeId);
+                //find the fullScreenName of the expanded element from the content of composite container
+                const fullScreenName = compositeContainer.getContent().find(panel => panel.getProperty("fullScreenName") === expandedElementName)?.getProperty("fullScreenName");
+                let draggedContainer;
+
+                // If expanded element name differs, find the matching child container
+                if (expandedElementName !== fullScreenName) {
+                  const matchingChild = dragObject.children?.find(child => {
+                    const childContainer = Element.getElementById(child.completeId);
+                    //loop through the content of childContainer to find the panel which has fullScreenName property same as expandedElementName
+                    return childContainer.getContent().find(panel => {
+                      return panel.getProperty("fullScreenName") === expandedElementName;
+                    });
+                  });
+                  draggedContainer = matchingChild ? Element.getElementById(matchingChild.completeId) : Element.getElementById(dragObject.completeId);
+                } else {
+                  draggedContainer = Element.getElementById(dragObject.completeId);
+                }
+                const droppedContainer = Element.getElementById(dropObject.completeId);
+                _this4._switchToCollapsedViewIfRequired([draggedContainer, droppedContainer]);
+              } else {
+                // Fallback: always collapse dragged and dropped containers
+                const draggedContainer = Element.getElementById(dragObject.completeId);
+                const droppedContainer = Element.getElementById(dropObject.completeId);
+                _this4._switchToCollapsedViewIfRequired([draggedContainer, droppedContainer]);
+              }
             });
           }
         }();
@@ -430,8 +708,15 @@ sap.ui.define(["sap/base/Log", "sap/m/Button", "sap/m/Column", "sap/m/ColumnList
               if (oAction === _this5._i18nBundle.getText("reset_cards_button")) {
                 const aChangesForDeletion = [];
                 for (let section of _this5._orderedSections) {
-                  const element = Element.getElementById(section.completeId);
-                  aChangesForDeletion.push(element);
+                  if (section.isComposite && section.children) {
+                    for (let panel of section.children) {
+                      const element = Element.getElementById(panel.completeId);
+                      aChangesForDeletion.push(element);
+                    }
+                  } else {
+                    const element = Element.getElementById(section.completeId);
+                    aChangesForDeletion.push(element);
+                  }
                 }
                 // Revert Changes Related to DragnDrop
                 aChangesForDeletion.push(_this5._getPanel());