@sapui5/sap.cux.home 1.142.0 → 1.143.0

package/src/sap/cux/home/AppsAdditionPanel.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/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/Switch", "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", "./TilesPanel", "./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, Switch, Title, VBox, Fragment, sap_ui_core_library, ChangeReason, JSONModel, ResourceModel, Sorter, Container, __AppsContainer, __BaseSettingsPanel, __FavAppPanel, __TilesContainer, ___TilesPanel, __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,17 +187,25 @@ 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 DisplayFormat = ___TilesPanel["DisplayFormat"];
   const AppManager = _interopRequireDefault(__AppManager);
+  const _isSmartBusinessTile = __AppManager["_isSmartBusinessTile"];
   const AI_APP_FINDER_API = ___utils_Constants["AI_APP_FINDER_API"];
   const AI_APP_FINDER_BASE_URL = ___utils_Constants["AI_APP_FINDER_BASE_URL"];
   const CONTENT_ADDITION_PANEL_TYPES = ___utils_Constants["CONTENT_ADDITION_PANEL_TYPES"];
   const DEFAULT_APP_ICON = ___utils_Constants["DEFAULT_APP_ICON"];
   const FEATURE_TOGGLES = ___utils_Constants["FEATURE_TOGGLES"];
   const FESR_IDS = ___utils_Constants["FESR_IDS"];
+  const MYHOME_PAGE_ID = ___utils_Constants["MYHOME_PAGE_ID"];
   const MYINSIGHT_SECTION_ID = ___utils_Constants["MYINSIGHT_SECTION_ID"];
   const recycleId = ___utils_DataFormatUtils["recycleId"];
   const isNavigationSupportedForFeature = ___utils_FeatureUtils["isNavigationSupportedForFeature"];
