@sapui5/sap.cux.home 1.142.0 → 1.143.0

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

@@ -9,19 +9,25 @@ import Button from "sap/m/Button";
 import CustomListItem from "sap/m/CustomListItem";
 import ExpandableText from "sap/m/ExpandableText";
 import FlexBox from "sap/m/FlexBox";
+import FlexItemData from "sap/m/FlexItemData";
 import GenericTile, { GenericTile$PressEvent } from "sap/m/GenericTile";
 import HBox from "sap/m/HBox";
+import IllustratedMessage from "sap/m/IllustratedMessage";
 import Label from "sap/m/Label";
-import { ButtonType, URLHelper } from "sap/m/library";
+import { ButtonType, FlexAlignItems, FlexDirection, FlexJustifyContent, FlexRendertype, URLHelper } from "sap/m/library";
 import List from "sap/m/List";
 import { ListBase$SelectionChangeEvent } from "sap/m/ListBase";
 import MessageToast from "sap/m/MessageToast";
-import Text from "sap/m/Text";
+import ObjectStatus from "sap/m/ObjectStatus";
+import SegmentedButton from "sap/m/SegmentedButton";
+import SegmentedButtonItem from "sap/m/SegmentedButtonItem";
+import Switch, { Switch$ChangeEvent } from "sap/m/Switch";
 import TextArea, { TextArea$LiveChangeEvent } from "sap/m/TextArea";
+import Title from "sap/m/Title";
 import VBox from "sap/m/VBox";
 import Control from "sap/ui/core/Control";
 import Fragment from "sap/ui/core/Fragment";
-import { ValueState } from "sap/ui/core/library";
+import { TitleLevel, ValueState } from "sap/ui/core/library";
 import ChangeReason from "sap/ui/model/ChangeReason";
 import Context from "sap/ui/model/Context";
 import JSONModel from "sap/ui/model/json/JSONModel";
@@ -36,9 +42,10 @@ import BaseLayout from "./BaseLayout";
 import BaseSettingsPanel from "./BaseSettingsPanel";
 import ContentAdditionDialog from "./ContentAdditionDialog";
 import FavAppPanel from "./FavAppPanel";
-import InsightsContainer from "./InsightsContainer";
 import { ICustomVisualization, ICustomVizInstance, IVisualization } from "./interface/AppsInterface";
