@sapui5/sap.cux.home 1.142.0 → 1.142.2

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

@@ -1,8 +1,8 @@
 /*!
  * SAP UI development toolkit for HTML5 (SAPUI5)
- *  * (c) Copyright 2009-2025 SAP SE. All rights reserved
+ *  * (c) Copyright 2009-2026 SAP SE. All rights reserved
  */
-sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sap/m/CustomListItem", "sap/m/ExpandableText", "sap/m/FlexBox", "sap/m/GenericTile", "sap/m/HBox", "sap/m/Label", "sap/m/library", "sap/m/MessageToast", "sap/m/Text", "sap/m/VBox", "sap/ui/core/Fragment", "sap/ui/core/library", "sap/ui/model/ChangeReason", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel", "sap/ui/model/Sorter", "sap/ushell/Container", "./AppsContainer", "./BaseSettingsPanel", "./FavAppPanel", "./InsightsContainer", "./utils/AppManager", "./utils/Constants", "./utils/DataFormatUtils", "./utils/FeatureUtils", "./utils/FESRUtil", "./utils/PXFeedback"], function (Localization, Log, Button, CustomListItem, ExpandableText, FlexBox, GenericTile, HBox, Label, sap_m_library, MessageToast, Text, VBox, Fragment, sap_ui_core_library, ChangeReason, JSONModel, ResourceModel, Sorter, Container, __AppsContainer, __BaseSettingsPanel, __FavAppPanel, __InsightsContainer, __AppManager, ___utils_Constants, ___utils_DataFormatUtils, ___utils_FeatureUtils, ___utils_FESRUtil, ___utils_PXFeedback) {
+sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sap/m/CustomListItem", "sap/m/ExpandableText", "sap/m/FlexBox", "sap/m/FlexItemData", "sap/m/GenericTile", "sap/m/HBox", "sap/m/Label", "sap/m/library", "sap/m/MessageToast", "sap/m/ObjectStatus", "sap/m/SegmentedButton", "sap/m/SegmentedButtonItem", "sap/m/Title", "sap/m/VBox", "sap/ui/core/Fragment", "sap/ui/core/library", "sap/ui/model/ChangeReason", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel", "sap/ui/model/Sorter", "sap/ushell/Container", "./AppsContainer", "./BaseSettingsPanel", "./FavAppPanel", "./TilesContainer", "./utils/AppManager", "./utils/Constants", "./utils/DataFormatUtils", "./utils/FeatureUtils", "./utils/FESRUtil", "./utils/PXFeedback"], function (Localization, Log, Button, CustomListItem, ExpandableText, FlexBox, FlexItemData, GenericTile, HBox, Label, sap_m_library, MessageToast, ObjectStatus, SegmentedButton, SegmentedButtonItem, Title, VBox, Fragment, sap_ui_core_library, ChangeReason, JSONModel, ResourceModel, Sorter, Container, __AppsContainer, __BaseSettingsPanel, __FavAppPanel, __TilesContainer, __AppManager, ___utils_Constants, ___utils_DataFormatUtils, ___utils_FeatureUtils, ___utils_FESRUtil, ___utils_PXFeedback) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -31,7 +31,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     }
     return finalizer(false, result);
   }
-  const URLHelper = sap_m_library["URLHelper"];
+  const FlexAlignItems = sap_m_library["FlexAlignItems"];
   const _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
   function _settle(pact, state, value) {
     if (!pact.s) {
@@ -126,7 +126,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     _cycle();
     return pact;
   }
-  const ValueState = sap_ui_core_library["ValueState"];
+  const FlexDirection = sap_m_library["FlexDirection"];
   function _forOf(target, body, check) {
     if (typeof target[_iteratorSymbol] === "function") {
       var iterator = target[_iteratorSymbol](),
@@ -187,10 +187,15 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       return body(values[i]);
     }, check);
   }
+  const FlexJustifyContent = sap_m_library["FlexJustifyContent"];
+  const FlexRendertype = sap_m_library["FlexRendertype"];
+  const URLHelper = sap_m_library["URLHelper"];
+  const TitleLevel = sap_ui_core_library["TitleLevel"];
+  const ValueState = sap_ui_core_library["ValueState"];
   const AppsContainer = _interopRequireDefault(__AppsContainer);
   const BaseSettingsPanel = _interopRequireDefault(__BaseSettingsPanel);
   const FavAppPanel = _interopRequireDefault(__FavAppPanel);
-  const InsightsContainer = _interopRequireDefault(__InsightsContainer);
+  const TilesContainer = _interopRequireDefault(__TilesContainer);
   const AppManager = _interopRequireDefault(__AppManager);
   const AI_APP_FINDER_API = ___utils_Constants["AI_APP_FINDER_API"];
   const AI_APP_FINDER_BASE_URL = ___utils_Constants["AI_APP_FINDER_BASE_URL"];