@@ -207,7 +215,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 +231,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 || {});
   /**
@@ -320,7 +330,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
           _this.vizInstantiationService = _Container$getService;
           //load ui fragment
           return Promise.resolve(Fragment.load({
-            id: `${_this.getId()}-content`,
+            id: recycleId(`${_this.getId()}-content`),
             name: "sap.cux.home.utils.fragment.appsAdditionContent",
             controller: _this
           })).then(function (_Fragment$load) {
@@ -368,13 +378,12 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
               path: "/suggestedApps",
               factory: _this._generateListItem.bind(_this),
               sorter: new Sorter({
-                path: "status",
+                path: "",
                 comparator: (firstApp, secondApp) => {
-                  const getPriority = statusArray => {
-                    if (statusArray.length === 0) return 0; // Empty array has highest priority
-
-                    const hasAlreadyAdded = statusArray.includes(_this._i18nBundle.getText("alreadyAddedApp"));
-                    const hasDeprecated = statusArray.includes(_this._i18nBundle.getText("deprecatedApp"));
+                  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"
@@ -409,22 +418,28 @@ 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)]
+          renderType: FlexRendertype.Bare,
+          direction: FlexDirection.Row,
+          gap: "1rem",
+          items: [this._getAppDetailsContainer(id, context, isEnglishLanguage), this._getAppPreviewContainer(id, context)]
         }).addStyleClass("sapUiSmallMargin")]
       });
-
-      //bind associated checkbox to disable it when the app is already added to home page
-      listItem.getMultiSelectControl(true).setEnabled(!context.getProperty("addedToHomePage"));
       return listItem;
     },
     /**
@@ -437,33 +452,60 @@ 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
+      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' || ${isStaticApp} }",
+        url: context.getProperty("url"),
+        press: event => {
+          this._persistDialog(this.getParent());
+          URLHelper.redirect(event.getSource()?.getUrl(), false);
+        }
+      }).addStyleClass("suggestedTile"));
+      if (!context.getProperty("isStaticApp")) {
         const vizData = context.getProperty("vizData");
-        const instance = this.vizInstantiationService.instantiateVisualization(vizData);
-        instance?.setActive(true);
-        instance?.attachPress(() => this._persistDialog(this.getParent()));
-        container.addItem(instance);
+        const supportedDisplayFormatVizs = [{
+          ...vizData,
+          displayFormatHint: DisplayFormat.Standard
+        }];
+        if (this.isWideTileSupported(context)) {
+          supportedDisplayFormatVizs.push({
+            ...vizData,
+            displayFormatHint: DisplayFormat.StandardWide
+          });
+        }
+        supportedDisplayFormatVizs.forEach(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: ["selectedDisplayFormat", "selectedView"],
+            formatter: (selectedDisplayFormat, selectedView) => {
+              if (selectedView && selectedView === TileType.Static) {
+                return false;
+              }
+              return vizData.displayFormatHint === DisplayFormat.StandardWide ? selectedDisplayFormat === DisplayFormat.StandardWide : selectedDisplayFormat !== DisplayFormat.StandardWide;
+            }
+          });
+          container.addItem(vizInstance);
+        });
       }
-      return container;
+      return container.addStyleClass("suggestedAppPreviewContainer");
     },
     /**
      * Creates a details container for the suggested app.
@@ -477,23 +519,52 @@ 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",
+        renderType: FlexRendertype.Bare,
         gap: "0.5rem",
-        items: [new ExpandableText(recycleId(`${id}-description`), {
+        layoutData: new FlexItemData({
+          growFactor: 1
+        }),
+        items: [new HBox(recycleId(`${id}-title-container`), {
+          gap: "1rem",
+          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
+        }),
+        // app actions container
+        new HBox(recycleId(`${id}-app-actions-container`), {
+          renderType: FlexRendertype.Bare,
+          gap: "1.5rem",
+          visible: !context.getProperty("isStaticApp"),
+          items: [this.getAppViewTypeAction(id), this.getDisplayFormatAction(id, context)]
         }), new HBox(recycleId(`${id}-app-status-container`), {
-          renderType: "Bare",
-          visible: context.getProperty("status").length > 0,
+          renderType: FlexRendertype.Bare,
+          visible: {
+            parts: ["selectedView"],
+            formatter: () => {
+              return this.isAppAlreadyAdded(context);
+            }
+          },
           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")]
-        })]
-      }).addStyleClass(isEnglishLanguage && context.getProperty("isStaticApp") ? "sapUiSmallMarginTop" : "sapUiSmallMarginBegin");
+          }), new ObjectStatus(recycleId(`${id}-alreadyAddedStatus`), {
+            text: "{= (${isStaticApp} || ${selectedView} === 'STATIC') ? ${i18n>alreadyAddedApp} : ${i18n>alreadyAddedTile} }",
+            icon: "sap-icon://sys-enter-2",
+            state: "Success"
+          }).addStyleClass("sapUiTinyMarginBegin")]
+        }).addStyleClass("sapUiTinyMarginTop")]
+      });
     },
     /**
      * Checks if the Apps Addition Panel is supported. Internally, it checks if the
@@ -572,14 +643,15 @@ 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="54" width="59%" height="48" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="110" width="13%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="600" y="40" 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="54" width="58%" height="48" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="110" width="13%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="675" y="16" width="148" height="148" rx="16" fill="url(#loadingShimmer)"/>
 			</svg>`];
     },
     /**
@@ -607,6 +679,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.
      *
@@ -630,7 +716,7 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
                     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);
@@ -694,13 +780,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 +797,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 +815,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.
@@ -831,64 +922,6 @@ sap.ui.define(["sap/base/i18n/Localization", "sap/base/Log", "sap/m/Button", "sa
         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 +931,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 +945,42 @@ 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("isStaticApp") || app.getBindingContext()?.getProperty("selectedView") === TileType.Static;
+          const displayFormatHint = app.getBindingContext()?.getProperty("vizData")?.displayFormatHint;
+          const selectedDisplayFormat = app.getBindingContext()?.getProperty("selectedDisplayFormat");
           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(_this6.appManagerInstance.addVisualization(vizId, isStaticApp ? undefined : MYINSIGHT_SECTION_ID)).then(function () {
+            const _temp0 = function () {
+              if (!isStaticApp && selectedDisplayFormat && displayFormatHint !== selectedDisplayFormat) {
+                // TODO: Check if addVisualization method in SpaceContent service can expose 'displayFormat' parameter to avoid this extra call
+                // since the internal Pages service method already supports it
+                return Promise.resolve(_this6.updateDisplayFormat(vizId, selectedDisplayFormat)).then(function () {});
+              }
+            }();
+            if (_temp0 && _temp0.then) return _temp0.then(function () {});
+          }); // for dynamic app, if display format is changed, update it
         });
-        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 +1027,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 +1044,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 +1060,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 +1105,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 +1147,161 @@ 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")
+        })]
+      }).addStyleClass("sapUiTinyMarginBegin");
+      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,
+        items: [appViewLabel, appViewToggleButton]
+      });
+    },
+    /**
+     * Creates the action to change display format (standard / wide) for suggested tile.
+     *
+     * @private
+     * @param {string} id - The unique ID for the container.
+     * @param {Context} context - The binding context for the app.
+     * @returns {HBox} The display format action container.
+     */
+    getDisplayFormatAction: function _getDisplayFormatAction(id, context) {
+      return new HBox(recycleId(`${id}-app-displayFormatSwitch-container`), {
+        renderType: FlexRendertype.Bare,
+        alignItems: FlexAlignItems.Center,
+        visible: {
+          parts: ["selectedView"],
+          formatter: selectedView => {
+            return selectedView !== TileType.Static && this.isWideTileSupported(context);
+          }
+        },
+        items: [new Label(recycleId(`${id}-displayFormatSwitchLabel`), {
+          text: this._i18nBundle.getText("wide"),
+          showColon: true
+        }), new Switch({
+          id: `${id}-displayFormatSwitch`,
+          state: context.getProperty("vizData")?.displayFormatHint !== DisplayFormat.Standard,
+          customTextOn: " ",
+          customTextOff: " ",
+          change: event => this.toggleDisplayFormat(event, context)
+        }).addStyleClass("sapUiTinyMarginBegin")]
+      });
+    },
+    /**
+     * Checks if the visualization supports wide tile conversion.
+     *
+     * @private
+     * @param {Context} context - The binding context for the app.
+     * @returns {boolean} True if wide display format is supported, false otherwise.
+     */
+    isWideTileSupported: function _isWideTileSupported(context) {
+      const vizData = context.getProperty("vizData");
+      const supportedDisplayFormats = vizData?.supportedDisplayFormats || [];
+      return vizData && (vizData.indicatorDataSource || _isSmartBusinessTile(vizData)) && supportedDisplayFormats.includes(DisplayFormat.Standard) && supportedDisplayFormats.includes(DisplayFormat.StandardWide);
+    },
+    /**
+     * Handler to switch between standard and wide format for tile.
+     *
+     * @private
+     * @param {Switch$ChangeEvent} event - The switch change event.
+     * @param {Context} context - The binding context for the app being modified.
+     * @returns {void}
+     */
+    toggleDisplayFormat: function _toggleDisplayFormat(event, context) {
+      const switchToWideTile = event.getParameter("state");
+      const displayFormatHint = switchToWideTile ? DisplayFormat.StandardWide : DisplayFormat.Standard;
+      const path = context.getPath();
+      this.model.setProperty(`${path}/selectedDisplayFormat`, displayFormatHint);
+    },
+    /**
+     * Updates the display format of a visualization in the insights section.
+     *
+     * @private
+     * @param {string} vizId - Id of the visualization for which display format has to be updated.
+     * @param {DisplayFormat} displayFormatHint - The new display format to apply.
+     * @returns {Promise<void>} A promise that resolves when the display format is updated.
+     */
+    updateDisplayFormat: function _updateDisplayFormat(vizId, displayFormatHint) {
+      try {
+        const _this9 = this;
+        return Promise.resolve(_this9.appManagerInstance.fetchInsightApps(true, _this9._i18nBundle.getText("insights"))).then(function (insightsApps) {
+          const viz = insightsApps.find(insightApp => insightApp.visualization?.vizId === vizId);
+          const _temp15 = function () {
+            if (viz) {
+              const updateConfig = {
+                pageId: MYHOME_PAGE_ID,
+                sourceSectionIndex: viz.persConfig?.sectionIndex,
+                sourceVisualizationIndex: viz.persConfig?.visualizationIndex,
+                oVisualizationData: {
+                  displayFormatHint
+                }
+              };
+              return Promise.resolve(_this9.appManagerInstance.updateVisualizations(updateConfig)).then(function () {});
+            }
+          }();
+          if (_temp15 && _temp15.then) return _temp15.then(function () {});
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    /**
+     * 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 isStaticApp = context.getProperty("isStaticApp");
+      const selectedAppView = context.getProperty("selectedView");
+      return isStaticApp || 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;