-import AppManager from "./utils/AppManager";
+import TilesContainer from "./TilesContainer";
+import { DisplayFormat } from "./TilesPanel";
+import AppManager, { _isSmartBusinessTile } from "./utils/AppManager";
 import {
 	AI_APP_FINDER_API,
 	AI_APP_FINDER_BASE_URL,
@@ -46,6 +53,7 @@ import {
 	DEFAULT_APP_ICON,
 	FEATURE_TOGGLES,
 	FESR_IDS,
+	MYHOME_PAGE_ID,
 	MYINSIGHT_SECTION_ID
 } from "./utils/Constants";
 import { recycleId } from "./utils/DataFormatUtils";
@@ -56,7 +64,8 @@ import { triggerPXIntegration } from "./utils/PXFeedback";
 const Constants = {
 	DeprecatedInfoText: "deprecated",
 	MinQueryLength: 2,
-	MaxDescriptionLength: 2000
+	MaxQueryLength: 2000,
+	MaxDescriptionLength: 300
 };
 
 enum SearchStatus {
@@ -71,7 +80,8 @@ enum ErrorType {
 }
 
 enum TileType {
-	Static = "STATIC"
+	Static = "STATIC",
+	Dynamic = "DYNAMIC"
 }
 
 interface RawAppData {
@@ -83,16 +93,17 @@ interface RawAppData {
 	iconUrl: string;
 	configuration: string;
 }
-interface SuggestedApp {
+export interface SuggestedApp {
 	icon: string;
 	title: string;
 	chipID: string;
-	status: string[];
 	subTitle: string;
 	description: string;
 	isStaticApp: boolean;
-	addedToHomePage: boolean;
+	addedToApps?: boolean;
+	addedToInsights?: boolean;
 	vizData?: IVisualization;
+	isDeprecated?: boolean;
 }
 
 interface QueryResponse {
@@ -203,7 +214,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 
 		//load ui fragment
 		const panelContent = (await Fragment.load({
-			id: `${this.getId()}-content`,
+			id: recycleId(`${this.getId()}-content`),
 			name: "sap.cux.home.utils.fragment.appsAdditionContent",
 			controller: this
 		})) as Control;
@@ -252,14 +263,13 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			path: "/suggestedApps",
 			factory: this._generateListItem.bind(this),
 			sorter: new Sorter({
-				path: "status",
-				comparator: (firstApp: string[], secondApp: string[]) => {
-					const getPriority = (statusArray: string[]) => {
-						if (statusArray.length === 0) return 0; // Empty array has highest priority
-
-						const hasAlreadyAdded = statusArray.includes(this._i18nBundle.getText("alreadyAddedApp") as string);
-						const hasDeprecated = statusArray.includes(this._i18nBundle.getText("deprecatedApp") as string);
+				path: "",
+				comparator: (firstApp: SuggestedApp, secondApp: SuggestedApp) => {
+					const getPriority = (app: SuggestedApp) => {
+						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"
@@ -296,25 +306,31 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 * @returns {CustomListItem} The generated list item control.
 	 */
 	private _generateListItem(id: string, context: Context): CustomListItem {
-		const isStaticApp = context.getProperty("isStaticApp") as boolean;
 		const langTag = Localization.getLanguageTag();
 		const currentLanguage = langTag.language.toLowerCase();
 		const isEnglishLanguage = currentLanguage.startsWith("en");
 		const listItem = new CustomListItem(id, {
-			selected: context.getProperty("addedToHomePage") as boolean,
+			//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;
 	}
 
@@ -328,37 +344,69 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 */
 	private _getAppPreviewContainer(id: string, context: Context): HBox {
 		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
 		});
+		container.addItem(
+			new GenericTile(recycleId(`${id}-staticApp`), {
+				mode: "IconMode",
+				frameType: "TwoByHalf",
+				width: "19rem",
+				header: context.getProperty("title") as string,
+				subheader: context.getProperty("subTitle") as string,
+				tileIcon: (context.getProperty("icon") as string) || DEFAULT_APP_ICON,
+				visible: "{= ${selectedView} === 'STATIC' || ${isStaticApp} }",
+				url: context.getProperty("url") as string,
+				press: (event: GenericTile$PressEvent) => {
+					this._persistDialog(this.getParent() as ContentAdditionDialog);
+					URLHelper.redirect(event.getSource()?.getUrl(), false);
+				}
+			}).addStyleClass("suggestedTile")
+		);
 
-		if (context.getProperty("isStaticApp") as boolean) {
-			// create generic tile for static app
-			container.addItem(
-				new GenericTile(recycleId(`${id}-staticApp`), {
-					mode: "IconMode",
-					frameType: "TwoByHalf",
-					width: "19rem",
-					header: context.getProperty("title") as string,
-					subheader: context.getProperty("subTitle") as string,
-					tileIcon: (context.getProperty("icon") as string) || DEFAULT_APP_ICON,
-					visible: context.getProperty("isStaticApp") as boolean,
-					url: context.getProperty("url") as string,
-					press: (event: GenericTile$PressEvent) => {
-						this._persistDialog(this.getParent() as ContentAdditionDialog);
-						URLHelper.redirect(event.getSource()?.getUrl(), false);
+		if (!(context.getProperty("isStaticApp") as boolean)) {
+			const vizData = context.getProperty("vizData") as IVisualization;
+			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) as ICustomVizInstance;
+				vizInstance?.setActive(true);
+				vizInstance?.setProperty("sizeBehavior", "Small", true);
+				vizInstance?.attachPress(() => this._persistDialog(this.getParent() as ContentAdditionDialog));
+				vizInstance.bindProperty("visible", {
+					parts: ["selectedDisplayFormat", "selectedView"],
+					formatter: (selectedDisplayFormat: DisplayFormat, selectedView: TileType) => {
+						if (selectedView && selectedView === TileType.Static) {
+							return false;
+						}
+						return vizData.displayFormatHint === DisplayFormat.StandardWide
+							? selectedDisplayFormat === DisplayFormat.StandardWide
+							: selectedDisplayFormat !== DisplayFormat.StandardWide;
 					}
-				}).addStyleClass("suggestedTile")
-			);
-		} else {
-			// create custom visualization for other apps
-			const vizData = context.getProperty("vizData") as ICustomVisualization;
-			const instance = this.vizInstantiationService.instantiateVisualization(vizData) as ICustomVizInstance;
-			instance?.setActive(true);
-			instance?.attachPress(() => this._persistDialog(this.getParent() as ContentAdditionDialog));
-			container.addItem(instance);
+				});
+				container.addItem(vizInstance);
+			});
 		}
 
-		return container;
+		return container.addStyleClass("suggestedAppPreviewContainer");
 	}
 
 	/**
@@ -375,29 +423,62 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			? (context.getProperty("description") as string)
 			: (this._i18nBundle.getText("NoDescriptionAvailable") as string);
 		return new VBox(recycleId(`${id}-app-details-container`), {
-			renderType: "Bare",
+			renderType: FlexRendertype.Bare,
 			gap: "0.5rem",
+			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") as string,
+							titleStyle: TitleLevel.H6
+						}),
+						new ObjectStatus(recycleId(`${id}-deprecatedApp`), {
+							text: this._i18nBundle.getText("deprecatedApp") as string,
+							icon: "sap-icon://alert",
+							state: ValueState.Warning,
+							visible: context.getProperty("isDeprecated") as boolean
+						})
+					]
+				}),
 				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") as string[]).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") as string[])
-						}).addStyleClass("sapUiTinyMarginBegin statusTextsContainer")
+						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")
 			]
-		}).addStyleClass(isEnglishLanguage && context.getProperty("isStaticApp") ? "sapUiSmallMarginTop" : "sapUiSmallMarginBegin");
+		});
 	}
 
 	/**
@@ -468,15 +549,16 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			`<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>`
 		];
 	}
@@ -521,6 +603,21 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		this.userSelectedApps?.clear();
 	}
 
+	public setIllustrationSize(): void {
+		const containerDom = (Fragment.byId(`${this.getId()}-content`, "container") as VBox)?.getDomRef() as HTMLElement;
+		if (containerDom) {
+			const clientHeight = containerDom.clientHeight;
+			const illustratedMessage = Fragment.byId(`${this.getId()}-content`, "beforeSearch") as IllustratedMessage;
+			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.
 	 *
@@ -544,7 +641,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 				const insightsApps = await this.appManagerInstance.fetchInsightApps(true, this._i18nBundle.getText("insights") as string);
 
 				// generate suggested apps
-				const apps = this._generateApps(rawApps, allVisualizations, [...favoriteApps, ...insightsApps]);
+				const apps = this._generateApps(rawApps, allVisualizations, favoriteApps, insightsApps);
 				const suggestedApps = await this._filterUnsupportedApps(apps);
 
 				if (suggestedApps.length === 0 && !this.model.getProperty("/hasError")) {
@@ -590,17 +687,21 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 * @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.
 	 */
 	private _generateApps(
 		rawApps: RawAppData[],
 		allVisualizations: IVisualization[],
-		homePageVisualizations: ICustomVisualization[]
+		favoriteApps: ICustomVisualization[],
+		insightsApps: ICustomVisualization[]
 	): SuggestedApp[] {
 		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,
@@ -608,10 +709,12 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 				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
 			};
 		}) as SuggestedApp[];
 	}
@@ -625,7 +728,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 */
 	private isValidQuery(query: string = ""): boolean {
 		query = query?.trim();
-		return query.length >= Constants.MinQueryLength && query.length <= Constants.MaxDescriptionLength;
+		return query.length >= Constants.MinQueryLength && query.length <= Constants.MaxQueryLength;
 	}
 
 	/**
@@ -695,70 +798,6 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		return queryResult.value || [];
 	}
 
-	/**
-	 * 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.
-	 */
-	private getAppStatusTexts(configuration: string, addedToHomePage: boolean): string[] {
-		let statusTexts = [];
-
-		if (configuration) {
-			try {
-				const parsedConfig = JSON.parse(configuration) as Configuration;
-				const tileConfig = JSON.parse(parsedConfig?.tileConfiguration) as TileConfig;
-				const infoText = (tileConfig?.display_info_text || "").toLowerCase();
-				if (infoText === Constants.DeprecatedInfoText) {
-					statusTexts.push(this._i18nBundle.getText("deprecatedApp") as string);
-				}
-			} catch (error: unknown) {
-				Log.warning((error as Error).message);
-			}
-		}
-
-		if (addedToHomePage) {
-			statusTexts.push(this._i18nBundle.getText("alreadyAddedApp") as string);
-		}
-
-		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.
-	 */
-	private _generateStatusTexts(id: string, stausTexts: string[]): Text[] {
-		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.
-	 */
-	public applyStatusClass(status: string): string {
-		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.
 	 *
@@ -772,12 +811,23 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		let dynamicAppsPresent = false;
 
 		for (const app of userSelectedApps) {
-			const isStaticApp = app.getBindingContext()?.getProperty("isStaticApp") as boolean;
+			const isStaticApp =
+				(app.getBindingContext()?.getProperty("isStaticApp") as boolean) ||
+				app.getBindingContext()?.getProperty("selectedView") === TileType.Static;
+			const displayFormatHint = (app.getBindingContext()?.getProperty("vizData") as IVisualization)
+				?.displayFormatHint as DisplayFormat;
+			const selectedDisplayFormat = app.getBindingContext()?.getProperty("selectedDisplayFormat") as DisplayFormat;
 			if (isStaticApp) staticAppsPresent = true;
 			else dynamicAppsPresent = true;
 
 			const vizId = app.getBindingContext()?.getProperty("chipID") as string;
 			await this.appManagerInstance.addVisualization(vizId, isStaticApp ? undefined : MYINSIGHT_SECTION_ID);
+			// for dynamic app, if display format is changed, update it
+			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
+				await this.updateDisplayFormat(vizId, selectedDisplayFormat);
+			}
 		}
 
 		if (staticAppsPresent) {
@@ -845,25 +895,25 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	}
 
 	/**
-	 * 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.
 	 */
-	private getInsightsContainer(): InsightsContainer | undefined {
+	private getTilesContainer(): TilesContainer | undefined {
 		return this.getLayout()
 			?.getItems()
-			.find((container) => container instanceof InsightsContainer);
+			.find((container) => container instanceof TilesContainer);
 	}
 
 	/**
-	 * Refreshes the Insights tiles panel in the InsightsContainer.
+	 * Refreshes the Insights tiles panel in the TilesContainer.
 	 *
 	 * @private
 	 * @async
 	 */
 	private async refreshInsightsApps(): Promise<void> {
-		await this.getInsightsContainer()?.refreshData("tiles");
+		await this.getTilesContainer()?.refreshData("tiles");
 	}
 
 	/**
@@ -879,8 +929,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		if (!selected) this.userSelectedApps.delete(listItem);
 		else {
 			const context = listItem.getBindingContext();
-			const addedToHomePage = context?.getProperty("addedToHomePage") as boolean;
-			if (!addedToHomePage) this.userSelectedApps.add(listItem);
+			if (context && !this.isAppAlreadyAdded(context)) this.userSelectedApps.add(listItem);
 		}
 
 		this.model.setProperty("/userSelectedApps", Array.from(this.userSelectedApps));
@@ -930,7 +979,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		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 {
@@ -977,4 +1026,173 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			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.
+	 */
+	private getAppViewTypeAction(id: string): HBox {
+		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 as string));
+		}
+
+		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.
+	 */
+	private getDisplayFormatAction(id: string, context: Context): HBox {
+		return new HBox(recycleId(`${id}-app-displayFormatSwitch-container`), {
+			renderType: FlexRendertype.Bare,
+			alignItems: FlexAlignItems.Center,
+			visible: {
+				parts: ["selectedView"],
+				formatter: (selectedView: TileType) => {
+					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") as IVisualization)?.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.
+	 */
+	private isWideTileSupported(context: Context): boolean {
+		const vizData = context.getProperty("vizData") as IVisualization;
+		const supportedDisplayFormats = vizData?.supportedDisplayFormats || ([] as string[]);
+		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}
+	 */
+	private toggleDisplayFormat(event: Switch$ChangeEvent, context: Context): void {
+		const switchToWideTile = event.getParameter("state") as boolean;
+		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.
+	 */
+	private async updateDisplayFormat(vizId: string, displayFormatHint: DisplayFormat): Promise<void> {
+		const insightsApps = await this.appManagerInstance.fetchInsightApps(true, this._i18nBundle.getText("insights") as string);
+		const viz = insightsApps.find((insightApp) => insightApp.visualization?.vizId === vizId);
+		if (viz) {
+			const updateConfig = {
+				pageId: MYHOME_PAGE_ID,
+				sourceSectionIndex: viz.persConfig?.sectionIndex as number,
+				sourceVisualizationIndex: viz.persConfig?.visualizationIndex as number,
+				oVisualizationData: {
+					displayFormatHint
+				}
+			};
+			await this.appManagerInstance.updateVisualizations(updateConfig);
+		}
+	}
+
+	/**
+	 * 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.
+	 */
+	private isAppAlreadyAdded(context: Context): boolean {
+		const isStaticApp = context.getProperty("isStaticApp") as boolean;
+		const selectedAppView = context.getProperty("selectedView") as TileType;
+		return (
+			isStaticApp || selectedAppView === TileType.Static ? context.getProperty("addedToApps") : context.getProperty("addedToInsights")
+		) as boolean;
+	}
+
+	/**
+	 * 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.
+	 */
+	private parseTileConfiguration(configuration: string): TileConfig | null {
+		if (configuration) {
+			try {
+				const parsedConfig = JSON.parse(configuration) as Configuration;
+				const tileConfig = JSON.parse(parsedConfig?.tileConfiguration) as TileConfig;
+				return tileConfig;
+			} catch (error: unknown) {
+				Log.warning((error as Error).message);
+			}
+		}
+		return null;
+	}
 }