@@ -207,7 +212,8 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
   const Constants = {
     DeprecatedInfoText: "deprecated",
     MinQueryLength: 2,
-    MaxDescriptionLength: 2000
+    MaxQueryLength: 2000,
+    MaxDescriptionLength: 300
   };
   var SearchStatus = /*#__PURE__*/function (SearchStatus) {
     SearchStatus["Idle"] = "idle";
@@ -222,6 +228,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
   }(ErrorType || {});
   var TileType = /*#__PURE__*/function (TileType) {
     TileType["Static"] = "STATIC";
+    TileType["Dynamic"] = "DYNAMIC";
     return TileType;
   }(TileType || {});
   /**
@@ -318,84 +325,87 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
         const _this = this;
         return Promise.resolve(Container.getServiceAsync("VisualizationInstantiation")).then(function (_Container$getService) {
           _this.vizInstantiationService = _Container$getService;
-          //load ui fragment
-          return Promise.resolve(Fragment.load({
-            id: `${_this.getId()}-content`,
-            name: "sap.cux.home.utils.fragment.appsAdditionContent",
-            controller: _this
-          })).then(function (_Fragment$load) {
-            const panelContent = _Fragment$load;
-            _this.addAggregation("content", panelContent);
-
-            //initialize ui model
-            //bind suggested apps list
-            //focus on the first item when the list is updated
-            //bind search field
-            _this.model = new JSONModel({
-              query: "",
-              hasError: false,
-              errorType: ErrorType.NoResultsFound,
-              errorDescription: "",
-              searchStatus: SearchStatus.Idle,
-              loadingAnimations: _this._generateSearchingAnimations(),
-              suggestedAppsCount: 0,
-              userSelectedApps: [],
-              suggestedApps: [],
-              aiPolicyText: _this._generateAIPolicyText(),
-              invalidQuery: true,
-              feedback: {
-                thumbsUp: false,
-                thumbsDown: false
-              },
-              sampleQueries: [{
-                index: 1,
-                query: _this._i18nBundle.getText("sampleQuery_1")
-              }, {
-                index: 2,
-                query: _this._i18nBundle.getText("sampleQuery_2")
-              }, {
-                index: 3,
-                query: _this._i18nBundle.getText("sampleQuery_3")
-              }]
-            });
-            panelContent.setModel(_this.model);
-            panelContent.setModel(new ResourceModel({
-              bundleName: "sap.cux.home.i18n.messagebundle"
-            }), "i18n");
-            _this.addAppsButton.setModel(_this.model);
-            _this.appSuggestionList = Fragment.byId(`${_this.getId()}-content`, "appsList");
-            _this.appSuggestionList.bindAggregation("items", {
-              path: "/suggestedApps",
-              factory: _this._generateListItem.bind(_this),
-              sorter: new Sorter({
-                path: "status",
-                comparator: (firstApp, secondApp) => {
-                  const getPriority = statusArray => {
-                    if (statusArray.length === 0) return 0; // Empty array has highest priority
+          const _temp = _catch(function () {
+            return Promise.resolve(Fragment.load({
+              id: recycleId(`${_this.getId()}-content`),
+              name: "sap.cux.home.utils.fragment.appsAdditionContent",
+              controller: _this
+            })).then(function (_Fragment$load) {
+              const panelContent = _Fragment$load;
+              _this.addAggregation("content", panelContent);
 
-                    const hasAlreadyAdded = statusArray.includes(_this._i18nBundle.getText("alreadyAddedApp"));
-                    const hasDeprecated = statusArray.includes(_this._i18nBundle.getText("deprecatedApp"));
-                    if (hasAlreadyAdded && hasDeprecated) return 3; // Both statuses - lowest priority
-                    if (hasAlreadyAdded) return 1; // Only "Already Added"
-                    if (hasDeprecated) return 2; // Only "Deprecated"
+              //initialize ui model
+              //bind suggested apps list
+              //focus on the first item when the list is updated
+              //bind search field
+              _this.model = new JSONModel({
+                query: "",
+                hasError: false,
+                errorType: ErrorType.NoResultsFound,
+                errorDescription: "",
+                searchStatus: SearchStatus.Idle,
+                loadingAnimations: _this._generateSearchingAnimations(),
+                suggestedAppsCount: 0,
+                userSelectedApps: [],
+                suggestedApps: [],
+                aiPolicyText: _this._generateAIPolicyText(),
+                invalidQuery: true,
+                feedback: {
+                  thumbsUp: false,
+                  thumbsDown: false
+                },
+                sampleQueries: [{
+                  index: 1,
+                  query: _this._i18nBundle.getText("sampleQuery_1")
+                }, {
+                  index: 2,
+                  query: _this._i18nBundle.getText("sampleQuery_2")
+                }, {
+                  index: 3,
+                  query: _this._i18nBundle.getText("sampleQuery_3")
+                }]
+              });
+              panelContent.setModel(_this.model);
+              panelContent.setModel(new ResourceModel({
+                bundleName: "sap.cux.home.i18n.messagebundle"
+              }), "i18n");
+              _this.addAppsButton.setModel(_this.model);
+              _this.appSuggestionList = Fragment.byId(`${_this.getId()}-content`, "appsList");
+              _this.appSuggestionList.bindAggregation("items", {
+                path: "/suggestedApps",
+                factory: _this._generateListItem.bind(_this),
+                sorter: new Sorter({
+                  path: "",
+                  comparator: (firstApp, secondApp) => {
+                    const getPriority = app => {
+                      const hasAlreadyAdded = app.isStaticApp ? app.addedToApps : app.addedToInsights;
+                      const hasDeprecated = app.isDeprecated;
+                      if (!hasAlreadyAdded && !hasDeprecated) return 0; // Neither status - highest priority
+                      if (hasAlreadyAdded && hasDeprecated) return 3; // Both statuses - lowest priority
+                      if (hasAlreadyAdded) return 1; // Only "Already Added"
+                      if (hasDeprecated) return 2; // Only "Deprecated"
 
-                    return 4; // Any other combination (fallback)
-                  };
-                  const firstPriority = getPriority(firstApp);
-                  const secondPriority = getPriority(secondApp);
-                  return firstPriority - secondPriority;
+                      return 4; // Any other combination (fallback)
+                    };
+                    const firstPriority = getPriority(firstApp);
+                    const secondPriority = getPriority(secondApp);
+                    return firstPriority - secondPriority;
+                  }
+                })
+              });
+              _this.appSuggestionList.attachUpdateFinished(() => {
+                if (_this.model.getProperty("/suggestedAppsCount") > 0 && _this.model.getProperty("/searchStatus") === SearchStatus.Complete) {
+                  _this.appSuggestionList.getItems()?.[0]?.focus();
                 }
-              })
-            });
-            _this.appSuggestionList.attachUpdateFinished(() => {
-              if (_this.model.getProperty("/suggestedAppsCount") > 0 && _this.model.getProperty("/searchStatus") === SearchStatus.Complete) {
-                _this.appSuggestionList.getItems()?.[0]?.focus();
-              }
+              });
+              const searchTextArea = Fragment.byId(`${_this.getId()}-content`, "searchTextArea");
+              searchTextArea.onsapenter = _this.onPressGo.bind(_this);
             });
-            const searchTextArea = Fragment.byId(`${_this.getId()}-content`, "searchTextArea");
-            searchTextArea.onsapenter = _this.onPressGo.bind(_this);
+          }, function (error) {
+            Log.error("Failed to load panel content for AppsAdditionPanel:", error);
           });
-        });
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }); //load ui fragment
       } catch (e) {
         return Promise.reject(e);
       }
@@ -409,26 +419,47 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
      * @returns {CustomListItem} The generated list item control.
      */
     _generateListItem: function _generateListItem(id, context) {
-      const isStaticApp = context.getProperty("isStaticApp");
       const langTag = Localization.getLanguageTag();
       const currentLanguage = langTag.language.toLowerCase();
       const isEnglishLanguage = currentLanguage.startsWith("en");
       const listItem = new CustomListItem(id, {
-        selected: context.getProperty("addedToHomePage"),
+        //when toggled b/w app and tile view, the selection should update according to whether the app is already added to selected section
+        selected: {
+          path: "selectedView",
+          formatter: () => {
+            const isAppAlreadyAdded = this.isAppAlreadyAdded(context);
+            //bind associated checkbox to disable it when the app is already added
+            listItem.getMultiSelectControl(true).setEnabled(!isAppAlreadyAdded);
+            // if app is already added or if user has selected the app, mark it as selected
+            return isAppAlreadyAdded || this.userSelectedApps.has(listItem);
+          }
+        },
         content: [new FlexBox(recycleId(`${id}-result-container`), {
-          renderType: "Bare",
-          direction: isEnglishLanguage && isStaticApp ? "Column" : "Row",
-          alignItems: isEnglishLanguage && isStaticApp ? "Start" : "Center",
-          items: [this._getAppPreviewContainer(id, context), this._getAppDetailsContainer(id, context, isEnglishLanguage)]
-        }).addStyleClass("sapUiSmallMargin")]
+          renderType: FlexRendertype.Bare,
+          direction: FlexDirection.Row,
+          gap: "1.5rem",
+          items: [this._getAppDetailsContainer(id, context, isEnglishLanguage), this._getAppPreviewContainer(id, context)]
+        }).addStyleClass("sapUiSmallMargin sapUiTinyMarginBegin")]
       });
