@sapui5/sap.ushell 1.131.0 → 1.132.0

package/src/main/js/sap/ushell/components/contentFinder/Component.js

@@ -2,7 +2,7 @@
 /**
  * @fileOverview ContentFinder Component
  *
- * @version 1.131.0
+ * @version 1.132.0
  */
 
 sap.ui.define([
@@ -36,92 +36,50 @@ sap.ui.define([
      * @property {string} widgetId The ID of the selected widget type
      */
 
-
-    /**
-     * The available navigation targets
-     */
-    var oNavigationTargets = {
-        widgetGallery: "widgetGallery",
-        appSearchTiles: "appSearch_tiles",
-        appSearchCards: "appSearch_cards"
-        // TODO: appSearch_mixed: "appSearch_cards"
-    };
-
-    var oNavigationTargetTypeMapping = {
-        appSearch_tiles: ["sap.ushell.StaticAppLauncher", "sap.ushell.DynamicAppLauncher"],
-        appSearch_cards: ["sap.card"]
-    };
-
-    var oInitialSelectionData = {
-        appSearch: {
-            visualizations: {
-                tiles: []
-            }
-        }
-    };
-
-    /**
-     * Initial data to be set to the ContentFinder model.
-     *
-     * @type {object}
-     */
-    var oInitialData = {
-        standalone: false, // If the ContentFinder is in standalone mode or not
-        navigationTargets: oNavigationTargets,
-
-        // The current/active navigation target within the ContentFinderDialog
-        activeNavigationTarget: oNavigationTargets.widgetGallery,
-        selectedCategoryId: undefined,
-        selectedCategoryTitle: undefined,
-
-        // A content finder in restricted mode shows no widget Gallery and starts directly with the appSearch.
-        // Additionally, no "Back" button is rendered, as the end user cannot navigate to the WidgetGallery.
-        restrictedMode: false,
-
-        personalizationEnabled: false,
-
-        widgetGallery: {
-            widgetGroups: []
-        },
-
-        appSearch: {
-            growingThreshold: 100,
-            visualizationsLoaded: false,
-            hasSelectables: true,
-            currentSelectedTreeNode: "",
-            searchTerm: "",
-            filteredAppCount: 0,
-            showSelectedPressed: false,
-            showLaunchButton: false,
-            visualizations: {
-                cards: [],
-                tiles: []
-            },
-            totalCount: 0,
-            originalRestrictedVisualizations: [],
-            restrictedVisualizations: [],
-            listView: false
-        },
-        categoryTree: [],
-        categoryTreeAvailable: false
-    };
-
     /**
      * Component of the ContentFinder view.
      *
      * @param {string} sId Component id.
      * @param {object} mSettings Optional map for component settings.
+     *
      * @class
      * @extends sap.ui.core.UIComponent
-     * @private
-     * @since 1.113.0
      * @alias sap.ushell.components.contentFinder.Component
+     * @since 1.113.0
+     * @private
      */
     return UIComponent.extend("sap.ushell.components.contentFinder.Component", /** @lends sap.ushell.components.contentFinder.Component.prototype */{
         metadata: {
             manifest: "json",
             library: "sap.ushell",
             interfaces: ["sap.ui.core.IAsyncContentCreation"],
+            properties: {
+                enablePersonalization: {
+                    type: "boolean",
+                    defaultValue: true,
+                    group: "Behavior"
+                },
+                noItemsInCatalogDescription: {
+                    type: "string",
+                    defaultValue: "",
+                    group: "Appearance"
+                },
+                showAppBoxFieldsPlaceholder: {
+                    type: "boolean",
+                    defaultValue: true,
+                    group: "Appearance"
+                },
+                showCategoryTreeWhenEmpty: {
+                    type: "boolean",
+                    defaultValue: true,
+                    group: "Appearance"
+                },
+                showApplicationLaunchButton: {
+                    type: "boolean",
+                    defaultValue: false,
+                    group: "Appearance"
+                }
+            },
             events: {
                 /**
                  * Fires when additional visualizations must be requested:
@@ -166,7 +124,7 @@ sap.ui.define([
                     }
                 },
                 /**
-                 * Fires when the Content Finder dialog is closed:
+                 * Fires when the Content Finder dialog is closed.
                  * @type {object}
                  * @since 1.113.0
                  * @private
@@ -175,7 +133,7 @@ sap.ui.define([
                     parameters: {}
                 },
                 /**
-                 * Fires when a widget is selected
+                 * Fires when a widget is selected.
                  * @type {object}
                  * @since 1.112.0
                  * @private
@@ -183,7 +141,7 @@ sap.ui.define([
                 widgetSelected: {
                     parameters: {
                         /**
-                         * The currently selected widget ID
+                         * The currently selected widget ID.
                          */
                         widgetId: { type: "string" }
                     }
@@ -205,7 +163,7 @@ sap.ui.define([
         },
 
         /**
-         * The string of the current contentFinder component for usage in Error Logs
+         * The string of the current contentFinder component for usage in Error Logs.
          * @type {string}
          */
         logComponent: "sap.ushell.components.ContentFinder.Component",
@@ -221,60 +179,218 @@ sap.ui.define([
 
             this.oResourceBundle = this.getModel("i18n").getResourceBundle();
 
-            var oModel = new GraphQLModel();
-            var oSelectionModel = new JSONModel();
+            // The "ui" model is used for the external and internal settings
+            // (e.g. component settings and internal configuration)
+            this.setModel(this.getUiModel(), "ui");
 
-            oModel.setSizeLimit(Infinity);
-            oSelectionModel.setSizeLimit(Infinity);
+            // The "unnamed" model is used for (external) data provided from the API.
+            // (e.g. "categoryTree", "visualizations")
+            this.setModel(this.getDataModel());
 
-            this.setModel(oModel);
-            this.setModel(oSelectionModel, "Selection");
+            // The "data" model is just an alias for the "unnamed" model which is used
+            // to swap the data and selection models on the GridList and Table.
+            // It is only used for this purpose.
+            this.setModel(this.getDataModel(), "data");
 
-            this.initializeModel();
+            // The "selection" model is used for the selection mode in the GridList and the Table
+            this.setModel(this.getSelectionModel(), "selection");
+
+            this.initializeUiModel(false);
+            this.initializeDataModel();
             this.initializeSelectionModel();
+            // Keep in mind that applySettings is called after the init function and hence don't contain
+            // the properties (settings) provided with the component constructor.
+            // Property changes that require updates of dependent properties need to be triggered by
+            // binding events. Check the following method for an example:
+            this._initializeSidebarStatus();
+
+            const oComponentData = this.getComponentData();
+            if (oComponentData?.visualizationFilters) {
+                this.setVisualizationsFilters(oComponentData.visualizationFilters);
+            }
 
-            this._oRootControlLoadedPromise = this.rootControlLoaded().then(function (oRootView) {
-                this.oNavContainer = oRootView.byId("contentFinderNavContainer");
-                this.oContentFinderWidgetGalleryPage = oRootView.byId("contentFinderWidgetGalleryPage");
-                this.oContentFinderAppSearchPage = oRootView.byId("contentFinderAppSearchPage");
-                this.oContentFinderAppSearchView = oRootView.byId("contentFinderAppSearchView");
-                this.oDialog = oRootView.byId("contentFinderDialog");
-            }.bind(this));
+            // Initialize Map which stores the restricted visualizations, which are visualizations
+            // that are already present on the section. This allows direct access to the keys and can be used in a
+            // formatter to indicate used visualizations.
+            this.oRestrictedVisualizationsMap = new Map();
+
+            // Indicates if the visualizations are currently loading to prevent additional events for data retrieval to be fired.
+            this._bLoading = false;
         },
 
         /**
-         * Opens the content finder and shows the provided target (WidgetGallery or AppSearch).
-         * Possible targets are: Widget Gallery (default): <code>widgetGallery</code>, App Search: <code>appSearch_tiles</code>.
+         * @typedef {object} VisualizationFilter A visualization filter.
+         * @property {string} key The key of the filter to be used. For example, in the "displayed" array.
+         * @property {string} title The translated title of the filter.
+         * @property {array<string>} types The visualization types (e.g. "sap.ushell.StaticAppLauncher", "sap.ushell.DynamicAppLauncher", "sap.card")
+         */
+        /**
+         * @typedef {object} VisualizationsFilters
+         * @property {VisualizationFilter[]} available The available visualization filters configuration objects.
+         * @property {string[]} displayed The keys of the displayed visualization filters.
+         * @property {string} selected The key of the selected visualization filter.
+         */
+        /**
+         * Sets the visualization filters used by the type selection filter.
          *
-         * @param {string} [sTarget] Target view which is navigated to.
+         * @param {VisualizationsFilters} oVisualizationsFilters The visualization filters.
          *
-         * @since 1.113.0
-         * @returns {Promise<undefined>} Resolves with <code>undefined</code>.
-         * @public
+         * @since 1.132.0
+         * @private
          */
-        show: function (sTarget) {
-            if (sTarget && !Object.values(oNavigationTargets).includes(sTarget)) {
-                return Promise.reject(new Error("Invalid navigation target provided. Could not open ContentFinder dialog."));
+        setVisualizationsFilters: function (oVisualizationsFilters) {
+            const oUiModel = this.getUiModel();
+            if (oVisualizationsFilters?.available) {
+                oUiModel.setProperty("/visualizations/filters/available", oVisualizationsFilters.available);
+            }
+            if (oVisualizationsFilters?.displayed) {
+                oUiModel.setProperty("/visualizations/filters/displayed", oVisualizationsFilters.displayed);
             }
-            sTarget = sTarget || oNavigationTargets.widgetGallery;
+            if (oVisualizationsFilters?.selected) {
+                oUiModel.setProperty("/visualizations/filters/selected", oVisualizationsFilters.selected);
+            }
+        },
 
-            return this.navigate(sTarget).then(function () {
-                this.oDialog.open();
-            }.bind(this));
+        /**
+         * Returns the "ui" model.
+         *
+         * Creates a new JSONModel if it does not exist.
+         *
+         * @returns {sap.ui.model.json.JSONModel} The model.
+         *
+         * @since 1.132.0
+         * @private
+         */
+        getUiModel: function () {
+            if (!this.oUiModel) {
+                this.oUiModel = new JSONModel();
+            }
+            return this.oUiModel;
         },
 
         /**
-         * Sets the widget groups (e.g. applications, premium widgets) for the content finder instance.
+         * Returns the "data" model.
          *
-         * A row of the VBox as part of the WidgetGallery represents a single widget group.
-         * A widget type represents a specific widget type like tiles or cards.
+         * Creates a new GraphQLModel if it does not exist.
          *
-         * @param {object[]} aWidgetGroups An array of widget groups.
-         * @since 1.113.0
+         * @returns {sap.ushell.components.contentFinder.model.GraphQLModel} The model.
+         *
+         * @since 1.132.0
+         * @private
+         */
+        getDataModel: function () {
+            if (!this.oDataModel) {
+                this.oDataModel = new GraphQLModel();
+                this.oDataModel.setSizeLimit(Infinity);
+            }
+            return this.oDataModel;
+        },
+
+        /**
+         * Returns the "selection" model.
+         *
+         * Creates a new JSONModel if it does not exist.
+         *
+         * @returns {sap.ui.model.json.JSONModel} The model.
+         *
+         * @since 1.132.0
+         * @private
+         */
+        getSelectionModel: function () {
+            if (!this.oSelectionModel) {
+                this.oSelectionModel = new JSONModel();
+                this.oSelectionModel.setSizeLimit(Infinity);
+            }
+            return this.oSelectionModel;
+        },
+
+        /**
+         * Sets a component setting as a property in the "ui" model.
+         *
+         * Helper method to set a property in the component properties and the "ui" model.
+         * The name of the property must be the same in the component and the model.
+         *
+         * @param {string} sPropertyName The name of the property in the component and the model
+         * @param {any} vValue The value of the property.
+         * @returns {sap.ushell.components.contentFinder.Component} The Content Finder component instance.
+         *
+         * @since 1.132.0
+         * @private
+         */
+        _setComponentSettingsProperty: function (sPropertyName, vValue) {
+            this.setProperty(sPropertyName, vValue);
+            this.getModel("ui").setProperty("/componentSettings/" + sPropertyName, vValue);
+            return this;
+        },
+
+        /**
+         * Sets the enablePersonalization property.
+         *
+         * If set to true, the visualizations are selectable and can be added to the page.
+         *
+         * @param {boolean} bEnablePersonalization True if personalization is enabled.
+         * @returns {sap.ushell.components.contentFinder.Component} The Content Finder component instance.
+         *
+         * @since 1.132.0
+         * @public
+         */
+        setEnablePersonalization: function (bEnablePersonalization) {
+            return this._setComponentSettingsProperty("enablePersonalization", !!bEnablePersonalization);
+        },
+
+        /**
+         * Sets the description for the "No items in catalog" message.
+         *
+         * The description is shown when no items are available in the catalog. This translation is provided
+         * from the consumer because the ContentFinder does not know if it is in design or runtime mode.
+         *
+         * @param {string} sNoItemsInCatalogDescription The actual string for the description and not the i18n key.
+         * @returns {sap.ushell.components.contentFinder.Component} The Content Finder component instance.
+         *
+         * @since 1.132.0
+         * public
+         */
+        setNoItemsInCatalogDescription: function (sNoItemsInCatalogDescription) {
+            return this._setComponentSettingsProperty("noItemsInCatalogDescription", sNoItemsInCatalogDescription);
+        },
+
+        /**
+         * Sets the visibility of the app box fields which are empty.
+         *
+         * @param {boolean} bShowAppBoxFieldsPlaceholder True if all app box fields should be shown.
+         * @returns {sap.ushell.components.contentFinder.Component} The Content Finder component instance.
+         *
+         * @since 1.132.0
+         * @public
+         */
+        setShowAppBoxFieldsPlaceholder: function (bShowAppBoxFieldsPlaceholder) {
+            return this._setComponentSettingsProperty("showAppBoxFieldsPlaceholder", !!bShowAppBoxFieldsPlaceholder);
+        },
+
+        /**
+         * Sets the visibility of the category tree when it is empty.
+         *
+         * @param {boolean} bShowCategoryTreeWhenEmpty True if the category tree should be shown when empty.
+         * @returns {sap.ushell.components.contentFinder.Component} The Content Finder component instance.
+         *
+         * @since 1.132.0
+         * @public
+         */
+        setShowCategoryTreeWhenEmpty: function (bShowCategoryTreeWhenEmpty) {
+            return this._setComponentSettingsProperty("showCategoryTreeWhenEmpty", !!bShowCategoryTreeWhenEmpty);
+        },
+
+        /**
+         * Sets the visibility of the application launch button.
+         *
+         * @param {boolean} bShowApplicationLaunchButton True if the application launch button should be shown.
+         * @returns {sap.ushell.components.contentFinder.Component} The Content Finder component instance.
+         *
+         * @since 1.132.0
          * @public
          */
-        setWidgetGroups: function (aWidgetGroups) {
-            this.getModel().setProperty("/widgetGallery/widgetGroups", aWidgetGroups);
+        setShowApplicationLaunchButton: function (bShowApplicationLaunchButton) {
+            return this._setComponentSettingsProperty("showApplicationLaunchButton", !!bShowApplicationLaunchButton);
         },
 
         /**
@@ -298,39 +414,46 @@ sap.ui.define([
          * the FlexibleColumnLayout to TwoColumnsMidExpanded.
          *
          * @param {CategoryTreeItem[]|[]} aCategoryTree A tree of category objects.
+         *
          * @experimental
+         * @since 1.123.0
          * @private
          */
         setCategoryTree: function (aCategoryTree) {
-            this.getModel().setProperty("/categoryTree", aCategoryTree);
-            this.initializeSidebarStatus();
+            const oDataModel = this.getDataModel();
+            if (!Array.isArray(aCategoryTree)) {
+                Log.error("Category tree data must be an array.");
+                aCategoryTree = [];
+            }
+            oDataModel.setProperty("/categoryTree", aCategoryTree);
         },
 
         /**
          * Fires the event to query for visualizations.
          *
-         * @since 1.115.0
          * @param {int} iSkip Number of entries already displayed.
          * @param {string} [sSearchTerm] The search term.
          * @param {string} [sCategoryId] The category ID resulting from the category tree selection
          *
+         * @since 1.115.0
          * @private
          */
         queryVisualizations: function (iSkip, sSearchTerm, sCategoryId) {
-            var oModel = this.getModel();
-            var sActiveNavigationTarget = oModel.getProperty("/activeNavigationTarget");
-            var aTypes = oNavigationTargetTypeMapping[sActiveNavigationTarget] || [];
+            const oUiModel = this.getUiModel();
+            const sSelectedVisualizationFilter = oUiModel.getProperty("/visualizations/filters/selected");
+            const aAvailableVisualizationFilters = oUiModel.getProperty("/visualizations/filters/available");
+            const oSelected = aAvailableVisualizationFilters.find((oElement) => oElement.key === sSelectedVisualizationFilter);
 
             if (!this._bLoading) {
                 this._bLoading = true;
-                oModel.setProperty("/appSearch/visualizationsLoaded", false);
+                oUiModel.setProperty("/visualizations/loaded", false);
 
                 this.fireEvent("visualizationFilterApplied", {
                     pagination: {
-                        skip: iSkip,
-                        top: oModel.getProperty("/appSearch/growingThreshold")
+                        skip: iSkip || 0,
+                        top: oUiModel.getProperty("/visualizations/growingThreshold")
                     },
-                    types: aTypes,
+                    types: oSelected?.types || [],
                     search: sSearchTerm || null,
                     categoryId: sCategoryId || null
                 });
@@ -338,80 +461,61 @@ sap.ui.define([
         },
 
         /**
-         * Concatenates the visualization data for the Content Finder model.
-         * Will replace 'setVisualizationData' once pagination is available.
+         * Replaces or concatenates the visualization data.
          *
          * @param {object} oVisualizationData An object containing all the visualization data as arrays.
+         * @param {boolean} [bReplaceVisualizations] If true, the visualizations will be replaced.
+         *
          * @since 1.115.0
          * @private
          */
-        setVisualizationData: function (oVisualizationData) {
-            var aVisualizations = ObjectPath.get("visualizations.nodes", oVisualizationData) || [];
-            var iTotalCount = ObjectPath.get("visualizations.totalCount", oVisualizationData) || 0;
-            var oModel = this.getModel();
-
-            // Prepare AppBox object structure for tiles and cards
-            var aTiles = this._prepareTiles(aVisualizations);
-            var aCards = this._prepareCards(aVisualizations);
-
-            var aExistingTiles = oModel.getProperty("/appSearch/visualizations/tiles");
-            var aExistingCards = oModel.getProperty("/appSearch/visualizations/cards");
+        setVisualizationData: function (oVisualizationData, bReplaceVisualizations = false) {
+            const aVisualizations = ObjectPath.get("visualizations.nodes", oVisualizationData) || [];
+            const iTotalCount = ObjectPath.get("visualizations.totalCount", oVisualizationData) || 0;
+            const oDataModel = this.getDataModel();
+            const oUiModel = this.getUiModel();
+
+            // Prepare object structure for visualizations
+            const aPreparedVisualizations = this._prepareVisualizations(aVisualizations);
+
+            // Replace or append to existing visualizations
+            let aExistingVisualizations;
+            if (bReplaceVisualizations) {
+                aExistingVisualizations = [];
+            } else {
+                aExistingVisualizations = oDataModel.getProperty("/visualizations/items");
+            }
+            oDataModel.setProperty("/visualizations/items", aExistingVisualizations.concat(deepExtend([], aPreparedVisualizations)));
 
-            oModel.setProperty("/appSearch/visualizations/tiles", aExistingTiles.concat(deepExtend([], aTiles)));
-            oModel.setProperty("/appSearch/visualizations/cards", aExistingCards.concat(deepExtend([], aCards)));
-            oModel.setProperty("/appSearch/totalCount", iTotalCount);
-            oModel.setProperty("/appSearch/filteredAppCount", iTotalCount);
-            oModel.setProperty("/appSearch/visualizationsLoaded", true);
+            oDataModel.setProperty("/visualizations/totalCount", iTotalCount);
+            oUiModel.setProperty("/visualizations/loaded", true);
 
-            this._updateVisualizationsRestricted();
             this._bLoading = false;
         },
 
-        /**
-         * Sets the restricted mode for the Content Finder.
-         *
-         * A content finder in restricted mode shows no "Back" button as part of the AppSearch view.
-         *
-         * @param {boolean} bRestrictedMode A boolean representing whether the content finder is restricted or not.
-         * @since 1.113.0
-         * @public
-         */
-        setRestrictedMode: function (bRestrictedMode) {
-            this.getModel().setProperty("/restrictedMode", !!bRestrictedMode);
-        },
-
         /**
          * Adds context data to visualization data.
          *
-         * This context can be used to set restricted visualizations.
-         * Restricted visualizations are non-selectable widgets which are already present on the page.
+         * This context can be used to set restricted visualizations. Restricted visualizations are
+         * visualizations which are already present in the section.
          *
          * @param {object} oContextData The context data with the restricted visualizations.
+         * @param {array<string>} [oContextData.restrictedVisualizations] An array of restricted visualization IDs.
+         *
          * @since 1.113.0
          * @public
          */
         setContextData: function (oContextData) {
-            var aRestrictedVisualizations = ObjectPath.get("restrictedVisualizations", oContextData) || [];
-            var oModel = this.getModel();
-
-            oModel.setProperty("/appSearch/originalRestrictedVisualizations", deepExtend([], aRestrictedVisualizations));
+            const aRestrictedVisualizations = ObjectPath.get("restrictedVisualizations", oContextData) || [];
+            const oModel = this.getDataModel();
 
-            oModel.setProperty("/appSearch/restrictedVisualizations", deepExtend([], aRestrictedVisualizations));
-
-            this._updateVisualizationsRestricted();
-        },
+            this.oRestrictedVisualizationsMap.clear();
+            aRestrictedVisualizations.forEach((sId) => {
+                this.oRestrictedVisualizationsMap.set(sId, true);
+            });
 
-        /**
-         * Returns the NavContainer.
-         *
-         * @returns {Promise<sap.m.NavContainer>} Resolves with the NavContainer.
-         * @since 1.113.0
-         * @private
-         */
-        getNavContainer: function () {
-            return this._oRootControlLoadedPromise.then(function () {
-                return this.oNavContainer;
-            }.bind(this));
+            // Should be called last to trigger the bindings
+            oModel.setProperty("/visualizations/restrictedItems", deepExtend([], aRestrictedVisualizations));
         },
 
         /**
@@ -426,6 +530,7 @@ sap.ui.define([
          *
          * @fires sap.ushell.components.contentFinder.Component#visualizationsAdded
          * @param {Visualization[]} aVisualizationsToAdd An array of visualizations to be added.
+         *
          * @since 1.113.0
          * @private
          */
@@ -436,126 +541,179 @@ sap.ui.define([
                 });
             }
         },
+
         /**
          * Function to trigger the <code>contentFinderClosed</code> event.
          * It will fire the `contentFinderClosed` without any parameters.
-         * @since 1.131.0
+         *
+         * @since 1.132.0
          * @private
          */
-        triggerContentFinderClosed: function() {
+        triggerContentFinderClosed: function () {
             this.fireEvent("contentFinderClosed");
         },
+
         /**
          * Fires the <code>widgetSelected</code> event .
+         *
          * @param {string} [widgetId] The widget ID resulting from the widget selection.
-         * @since 1.131.0
+         *
+         * @since 1.132.0
          * @private
          */
         triggerWidgetSelected: function (widgetId) {
             if (widgetId) {
-                this.fireEvent("widgetSelected", { widgetId: widgetId });
+                this.fireEvent("widgetSelected", {widgetId: widgetId});
             }
         },
+
         /**
-         * Resets the AppSearch, but keeps originally passed visualizations in the model.
+         * Resets the AppSearch, but keeps originally passed settings in the model.
          *
-         * Resetting the AppSearch is necessary when navigating away from the AppSearch.
+         * Should net empty visualizations, but reset all the data which needs to be initialized again
+         * if the consumer closes and opens the Content Finder again.
          *
          * @since 1.113.0
          * @private
          */
         resetAppSearch: function () {
-            this.oContentFinderAppSearchView.getController().resetAppSearch();
+            this.initializeUiModel(true);
+            this.initializeSelectionModel();
+            this.useSelectionModel(false);
+            this.updateSidebarStatus();
         },
 
         /**
-         * Executes the navigation from one view to another view.
+         * Switches the default model to the selection model or the data model.
          *
-         * @param {string} [sTarget] Target view which is navigated to.
-         * @since 1.113.0
-         * @returns {Promise<undefined>} Resolves with <code>undefined</code>.
+         * @param {boolean} bEnable True if the selection model or false if the data model should be used.
+         *
+         * @since 1.132.0
          * @private
          */
-        navigate: function (sTarget) {
-            var oModel = this.getModel();
+        useSelectionModel: function (bEnable) {
+            let oModel;
+            if (bEnable) {
+                oModel = this.getSelectionModel();
+            } else {
+                oModel = this.getDataModel();
+            }
+            this.setModel(oModel, "data");
+        },
 
-            oModel.setProperty("/activeNavigationTarget", sTarget);
-            if (sTarget === oNavigationTargets.appSearchCards) {
-                this.initializeSidebarStatus();
+        /**
+         * Initializes the content finder model.
+         *
+         * @param {boolean} [bPreserveData] If true, the data is preserved.
+         *
+         * @since 1.132.0
+         * @private
+         */
+        initializeUiModel: function (bPreserveData = false) {
+            const oModel = this.getUiModel();
+
+            let oPreservedData;
+            if (bPreserveData) {
+                oPreservedData = {
+                    preservedLayoutType: oModel.getProperty("/preservedLayoutType"),
+                    categoryTree: oModel.getProperty("/categoryTree"),
+                    visualizations: {
+                        filters: oModel.getProperty("/visualizations/filters"),
+                        listView: oModel.getProperty("/visualizations/listView")
+                    }
+                };
             }
-            if (sTarget === oNavigationTargets.appSearchTiles || sTarget === oNavigationTargets.appSearchCards) {
-                oModel.setProperty("/appSearch/visualizations/tiles", []);
-                oModel.setProperty("/appSearch/visualizations/cards", []);
 
-                this._bLoading = false;
+            oModel.setData({
+                // Settings which are only used internally
+                layoutType: LayoutType.TwoColumnsMidExpanded,
+                preservedLayoutType: LayoutType.TwoColumnsMidExpanded,
+                maxColumnsCount: 2,
+
+                // Settings provided to the component as settings parameter
+                componentSettings: {
+                    enablePersonalization: this.getEnablePersonalization(),
+                    noItemsInCatalogDescription: this.getNoItemsInCatalogDescription(),
+                    showAppBoxFieldsPlaceholder: this.getShowAppBoxFieldsPlaceholder(),
+                    showCategoryTreeWhenEmpty: this.getShowCategoryTreeWhenEmpty(),
+                    showApplicationLaunchButton: this.getShowApplicationLaunchButton()
+                },
 
-                this.queryVisualizations(0);
+                categoryTree: {
+                    // If the categoryTree has data (array is not empty)
+                    hasData: false,
+                    itemPressed: false,
+                    selectedId: undefined,
+                    selectedTitle: undefined,
+                    // If the categoryTree is currently visible by considering the available space.
+                    visible: true
+                },
 
-                return this.getNavContainer().then(function (oNavContainer) {
-                    oNavContainer.to(this.oContentFinderAppSearchPage);
-                }.bind(this));
-            }
+                visualizations: {
+                    appliedSearchTerm: "",
+                    filters: {
+                        displayed: [],
+                        filterIsTitle: true,
+                        selected: "tiles",
+                        available: []
+                    },
+                    growingThreshold: 100,
+                    listView: false,
+                    loaded: false,
+                    searchFieldValue: "",
+                    searchTerm: "",
+                    showSelectedPressed: false
+                }
+            });
 
-            return this.getNavContainer().then(function (oNavContainer) {
-                oNavContainer.to(this.oContentFinderWidgetGalleryPage);
-            }.bind(this));
+            if (bPreserveData) {
+                oModel.setData(oPreservedData, true);
+            }
         },
 
         /**
-         * Initializes the content finder model.
+         * Initializes the data model.
          *
-         * It is also called again after closing the dialog.
-         *
-         * @since 1.113.0
+         * @since 1.132.0
          * @private
          */
-        initializeModel: function () {
-            const oModel = this.getModel();
-            oModel.setData(deepExtend({}, oInitialData));
-            this.initializeModelData(oModel);
+        initializeDataModel: function () {
+            this.getDataModel().setData({
+                categoryTree: [],
+                visualizations: {
+                    items: [],
+                    totalCount: 0,
+                    restrictedItems: []
+                }
+            });
         },
 
         /**
-         * Initializes the Selection model with an empty selection
+         * Initializes the selection model.
          *
-         * @since 1.121.0
+         * @since 1.132.0
          * @private
          */
         initializeSelectionModel: function () {
-            const oModel = this.getModel("Selection");
-            oModel.setData(deepExtend({}, oInitialSelectionData));
-            this.initializeModelData(oModel);
+            this.getSelectionModel().setData({
+                visualizations: {
+                    items: [],
+                    totalCount: 0,
+                    restrictedItems: []
+                }
+            });
         },
 
         /**
-         * Initializes the model data.
-         *
-         * The method should also set all model related properties to their initial values.
+         * Resets the visualizations in the data model.
          *
-         * @param {sap.ui.model.json.JSONModel} oModel The model to initialize
-         * @since 1.131.0
+         * @since 1.132.0
          * @private
          */
-        initializeModelData: function (oModel) {
-            // If a siteId is set, the AppFinder is in run time mode, without siteId design time mode.
-            const oUrlParams = new URLSearchParams(window.location.search);
-            const bIsDesignTime = !(oUrlParams.get("siteId") || Config.last("/core/site/siteId"));
-
-            // The category tree is always available in design time.
-            oModel.setProperty("/appSearch/isDesignTime", bIsDesignTime);
-
-            oModel.setProperty("/categoryTreeAvailable", bIsDesignTime);
-            oModel.setProperty("/appSearch/showLaunchButton", !bIsDesignTime);
-            oModel.setProperty("/personalizationEnabled", Config.last("/core/shell/enablePersonalization"));
-
-            this.initializeSidebarStatus();
-
-            /**
-             * Temporary fallback to the classic AppFinder in case the Content Finder causes issues or does not show all required data.
-             */
-            const oUrl = new URL(location.href);
-            oUrl.searchParams.append("sap-ushell-xx-overwrite-config", "/core/workPages/contentFinderStandalone:false");
-            oModel.setProperty("/linkToAppFinder", oUrl.toString());
+        resetVisualizations: function () {
+            const oDataModel = this.getDataModel();
+            oDataModel.setProperty("/visualizations/items", []);
+            oDataModel.setProperty("/visualizations/totalCount", 0);
         },
 
         /**
@@ -563,163 +721,153 @@ sap.ui.define([
          *
          * The sidebar status is set to MidColumnFullScreen (no category tree) if the category tree is empty in run time.
          *
-         * @since 1.131.0
+         * @since 1.132.0
          * @private
          */
-        initializeSidebarStatus: function () {
-            const oModel = this.getModel();
-
-            const bDesignTime = oModel.getProperty("/appSearch/isDesignTime");
-            const vCategoryTree = oModel.getProperty("/categoryTree");
-            const sActiveNavigationTarget = oModel.getProperty("/activeNavigationTarget");
-
-            if ((!bDesignTime && vCategoryTree?.length === 0) || (bDesignTime && sActiveNavigationTarget === oNavigationTargets.appSearchCards)) {
-                oModel.setProperty("/categoryTreeAvailable", false);
-                oModel.setProperty("/sidebarStatus", LayoutType.MidColumnFullScreen);
-            } else {
-                oModel.setProperty("/categoryTreeAvailable", Array.isArray(vCategoryTree));
-                oModel.setProperty("/sidebarStatus", LayoutType.TwoColumnsMidExpanded);
-            }
+        _initializeSidebarStatus: function () {
+            const oDataModel = this.getDataModel();
+            const oUiModel = this.getUiModel();
+
+            this.oCategoryTreeLengthBinding = oDataModel.bindProperty("/categoryTree/length");
+            this.oShowCategoryTreeWhenEmptyBinding = oUiModel.bindProperty("/componentSettings/showCategoryTreeWhenEmpty");
+            this.oMaxColumnsCountBinding = oUiModel.bindProperty("/maxColumnsCount");
+            this.oVisualizationsFilterSelectedBinding = oUiModel.bindProperty("/visualizations/filters/selected");
+
+            [
+                this.oCategoryTreeLengthBinding,
+                this.oShowCategoryTreeWhenEmptyBinding,
+                this.oMaxColumnsCountBinding,
+                this.oVisualizationsFilterSelectedBinding
+            ].forEach((fn) => fn.attachChange(this.onUpdateSidebarStatus, this));
+
+            this.updateSidebarStatus();
         },
 
         /**
-         * @typedef preparedTile
-         * @property {string} id The vizId.
-         * @property {string} appId The appId.
-         * @property {string} icon The icon src.
-         * @property {string} info The info string.
-         * @property {string} launchUrl The launch url for the tile.
-         * @property {string} subtitle The subtitle.
-         * @property {string} title The title.
-         * @property {string} type The type.
-         * @property {string} dataHelpId The data-help-id for the assistant.
-         * @property {object} vizData The whole vizData object.
-         * @property {boolean} selected flag.
-         * @property {boolean} added added flag. True if the visualization was already added to the cell.
-         * @property {string} systemLabel The system label.
-         */
-
-        /**
-         * Prepares tiles from the visualizationData and enriches them for the appBoxes.
+         * Called when the sidebar status needs to be updated.
          *
-         * @param {object[]} aVisualizationData The visualizationData from the consumer
-         * @returns {preparedTile[]} The prepared and filtered tiles
-         * @since 1.113.0
+         * Several bindings are used to determine if the sidebar status needs to be updated.
+         * this method is called when one of the bindings changes. The setTimeout ensures that
+         * it is only called once or called as least as possible.
+         * The bindings are initialized in _initializeSidebarStatus.
+         *
+         * @since 1.132.0
          * @private
          */
-        _prepareTiles: function (aVisualizationData) {
-            var aTilesData = aVisualizationData.filter(function (tile) {
-                return [
-                    "sap.ushell.StaticAppLauncher",
-                    "sap.ushell.DynamicAppLauncher"
-                ].indexOf(tile.type) > -1;
-            });
+        onUpdateSidebarStatus: function () {
+            this.iUpdateSidebarStatusTimeout = this.iUpdateSidebarStatusTimeout || setTimeout(() => {
+                this.updateSidebarStatus();
+                this.iUpdateSidebarStatusTimeout = null;
+            }, 0);
+        },
 
-            return aTilesData.map(function (oTile) {
-                if (!oTile.descriptor || !oTile.descriptor.value) {
-                    Log.error("No descriptor available. Cannot load this tile!", null, this.logComponent);
-                    return;
+        updateSidebarStatus: function (sLayoutType) {
+            const oDataModel = this.getDataModel();
+            const oUiModel = this.getUiModel();
+            const iMaxColumnsCount = oUiModel.getProperty("/maxColumnsCount");
+            const bCategoryTreeHasData = oDataModel.getProperty("/categoryTree")?.length > 0;
+            const bShowCategoryTreeWhenEmpty = oUiModel.getProperty("/componentSettings/showCategoryTreeWhenEmpty");
+            const sVisualizationsFilterSelected = oUiModel.getProperty("/visualizations/filters/selected");
+            let sNewLayoutType;
+
+            // Temporary: Layout type override for the visualizations filter "cards" because they don't have catalogs.
+            if (sVisualizationsFilterSelected === "cards") {
+                sNewLayoutType = LayoutType.MidColumnFullScreen;
+            } else if (sLayoutType) {
+                sNewLayoutType = sLayoutType;
+            } else if (bShowCategoryTreeWhenEmpty || bCategoryTreeHasData) {
+                sNewLayoutType = oUiModel.getProperty("/preservedLayoutType");
+                // This happens only if the layout was resized to a larger width when only the category tree is displayed,
+                // then the layout needs to leave the "OneColumn" state because there are more columns available.
+                // Otherwise, we just update the layoutType property.
+                if (sNewLayoutType === LayoutType.OneColumn && iMaxColumnsCount > 1) {
+                    sNewLayoutType = LayoutType.TwoColumnsMidExpanded;
                 }
+            } else {
+                sNewLayoutType = LayoutType.MidColumnFullScreen;
+            }
 
-                var oTileSapApp = oTile.descriptor.value["sap.app"];
-                var oTileSapFiori = oTile.descriptor.value["sap.fiori"];
-                var sSystemLabel = oTile["systemLabel"];
-                var sAppID = "";
+            // If the layout is currently TwoColumnsMidExpanded and maxColumnsCount is only 1,
+            // the category tree should not be visible because there is no space.
+            let bCategoryTreeVisible = true;
+            if ((sNewLayoutType === LayoutType.TwoColumnsMidExpanded && iMaxColumnsCount === 1)
+                || (sNewLayoutType === LayoutType.MidColumnFullScreen)
+            ) {
+                bCategoryTreeVisible = false;
+            }
 
-                if (oTileSapFiori) {
-                    sAppID = oTileSapFiori.registrationIds[0];
-                } else if (oTileSapApp && oTileSapApp.hasOwnProperty("id")) {
-                    sAppID = oTileSapApp.id;
-                }
-                var oVizTarget = oTile.descriptor.value && oTile.descriptor.value["sap.flp"] && oTile.descriptor.value["sap.flp"].target;
-                var sLaunchUrl = utilsCdm.toHashFromTargetIntent(oTile.targetAppIntent, oVizTarget);
+            if (sLayoutType && sLayoutType !== LayoutType.OneColumn) {
+                oUiModel.setProperty("/preservedLayoutType", sLayoutType);
+            }
 
-                return {
-                    id: oTile.id,
-                    appId: sAppID,
-                    icon: ObjectPath.get("icons.icon", oTile.descriptor.value["sap.ui"]) || "",
-                    info: oTileSapApp && oTileSapApp.info || "",
-                    launchUrl: sLaunchUrl,
-                    subtitle: oTileSapApp && oTileSapApp.subTitle || "",
-                    title: oTileSapApp && oTileSapApp.title || "",
-                    type: oTile.type,
-                    dataHelpId: oTile.id,
-                    vizData: oTile,
-                    added: false,
-                    systemLabel: sSystemLabel || ""
-                };
-            }.bind(this));
+            oUiModel.setProperty("/layoutType", sNewLayoutType);
+            oUiModel.setProperty("/categoryTree/hasData", bCategoryTreeHasData);
+            oUiModel.setProperty("/categoryTree/visible", bCategoryTreeVisible);
         },
 
         /**
-         * @typedef preparedCard
+         * @typedef preparedVizualization
+         *
          * @property {string} id The vizId.
          * @property {string} appId The appId.
          * @property {string} icon The icon src.
          * @property {string} info The info string.
+         * @property {string} launchUrl The launch url for the visualization.
          * @property {string} subtitle The subtitle.
          * @property {string} title The title.
          * @property {string} type The type.
-         * @property {object} manifest The card manifest (descriptor).
          * @property {string} dataHelpId The data-help-id for the assistant.
          * @property {object} vizData The whole vizData object.
+         * @property {boolean} added The added flag. True if the visualization was already added to the cell.
+         * @property {string} systemLabel The system label.
          */
 
         /**
-         * Prepares cards from the visualizationData and enriches them for the appBoxes.
+         * Prepares visualizations from the visualizationData and enriches them.
          *
          * @param {object[]} aVisualizationData The visualizationData from the consumer
-         * @returns {preparedCard[]} The prepared cards
+         * @returns {preparedVizualization[]} The prepared visualizations
          * @since 1.113.0
          * @private
          */
-        _prepareCards: function (aVisualizationData) {
-            var aCardsData = aVisualizationData.filter(function (oViz) {
-                return oViz.type === "sap.card";
-            });
-
-            return aCardsData.map(function (oCard) {
-                if (!oCard.descriptor || !oCard.descriptor.value) {
-                    Log.error("No descriptor available. Cannot load this card!", null, this.logComponent);
-                    return;
+        _prepareVisualizations: function (aVisualizationData) {
+            return aVisualizationData.reduce((aResult, oViz) => {
+                if (!oViz?.descriptor || !oViz?.descriptor?.value) {
+                    Log.error("No descriptor available. Cannot load this visualization.", null, this.logComponent);
+                    return aResult;
                 }
 
-                var oCardSapApp = oCard.descriptor.value["sap.app"];
-                var sAppID = oCardSapApp && oCardSapApp.id || "";
-
-                return {
-                    id: oCard.id,
-                    appId: sAppID,
-                    icon: ObjectPath.get("icons.icon", oCard.descriptor.value["sap.ui"]) || "",
-                    info: oCardSapApp && oCardSapApp.info || "",
-                    subtitle: oCardSapApp && oCardSapApp.subTitle || "",
-                    title: oCardSapApp && oCardSapApp.title || "",
-                    type: oCard.type,
-                    manifest: oCard.descriptor.value,
-                    dataHelpId: oCard.id,
-                    vizData: oCard
-                };
-            }.bind(this));
-        },
-
-        /**
-         * Updates the added flag of the currently available visualizations.
-         *
-         * @since 1.113.0
-         * @private
-         */
-        _updateVisualizationsRestricted: function () {
-            var oModel = this.getModel();
-            var aRestrictedVisualizations = oModel.getProperty("/appSearch/restrictedVisualizations");
-            var aTiles = oModel.getProperty("/appSearch/visualizations/tiles");
+                const oVizSapApp = oViz.descriptor.value["sap.app"];
+                const oVizSapFiori = oViz.descriptor.value["sap.fiori"];
 
-            var aPreparedTiles = aTiles.map(function (oTile) {
-                oTile.added = aRestrictedVisualizations.includes(oTile.id);
-                return oTile;
-            });
+                let sAppID = "";
+                if (oVizSapFiori?.registrationIds[0]) {
+                    sAppID = oVizSapFiori.registrationIds[0];
+                } else if (oVizSapApp?.id) {
+                    sAppID = oVizSapApp.id;
+                }
 
-            oModel.setProperty("/appSearch/visualizations/tiles", aPreparedTiles);
+                let sLaunchUrl;
+                if (oViz.targetAppIntent) {
+                    sLaunchUrl = utilsCdm.toHashFromTargetIntent(oViz.targetAppIntent, oViz.descriptor.value["sap.flp"]?.target);
+                }
 
+                aResult.push({
+                    id: oViz.id,
+                    appId: sAppID,
+                    icon: ObjectPath.get("icons.icon", oViz.descriptor.value["sap.ui"]) || "",
+                    info: oVizSapApp && oVizSapApp.info || "",
+                    launchUrl: sLaunchUrl || "",
+                    subtitle: oVizSapApp && oVizSapApp.subTitle || "",
+                    title: oVizSapApp && oVizSapApp.title || "",
+                    type: oViz.type,
+                    dataHelpId: oViz.id,
+                    vizData: oViz,
+                    added: false,
+                    systemLabel: oViz.systemLabel || ""
+                });
+                return aResult;
+            }, []);
         }
     });
 });