-
-      //bind associated checkbox to disable it when the app is already added to home page
-      listItem.getMultiSelectControl(true).setEnabled(!context.getProperty("addedToHomePage"));
       return listItem;
     },
     /**
-     * Creates a preview container for the suggested app.
+     * Cleans up resources when exiting the panel.
+     *
+     * @public
+     * @override
+     */
+    exit: function _exit() {
+      // Destroy fragments if they exist
+      const dialogId = `${this.getId()}-content`;
+      ["number", "query", "searchingAnimation"].forEach(elementId => {
+        const element = Fragment.byId(dialogId, elementId);
+        element?.destroy();
+      });
+      BaseSettingsPanel.prototype.exit.call(this);
+    },
+    /**
+    	 * Creates a preview container for the suggested app.
      *
      * @private
      * @param {string} id - The unique ID for the container.
@@ -437,33 +468,41 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
      */
     _getAppPreviewContainer: function _getAppPreviewContainer(id, context) {
       const container = new HBox(recycleId(`${id}-suggestedAppContainer`), {
-        renderType: "Bare"
+        renderType: FlexRendertype.Bare,
+        width: "19rem",
+        layoutData: new FlexItemData({
+          growFactor: 0,
+          shrinkFactor: 0,
+          alignSelf: FlexAlignItems.Center
+        }),
+        justifyContent: FlexJustifyContent.Center
       });
-      if (context.getProperty("isStaticApp")) {
-        // create generic tile for static app
-        container.addItem(new GenericTile(recycleId(`${id}-staticApp`), {
-          mode: "IconMode",
-          frameType: "TwoByHalf",
-          width: "19rem",
-          header: context.getProperty("title"),
-          subheader: context.getProperty("subTitle"),
-          tileIcon: context.getProperty("icon") || DEFAULT_APP_ICON,
-          visible: context.getProperty("isStaticApp"),
-          url: context.getProperty("url"),
-          press: event => {
-            this._persistDialog(this.getParent());
-            URLHelper.redirect(event.getSource()?.getUrl(), false);
-          }
-        }).addStyleClass("suggestedTile"));
-      } else {
-        // create custom visualization for other apps
-        const vizData = context.getProperty("vizData");
-        const instance = this.vizInstantiationService.instantiateVisualization(vizData);
-        instance?.setActive(true);
-        instance?.attachPress(() => this._persistDialog(this.getParent()));
-        container.addItem(instance);
-      }
-      return container;
+      container.addItem(new GenericTile(recycleId(`${id}-staticApp`), {
+        mode: "IconMode",
+        frameType: "TwoByHalf",
+        width: "19rem",
+        header: context.getProperty("title"),
+        subheader: context.getProperty("subTitle"),
+        tileIcon: context.getProperty("icon") || DEFAULT_APP_ICON,
+        visible: "{= ${selectedView} === 'STATIC'}",
+        url: context.getProperty("url"),
+        press: event => {
+          this._persistDialog(this.getParent());
+          URLHelper.redirect(event.getSource()?.getUrl(), false);
+        }
+      }).addStyleClass("suggestedTile"));
+      const vizData = context.getProperty("vizData");
+      // instantiate visualization for dynamic app
+      const vizInstance = this.vizInstantiationService.instantiateVisualization(vizData);
+      vizInstance?.setActive(true);
+      vizInstance?.setProperty("sizeBehavior", "Small", true);
+      vizInstance?.attachPress(() => this._persistDialog(this.getParent()));
+      vizInstance.bindProperty("visible", {
+        parts: ["selectedView"],
+        formatter: selectedView => selectedView !== TileType.Static
+      });
+      container.addItem(vizInstance);
+      return container.addStyleClass("suggestedAppPreviewContainer");
     },
     /**
      * Creates a details container for the suggested app.
@@ -477,23 +516,49 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     _getAppDetailsContainer: function _getAppDetailsContainer(id, context, isEnglishLanguage) {
       let description = isEnglishLanguage ? context.getProperty("description") : this._i18nBundle.getText("NoDescriptionAvailable");
       return new VBox(recycleId(`${id}-app-details-container`), {
-        renderType: "Bare",
-        gap: "0.5rem",
-        items: [new ExpandableText(recycleId(`${id}-description`), {
+        renderType: FlexRendertype.Bare,
+        gap: "1rem",
+        layoutData: new FlexItemData({
+          growFactor: 1
+        }),
+        items: [new HBox(recycleId(`${id}-title-container`), {
+          gap: "0.5rem",
+          alignItems: FlexAlignItems.Center,
+          renderType: FlexRendertype.Bare,
+          items: [new Title(recycleId(`${id}-app-title`), {
+            text: context.getProperty("title"),
+            titleStyle: TitleLevel.H6
+          }), new ObjectStatus(recycleId(`${id}-deprecatedApp`), {
+            text: this._i18nBundle.getText("deprecatedApp"),
+            icon: "sap-icon://alert",
+            state: ValueState.Warning,
+            visible: context.getProperty("isDeprecated")
+          })]
+        }), new ExpandableText(recycleId(`${id}-description`), {
           text: description,
-          maxCharacters: Constants.MaxDescriptionLength
-        }), new HBox(recycleId(`${id}-app-status-container`), {
-          renderType: "Bare",
-          visible: context.getProperty("status").length > 0,
-          items: [new Label(recycleId(`${id}-appStatusLabel`), {
-            text: this._i18nBundle.getText("appStatus"),
-            showColon: true
-          }), new HBox(recycleId(`${id}-app-status-texts`), {
-            renderType: "Bare",
-            items: this._generateStatusTexts(id, context.getProperty("status"))
-          }).addStyleClass("sapUiTinyMarginBegin statusTextsContainer")]
+          maxCharacters: Constants.MaxDescriptionLength,
+          layoutData: new FlexItemData({
+            growFactor: 1
+          })
+        }),
+        // app actions container
+        new HBox(recycleId(`${id}-app-actions-container`), {
+          renderType: FlexRendertype.Bare,
+          gap: "1.5rem",
+          alignItems: FlexAlignItems.Center,
+          items: [this.getAppViewTypeAction(id), new ObjectStatus(recycleId(`${id}-alreadyAddedStatus`), {
+            text: "{i18n>alreadyAddedApp}",
+            icon: "sap-icon://sys-enter-2",
+            state: "Success",
+            visible: {
+              parts: ["selectedView"],
+              formatter: () => {
+                return this.isAppAlreadyAdded(context);
+              }
+            }
+          })]
         })]
-      }).addStyleClass(isEnglishLanguage && context.getProperty("isStaticApp") ? "sapUiSmallMarginTop" : "sapUiSmallMarginBegin");
+      });
     },
     /**
      * Checks if the Apps Addition Panel is supported. Internally, it checks if the
@@ -508,7 +573,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     isSupported: function _isSupported() {
       try {
         const _this2 = this;
-        function _temp3() {
+        function _temp4() {
           //remove panel if it's not supported
           if (!_this2.isPanelSupported) {
             _this2.removeActionButton(_this2.addAppsButton);
@@ -524,20 +589,20 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
             action: "propose"
           }
         };
-        const _temp2 = function () {
+        const _temp3 = function () {
           if (_this2.isPanelSupported === undefined) {
             _this2.isPanelSupported = false;
-            const _temp = function () {
+            const _temp2 = function () {
               if (_this2.getFavAppPanel()) {
                 return Promise.resolve(isNavigationSupportedForFeature(FEATURE_TOGGLES.AI_SMART_APPFINDER, appsIntent)).then(function (_isNavigationSupporte) {
                   _this2.isPanelSupported = _isNavigationSupporte;
                 });
               }
             }();
-            if (_temp && _temp.then) return _temp.then(function () {});
+            if (_temp2 && _temp2.then) return _temp2.then(function () {});
           }
         }();
-        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -572,14 +637,18 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       return [`<svg height="167" fill="none">
 				${loadingShimmer}
 				<rect x="16" y="75" width="16" height="16" rx="4" fill="var(--sapContent_Placeholderloading_Background)"/>
-				<rect x="48" y="16" width="37%" height="70" rx="16" fill="url(#loadingShimmer)"/>
-				<rect x="48" y="102" width="93%" height="48" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="16" width="30%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="54" width="57%" height="64" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="130" width="16%" height="24" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="600" y="50" width="303" height="70" rx="16" fill="url(#loadingShimmer)"/>
 			</svg>`, `<svg height="180" fill="none">
 				${loadingShimmer}
 				<rect x="16" y="82" width="16" height="16" rx="4" fill="var(--sapContent_Placeholderloading_Background)"/>
-				<rect x="48" y="16" width="148" height="148" rx="16" fill="url(#loadingShimmer)"/>
-				<rect x="212" y="54" width="75%" height="48" rx="4" fill="url(#loadingShimmer)"/>
-				<rect x="212" y="110" width="13%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="16" width="30%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="54" width="57%" height="64" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="140" width="16%" height="24" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="210" y="140" width="10%" height="24" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="675" y="16" width="148" height="148" rx="16" fill="url(#loadingShimmer)"/>
 			</svg>`];
     },
     /**
@@ -607,6 +676,20 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       });
       this.userSelectedApps?.clear();
     },
+    setIllustrationSize: function _setIllustrationSize() {
+      const containerDom = Fragment.byId(`${this.getId()}-content`, "container")?.getDomRef();
+      if (containerDom) {
+        const clientHeight = containerDom.clientHeight;
+        const illustratedMessage = Fragment.byId(`${this.getId()}-content`, "beforeSearch");
+        if (clientHeight <= 500) {
+          illustratedMessage.setIllustrationSize("ExtraSmall");
+        } else if (500 < clientHeight && clientHeight < 650) {
+          illustratedMessage.setIllustrationSize("Small");
+        } else {
+          illustratedMessage.setIllustrationSize("Medium");
+        }
+      }
+    },
     /**
      * Handles the "Go" button press event for searching suggested apps.
      *
@@ -619,18 +702,18 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
         // validate query
         const query = _this3.model.getProperty("/query");
         if (!_this3.isValidQuery(query)) return Promise.resolve();
-        const _temp5 = _finallyRethrows(function () {
+        const _temp6 = _finallyRethrows(function () {
           return _catch(function () {
             // initiate search
             _this3.resetSearch();
             return Promise.resolve(_this3.fetchAppsFromSearch(query)).then(function (rawApps) {
-              const _temp4 = function () {
+              const _temp5 = function () {
                 if (_this3.model.getProperty("/searchStatus") === SearchStatus.Searching) {
                   return Promise.resolve(_this3.fetchAllAvailableVisualizations()).then(function (allVisualizations) {
                     return Promise.resolve(_this3.appManagerInstance.fetchFavVizs(true, true)).then(function (favoriteApps) {
                       return Promise.resolve(_this3.appManagerInstance.fetchInsightApps(true, _this3._i18nBundle.getText("insights"))).then(function (insightsApps) {
                         // generate suggested apps
-                        const apps = _this3._generateApps(rawApps, allVisualizations, [...favoriteApps, ...insightsApps]);
+                        const apps = _this3._generateApps(rawApps, allVisualizations, favoriteApps, insightsApps);
                         return Promise.resolve(_this3._filterUnsupportedApps(apps)).then(function (suggestedApps) {
                           if (suggestedApps.length === 0 && !_this3.model.getProperty("/hasError")) {
                             _this3._handleError("", suggestedApps.length);
@@ -648,7 +731,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
                   });
                 }
               }();
-              if (_temp4 && _temp4.then) return _temp4.then(function () {});
+              if (_temp5 && _temp5.then) return _temp5.then(function () {});
             }); // suggest apps if there are results and search is not cancelled
           }, function (err) {
             const message = err.message || "";
@@ -663,7 +746,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
           if (_wasThrown) throw _result;
           return _result;
         });
-        return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
+        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -694,13 +777,16 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
      * @private
      * @param {RawAppData[]} rawApps - The raw app data to process.
      * @param {IVisualization[]} allVisualizations - All available visualizations.
-     * @param {ICustomVisualization[]} homePageVisualizations - Visualizations available in homepage.
+     * @param {ICustomVisualization[]} favoriteApps - Favorite apps available in homepage.
+     * @param {ICustomVisualization[]} insightsApps - Insights apps available in homepage.
      * @returns {SuggestedApp[]} The list of suggested apps.
      */
-    _generateApps: function _generateApps(rawApps, allVisualizations, homePageVisualizations) {
+    _generateApps: function _generateApps(rawApps, allVisualizations, favoriteApps, insightsApps) {
       return rawApps.map(app => {
         const vizData = allVisualizations.find(viz => viz.vizId === app.chipID);
-        const addedToHomePage = homePageVisualizations.some(viz => viz.visualization?.vizId === app.chipID);
+        const addedToApps = favoriteApps.some(viz => viz.visualization?.vizId === app.chipID);
+        const addedToInsights = insightsApps.some(viz => viz.visualization?.vizId === app.chipID);
+        const tileConfig = this.parseTileConfiguration(app.configuration);
         return {
           title: app.title,
           chipID: app.chipID,
@@ -708,10 +794,12 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
           description: app.appDescription,
           icon: app.iconUrl,
           vizData,
-          addedToHomePage,
+          addedToApps,
+          addedToInsights,
           isStaticApp: app.tileType === TileType.Static,
-          status: this.getAppStatusTexts(app.configuration, addedToHomePage),
-          url: vizData?.targetURL || ""
+          url: vizData?.targetURL || "",
+          isDeprecated: (tileConfig?.display_info_text || "").toLowerCase() === Constants.DeprecatedInfoText,
+          selectedView: app.tileType === TileType.Static ? TileType.Static : TileType.Dynamic
         };
       });
     },
@@ -724,7 +812,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
      */
     isValidQuery: function _isValidQuery(query = "") {
       query = query?.trim();
-      return query.length >= Constants.MinQueryLength && query.length <= Constants.MaxDescriptionLength;
+      return query.length >= Constants.MinQueryLength && query.length <= Constants.MaxQueryLength;
     },
     /**
      * Fetches all available visualizations for the user.
@@ -736,10 +824,10 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     fetchAllAvailableVisualizations: function _fetchAllAvailableVisualizations() {
       try {
         const _this4 = this;
-        function _temp7() {
+        function _temp8() {
           return _this4.allAvailableVisualizations;
         }
-        const _temp6 = function () {
+        const _temp7 = function () {
           if (!_this4.allAvailableVisualizations) {
             return Promise.resolve(Container.getServiceAsync("SearchableContent")).then(function (searchableContentService) {
               return Promise.resolve(searchableContentService.getApps({
@@ -752,7 +840,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
             });
           }
         }();
-        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
+        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -808,14 +896,14 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
               UserInput: query
             })
           })).then(function (response) {
-            let _exit = false;
-            function _temp9(_result2) {
-              return _exit ? _result2 : Promise.resolve(response.json()).then(function (_response$json2) {
+            let _exit2 = false;
+            function _temp0(_result2) {
+              return _exit2 ? _result2 : Promise.resolve(response.json()).then(function (_response$json2) {
                 const queryResult = _response$json2;
                 return queryResult.value || [];
               });
             }
-            const _temp8 = function () {
+            const _temp9 = function () {
               if (!response.ok) {
                 return Promise.resolve(response.json()).then(function (_response$json) {
                   const errorResponse = _response$json;
@@ -824,71 +912,13 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
               }
             }();
             // handle error responses
-            return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
+            return _temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9);
           });
         });
       } catch (e) {
         return Promise.reject(e);
       }
     },
-    /**
-     * Retrieves status texts for an app based on its configuration and homepage status.
-     *
-     * @private
-     * @param {string} configuration - The app's configuration string.
-     * @param {boolean} addedToHomePage - Indicates if the app is already added to the homepage.
-     * @returns {string[]} An array of status texts for the app.
-     */
-    getAppStatusTexts: function _getAppStatusTexts(configuration, addedToHomePage) {
-      let statusTexts = [];
-      if (configuration) {
-        try {
-          const parsedConfig = JSON.parse(configuration);
-          const tileConfig = JSON.parse(parsedConfig?.tileConfiguration);
-          const infoText = (tileConfig?.display_info_text || "").toLowerCase();
-          if (infoText === Constants.DeprecatedInfoText) {
-            statusTexts.push(this._i18nBundle.getText("deprecatedApp"));
-          }
-        } catch (error) {
-          Log.warning(error.message);
-        }
-      }
-      if (addedToHomePage) {
-        statusTexts.push(this._i18nBundle.getText("alreadyAddedApp"));
-      }
-      return statusTexts;
-    },
-    /**
-     * Generates status text controls for the provided status texts.
-     *
-     * @private
-     * @param {string} id - The id of the list item.
-     * @param {string[]} stausTexts - The list of status texts.
-     * @returns {Text[]} An array of Text controls with applied styles.
-     */
-    _generateStatusTexts: function _generateStatusTexts(id, stausTexts) {
-      return stausTexts.map((status, index) => {
-        return new Text(recycleId(`${id}-statusText-${index}`), {
-          text: status
-        }).addStyleClass(this.applyStatusClass(status));
-      });
-    },
-    /**
-     * Applies a CSS class to the status text based on its type.
-     *
-     * @private
-     * @param {string} status - The status text to classify.
-     * @returns {string} The CSS class for the status text.
-     */
-    applyStatusClass: function _applyStatusClass(status) {
-      if (status === this._i18nBundle.getText("alreadyAddedApp")) {
-        return "addedAppStatusText";
-      } else if (status === this._i18nBundle.getText("deprecatedApp")) {
-        return "deprecatedAppStatusText";
-      } else {
-        return "";
-      }
-    },
     /**
      * Handles the "Add Apps" button press event to add selected apps to favorites.
      *
@@ -898,9 +928,9 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     onPressAddApps: function _onPressAddApps() {
       try {
         const _this6 = this;
-        function _temp13() {
-          function _temp11() {
-            function _temp1() {
+        function _temp14() {
+          function _temp12() {
+            function _temp10() {
               _this6.getParent()?.close();
               if (userSelectedApps.length > 1) {
                 MessageToast.show(_this6._i18nBundle.getText("contentAddedToMyhome"));
@@ -912,31 +942,31 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
               }
               _this6.resetPanel();
             }
-            const _temp0 = function () {
+            const _temp1 = function () {
               if (dynamicAppsPresent) {
                 return Promise.resolve(_this6.refreshInsightsApps()).then(function () {});
               }
             }();
-            return _temp0 && _temp0.then ? _temp0.then(_temp1) : _temp1(_temp0);
+            return _temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1);
           }
-          const _temp10 = function () {
+          const _temp11 = function () {
             if (staticAppsPresent) {
               return Promise.resolve(_this6.refreshFavoriteApps()).then(function () {});
             }
           }();
-          return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
+          return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
         }
         triggerPXIntegration("addAppsButton");
         const userSelectedApps = _this6.model.getProperty("/userSelectedApps");
         let staticAppsPresent = false;
         let dynamicAppsPresent = false;
-        const _temp12 = _forOf(userSelectedApps, function (app) {
-          const isStaticApp = app.getBindingContext()?.getProperty("isStaticApp");
+        const _temp13 = _forOf(userSelectedApps, function (app) {
+          const isStaticApp = app.getBindingContext()?.getProperty("selectedView") === TileType.Static;
           if (isStaticApp) staticAppsPresent = true;else dynamicAppsPresent = true;
           const vizId = app.getBindingContext()?.getProperty("chipID");
           return Promise.resolve(_this6.appManagerInstance.addVisualization(vizId, isStaticApp ? undefined : MYINSIGHT_SECTION_ID)).then(function () {});
         });
-        return Promise.resolve(_temp12 && _temp12.then ? _temp12.then(_temp13) : _temp13(_temp12));
+        return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -983,16 +1013,16 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       }
     },
     /**
-     * Retrieves the InsightsContainer instance from the parent layout.
+     * Retrieves the TilesContainer instance from the parent layout.
      *
      * @private
-     * @returns {InsightsContainer | undefined} The AppsContainer instance or undefined if not found.
+     * @returns {TilesContainer | undefined} The AppsContainer instance or undefined if not found.
      */
-    getInsightsContainer: function _getInsightsContainer() {
-      return this.getLayout()?.getItems().find(container => container instanceof InsightsContainer);
+    getTilesContainer: function _getTilesContainer() {
+      return this.getLayout()?.getItems().find(container => container instanceof TilesContainer);
     },
     /**
-     * Refreshes the Insights tiles panel in the InsightsContainer.
+     * Refreshes the Insights tiles panel in the TilesContainer.
      *
      * @private
      * @async
@@ -1000,7 +1030,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
     refreshInsightsApps: function _refreshInsightsApps() {
       try {
         const _this8 = this;
-        return Promise.resolve(_this8.getInsightsContainer()?.refreshData("tiles")).then(function () {});
+        return Promise.resolve(_this8.getTilesContainer()?.refreshData("tiles")).then(function () {});
       } catch (e) {
         return Promise.reject(e);
       }
@@ -1016,8 +1046,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       const selected = event.getParameter("selected");
       if (!selected) this.userSelectedApps.delete(listItem);else {
         const context = listItem.getBindingContext();
-        const addedToHomePage = context?.getProperty("addedToHomePage");
-        if (!addedToHomePage) this.userSelectedApps.add(listItem);
+        if (context && !this.isAppAlreadyAdded(context)) this.userSelectedApps.add(listItem);
       }
       this.model.setProperty("/userSelectedApps", Array.from(this.userSelectedApps));
     },
@@ -1062,7 +1091,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       if (query.length !== 0 && query.length < Constants.MinQueryLength) {
         textArea.setValueState(ValueState.Information);
         textArea.setValueStateText(this._i18nBundle.getText("minLengthRequired"));
-      } else if (query.length > Constants.MaxDescriptionLength) {
+      } else if (query.length > Constants.MaxQueryLength) {
         textArea.setValueState(ValueState.Warning);
         textArea.setValueStateText(this._i18nBundle.getText("maxLengthExceeded"));
       } else {
@@ -1104,6 +1133,73 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
       MessageToast.show(this._i18nBundle.getText("feedBackSent"), {
         width: "20em"
       });
+    },
+    /**
+     * Creates the action to change view type (App / Tile) for suggested app.
+     *
+     * @private
+     * @param {string} id - The unique ID for the container.
+     * @returns {HBox} The app view action container.
+     */
+    getAppViewTypeAction: function _getAppViewTypeAction(id) {
+      const appViewToggleButton = new SegmentedButton(recycleId(`${id}-app-addAs-segmentedBtn`), {
+        selectedKey: "{selectedView}",
+        items: [new SegmentedButtonItem(recycleId(`${id}-addAs-app`), {
+          key: TileType.Static,
+          text: this._i18nBundle.getText("addAsApp")
+        }), new SegmentedButtonItem(recycleId(`${id}-addAs-tile`), {
+          key: TileType.Dynamic,
+          text: this._i18nBundle.getText("addAsTile")
+        })]
+      });
+      const appViewLabel = new Label(recycleId(`${id}-addAsLabel`), {
+        text: this._i18nBundle.getText("addAs"),
+        showColon: true
+      });
+      try {
+        appViewToggleButton.setProperty("contentMode", "ContentFit");
+        appViewLabel.setWidth("100%");
+      } catch (error) {
+        Log.error(error instanceof Error ? error.message : error);
+      }
+      return new HBox(recycleId(`${id}-app-addAs-container`), {
+        renderType: FlexRendertype.Bare,
+        alignItems: FlexAlignItems.Center,
+        gap: "0.25rem",
+        items: [appViewLabel, appViewToggleButton]
+      });
+    },
+    /**
+     * Determines if an app is already added to the appropriate section based on its type and selected view.
+     * For static apps or apps with Static view selected, checks if added to favorites apps section.
+     * For dynamic apps with Dynamic view selected, checks if added to insights section.
+     *
+     * @private
+     * @param {Context} context - The binding context for the app to check.
+     * @returns {boolean} True if the app is already added to the corresponding section, false otherwise.
+     */
+    isAppAlreadyAdded: function _isAppAlreadyAdded(context) {
+      const selectedAppView = context.getProperty("selectedView");
+      return selectedAppView === TileType.Static ? context.getProperty("addedToApps") : context.getProperty("addedToInsights");
+    },
+    /**
+     * Parses the tile configuration string from raw app configuration.
+     *
+     * @private
+     * @param {string} configuration - The raw app configuration string containing tile settings.
+     * @returns {TileConfig | null} The parsed tile configuration object or null if parsing fails.
+     */
+    parseTileConfiguration: function _parseTileConfiguration(configuration) {
+      if (configuration) {
+        try {
+          const parsedConfig = JSON.parse(configuration);
+          const tileConfig = JSON.parse(parsedConfig?.tileConfiguration);
+          return tileConfig;
+        } catch (error) {
+          Log.warning(error.message);
+        }
+      }
+      return null;
     }
   });
   return AppsAdditionPanel;