@sapui5/sap.ushell 1.130.0 → 1.131.0

package/src/main/js/sap/ushell/components/shell/Settings/appearance/Appearance.controller.js

@@ -60,6 +60,7 @@ sap.ui.define([
             const oViewData = oView.getViewData(); // ViewData is set in AppearanceEntry.js
             this.aThemeListFromServer = oViewData.themeList || [];
             this.aThemeSets = oViewData.themeSets || [];
+            this.sThemeRoot = oViewData.themeRoot; // for avatar urls
 
             this.oPersonalizers = {};
 
@@ -68,10 +69,6 @@ sap.ui.define([
             oView.setModel(oResourceModel, "i18n");
             oView.setModel(this.getConfigurationModel(), "config");
 
-            // listener
-            this._fnHandleThemeApplied = this._handleThemeApplied.bind(this);
-            Theming.attachApplied(this._fnHandleThemeApplied);
-
             this._oDarkModeModel = this.getDarkModeModel(this.aThemeListFromServer);
             oView.setModel(this._oDarkModeModel, "darkMode");
 
@@ -82,16 +79,20 @@ sap.ui.define([
                 deprecatedThemeSelected: this.bShowDeprecationMsg
             }));
 
-            this._oInitPromise = Promise.all([
-                this._oConfigModelPromise,
-                this._oDarkModeModelPromise
-            ]);
+            // listener
+            this._fnHandleThemeApplied = this._handleThemeApplied.bind(this);
+            Theming.attachApplied(this._fnHandleThemeApplied);
         },
 
         onExit: function () {
             Theming.detachApplied(this._fnHandleThemeApplied);
         },
 
+        onAvatarError: function (oError) {
+            // if the avatar image has errors like 404, delete the avatar and replace it with an icon
+            oError.oSource.getBindingContext()?.setProperty("avatar", "");
+        },
+
         // Group header text for a set is a set label. Other themes not in a set are grouped under Individual Themes
         getThemeSetHeader: function (oGroup) {
             const oSet = this.aThemeSets.find((set) => oGroup.key === set.id);
@@ -112,18 +113,30 @@ sap.ui.define([
             const aThemes = this.aThemeListFromServer || [];
             const aSets = this.aThemeSets || [];
             const aListData = [];
+            const sThemeRoot = this.sThemeRoot;
 
             function _getThemeSet (sId) {
                 return aSets.find((set) => !!set.set.themes?.find?.((theme) => theme?.id === sId));
             }
 
+            function _getAvatarUrl (oTheme) {
+                if (sThemeRoot && oTheme?.avatarRuntimeUrl) {
+                    return sThemeRoot + oTheme.avatarRuntimeUrl;
+                }
+                return undefined;
+            }
+
+            this.bShowDeprecationMsg = false;
+
             // If the user is not allowed to change themes, return only the current theme
-            if (this.oUser.isSetThemePermitted() === false) {
+            if (!this._isThemeCofigurable() || this.oUser.isSetThemePermitted() === false) {
                 const oCurrentTheme = aThemes.find((theme) => theme?.id === sCurrentThemeId);
                 return [{
                     id: sCurrentThemeId,
                     name: oCurrentTheme?.name || sCurrentThemeId,
                     icon: "sap-icon://palette",
+                    avatar: _getAvatarUrl(oCurrentTheme),
+                    deprecated: false,
                     isSelected: true
                 }];
             }
@@ -136,7 +149,8 @@ sap.ui.define([
                         id: set.id,
                         name: sCommonText,
                         icon: "sap-icon://sys-monitor",
-                        deprecated: set.deprecated === "true",
+                        avatar: undefined, // TBD: replace with _getAvatarUrl(set), as soon as the sap.m.Image bug is fixed
+                        deprecated: set.deprecated === true,
                         setId: set.id,
                         isSelected: false
                     };
@@ -151,7 +165,8 @@ sap.ui.define([
                     id: theme?.id,
                     name: theme?.name || theme?.id || "",
                     icon: "sap-icon://palette",
-                    deprecated: theme?.deprecated === "true",
+                    avatar: _getAvatarUrl(theme),
+                    deprecated: theme?.deprecated === true,
                     setId: oThemeSet.id,
                     isSelected: false
                 };
@@ -167,7 +182,6 @@ sap.ui.define([
                 }
             }
             const oSelectedItem = aListData.find((item) => item.id === sSelectedId);
-            this.bShowDeprecationMsg = false;
             if (oSelectedItem) {
                 oSelectedItem.isSelected = true;
                 this.bShowDeprecationMsg = oSelectedItem.deprecated;
@@ -176,49 +190,46 @@ sap.ui.define([
             return aListData;
         },
 
+        _isThemeCofigurable: function () {
+            return Config.last("/core/shell/model/setTheme") !== false;
+        },
+
         getConfigurationModel: function () {
+            // Content density is always cozy on phones and tablets (FLPCOREANDUX-9769)
+            const bContentDensityConfigurable = Config.last("/core/shell/model/contentDensity") && (Device.system.desktop || Device.system.combi);
+            const bSizeBehaviorConfigurable = Config.last("/core/home/sizeBehaviorConfigurable");
+            const bShowContentProviderInfoConfigurable = Config.last("/core/contentProviders/providerInfo/enabled") &&
+                    Config.last("/core/contentProviders/providerInfo/userConfigurable");
+            const bShowContentProviderInfoOnVisualizations = Config.last("/core/contentProviders/providerInfo/showContentProviderInfoOnVisualizations");
+            // don't show an empty tab
+            const bDisplaySettingsTabVisible = bSizeBehaviorConfigurable || bContentDensityConfigurable || bShowContentProviderInfoConfigurable;
+
             const oConfigModel = new JSONModel({
-                themeConfigurable: Config.last("/core/shell/model/setTheme"),
-                sizeBehaviorConfigurable: Config.last("/core/home/sizeBehaviorConfigurable"),
+                themeConfigurable: this._isThemeCofigurable(),
+                sizeBehaviorConfigurable: bSizeBehaviorConfigurable,
                 tileSize: this.TILE_SIZE[Config.last("/core/home/sizeBehavior")],
-                contentDensityConfigurable: Config.last("/core/shell/model/contentDensity") && !Device.system.phone,
+                contentDensityConfigurable: bContentDensityConfigurable,
                 isCozyContentMode: document.body.classList.contains("sapUiSizeCozy"),
-                sapUiContentIconColor: "",
                 textAlign: Device.system.phone ? "Left" : "Right",
-                showContentProviderInfoOnVisualizationsConfigurable:
-                    Config.last("/core/contentProviders/providerInfo/enabled") &&
-                    Config.last("/core/contentProviders/providerInfo/userConfigurable"),
-                showContentProviderInfoOnVisualizationsSelected:
-                    Config.last("/core/contentProviders/providerInfo/showContentProviderInfoOnVisualizations")
-            });
-
-            this._oConfigModelPromise = ushellUtils.getThemingParameters(["sapUiContentIconColor"]).then(([sSapUiContentIconColor]) => {
-                oConfigModel.setProperty("/sapUiContentIconColor", sSapUiContentIconColor);
+                showContentProviderInfoOnVisualizationsConfigurable: bShowContentProviderInfoConfigurable,
+                showContentProviderInfoOnVisualizationsSelected: bShowContentProviderInfoOnVisualizations,
+                displaySettingsTabVisible: bDisplaySettingsTabVisible
             });
 
             return oConfigModel;
         },
 
         getDarkModeModel: function () {
-            var oDarkModeModel = new JSONModel({
-                enabled: false,
-                detectionSupported: false,
-                detectionEnabled: false
+            const oUrlSearch = new URLSearchParams(window.location.search);
+            const bDetectionSupported = !oUrlSearch.get("sap-theme") && !oUrlSearch.get("sap-ui-theme");
+            const bThemeConfigurable = this._isThemeCofigurable();
+
+            const oDarkModeModel = new JSONModel({
+                enabled: bThemeConfigurable,
+                detectionSupported: bThemeConfigurable && bDetectionSupported,
+                detectionEnabled: bThemeConfigurable && bDetectionSupported && this.oUser.getDetectDarkMode()
             });
 
-            if (Config.last("/core/darkMode/enabled")) {
-                this._oDarkModeModelPromise = Container.getServiceAsync("DarkModeSupport").then(function (oDarkModeSupport) {
-                    oDarkModeModel.setProperty("/enabled", true);
-                    const bDetectionSupported = oDarkModeSupport.canAutomaticallyToggleDarkMode();
-                    oDarkModeModel.setProperty("/detectionSupported", bDetectionSupported);
-                    // if detection is not supported, e.g. due to the "&sap-theme=" URL parameter,
-                    // then do not enable dark mode detection disregarding the user setting.
-                    oDarkModeModel.setProperty("/detectionEnabled", bDetectionSupported && this.oUser.getDetectDarkMode());
-                }.bind(this));
-            } else {
-                this._oDarkModeModelPromise = Promise.resolve();
-            }
-
             return oDarkModeModel;
         },
 
@@ -228,11 +239,9 @@ sap.ui.define([
             oList.toggleStyleClass("sapUshellThemeListDisabled", !isListSelected);
         },
 
-        _handleThemeApplied: async function () {
+        _handleThemeApplied: function () {
             var oConfigModel = this.getView().getModel("config");
             if (oConfigModel) {
-                const [sSapUiContentIconColor] = await ushellUtils.getThemingParameters(["sapUiContentIconColor"]);
-                oConfigModel.setProperty("/sapUiContentIconColor", sSapUiContentIconColor);
                 // readjusts the theme list after the dark mode change
                 var aThemeListData = this._getThemeListData(this.oUser.getTheme());
                 const oViewModel = this.getView().getModel();
@@ -436,16 +445,10 @@ sap.ui.define([
             return Promise.resolve();
         },
 
-        onSaveDarkModeEnabledSuccess: function (oUser, sNewDarkModeEnabled) {
-            return Container.getServiceAsync("DarkModeSupport")
-                .then(function (oDarkModeSupport) {
-                    oUser.resetChangedProperty("detectDarkMode");
-                    if (sNewDarkModeEnabled) {
-                        oDarkModeSupport.enableDarkModeBasedOnSystem();
-                    } else {
-                        oDarkModeSupport.disableDarkModeBasedOnSystem();
-                    }
-                });
+        onSaveDarkModeEnabledSuccess: async function (oUser, sNewDarkModeEnabled) {
+            oUser.resetChangedProperty("detectDarkMode");
+            const oDarkModeSupport = await Container.getServiceAsync("DarkModeSupport");
+            oDarkModeSupport.toggleDetection(!!sNewDarkModeEnabled);
         },
 
         // Save the value of the Enable Auto Dark Mode Detection switch
@@ -558,9 +561,9 @@ sap.ui.define([
 
         // applies dark mode after the user has selected a new theme
         _applyDarkMode: async function () {
-            if (this._isDarkModeActive()) {
+            if (this._areSetsVisible()) { // only if sets are available and enabled
                 const oDarkModeSupport = await Container.getServiceAsync("DarkModeSupport");
-                oDarkModeSupport._toggleDarkModeBasedOnSystemColorScheme();
+                oDarkModeSupport.toggleDetection(this._isDarkModeActive());
             }
         },
 

package/src/main/js/sap/ushell/components/shell/Settings/appearance/Appearance.view.xml

@@ -3,7 +3,7 @@
     xmlns:core="sap.ui.core"
     xmlns:mvc="sap.ui.core.mvc"
     controllerName="sap.ushell.components.shell.Settings.appearance.Appearance">
-    <IconTabBar ariaTexts="{/ariaTexts}" id="idIconTabBar" applyContentPadding="true" expandable="false">
+    <IconTabBar ariaTexts="{/ariaTexts}" id="idIconTabBar" expandable="false">
         <items>
             <IconTabFilter text="{i18n>AppearanceThemeMenu}" key="themeListTab">
                 <MessageStrip
@@ -27,99 +27,101 @@
                     mode="{= ${config>/themeConfigurable} ? 'SingleSelectMaster' : 'None'}"
                     id="themeList">
                     <items>
-                        <CustomListItem selected="{isSelected}" class="sapUshellAppearanceCustomListItem">
+                        <CustomListItem selected="{isSelected}" accDescription="{name}">
                             <customData>
                                 <core:CustomData key="themeid" value="{id}" writeToDom="true" />
                             </customData>
-                            <HBox>
-                                <HBox class="sapUshellAppearanceItemViewLeft">
-                                    <core:Icon
-                                        src="{icon}"
-                                        color="{config>/sapUiContentIconColor}"
-                                        size="1.75rem"
-                                        class="sapUshellAppearanceIcon" />
-                                    <Text text="{name}" class="sapUshellAppearanceItemText">
-                                        <layoutData><FlexItemData styleClass="sapUshellAppearanceFlexItemText" /></layoutData>
-                                    </Text>
-                                </HBox>
-                                <HBox class="sapUshellAppearanceItemViewRight">
-                                    <ObjectStatus
-                                        text="{i18n>AppearanceThemeDeprecated}"
-                                        visible="{deprecated}"
-                                        state="Warning" />
-                                    <core:Icon
-                                        src="sap-icon://sys-enter-2"
-                                        visible="{= !!${isSelected}}"
-                                        color="{config>/sapUiContentIconColor}"
-                                        size="1.375rem" />
-                                </HBox>
-                            </HBox>
+                            <FlexBox alignItems="Center" height="3.75rem">
+                                <core:Icon
+                                    class="sapUiSmallMarginBeginEnd"
+                                    width="3rem"
+                                    src="{icon}"
+                                    visible="{= !${avatar}}"
+                                    size="1.75rem" />
+                                <Image
+                                    class="sapUiSmallMarginBeginEnd"
+                                    src="{avatar}"
+                                    mode="InlineSvg"
+                                    visible="{= !!${avatar}}"
+                                    height="50px"
+                                    width="50px"
+                                    error=".onAvatarError"
+                                    decorative="true" />
+                                <Text
+                                    class="sapUiSmallMarginEnd"
+                                    maxLines="3"
+                                    text="{name}">
+                                    <layoutData><FlexItemData growFactor="1" /></layoutData>
+                                </Text>
+                                <ObjectStatus
+                                    class="sapUiSmallMarginEnd"
+                                    text="{i18n>AppearanceThemeDeprecated}"
+                                    visible="{deprecated}"
+                                    state="Warning" />
+                            </FlexBox>
                         </CustomListItem>
                     </items>
                 </List>
             </IconTabFilter>
-            <IconTabFilter text="{i18n>AppearanceLayoutAndBehaviorMenu}" id="DisplaySettingsTab" key="displaySettingsTab">
-                <HBox
-                    visible="{config>/showContentProviderInfoOnVisualizationsConfigurable}"
-                    alignItems="Start"
-                    justifyContent="End"
-                    class="sapUshellAppearanceBox">
-                    <Label
-                        id="showContentProviderInfoOnVisualizationsLabel"
-                        labelFor="showContentProviderInfoOnVisualizationsCheckbox"
+            <IconTabFilter
+                id="DisplaySettingsTab"
+                key="displaySettingsTab"
+                visible="{config>/displaySettingsTabVisible}"
+                text="{i18n>AppearanceLayoutAndBehaviorMenu}">
+                <Panel>
+                    <CheckBox
+                        id="showContentProviderInfoOnVisualizationsCheckbox"
                         text="{i18n>AppearanceShowContentProviderInfoOnVisualizationsLabel}"
-                        class="sapUshellAppearanceLabel"
-                        width="auto"
-                        textAlign="{config>/textAlign}" />
-                    <VBox alignItems="Baseline" class="sapUshellAppearanceContentDensityText">
-                        <CheckBox
-                            id="showContentProviderInfoOnVisualizationsCheckbox"
-                            selected="{config>/showContentProviderInfoOnVisualizationsSelected}" />
+                        visible="{config>/showContentProviderInfoOnVisualizationsConfigurable}"
+                        selected="{config>/showContentProviderInfoOnVisualizationsSelected}" />
+                    <VBox
+                        class="sapUshellFlpSettingsDescriptionBorder"
+                        visible="{config>/showContentProviderInfoOnVisualizationsConfigurable}">
                         <Text
-                            id="showContentProviderInfoOnVisualizationsDescription"
-                            text="{i18n>AppearanceShowContentProviderInfoOnVisualizationsText}"
-                            class="sapUshellFlpSettingsDescription" />
+                            class="sapUshellFlpSettingsDescription sapUshellFlpSettingsWide"
+                            text="{i18n>AppearanceShowContentProviderInfoOnVisualizationsText}"/>
                     </VBox>
-                </HBox>
-                <HBox
-                    visible="{config>/contentDensityConfigurable}"
-                    alignItems="Start"
-                    justifyContent="End"
-                    class="sapUshellAppearanceBox">
-                    <Label
-                        labelFor="contentDensityCheckBox"
+                    <CheckBox
+                        id="contentDensityCheckBox"
                         text="{i18n>AppearanceContentDensityLabel}"
-                        class="sapUshellAppearanceLabel"
-                        width="auto"
-                        textAlign="{config>/textAlign}" />
-                    <VBox alignItems="Baseline" class="sapUshellAppearanceContentDensityText">
-                        <CheckBox id="contentDensityCheckBox" selected="{config>/isCozyContentMode}" />
-                        <Text text="{i18n>appearanceCompactCozyDescriptionText}" class="sapUshellFlpSettingsDescription" />
+                        visible="{config>/contentDensityConfigurable}"
+                        selected="{config>/isCozyContentMode}" />
+                    <VBox
+                        class="sapUshellFlpSettingsDescriptionBorder"
+                        visible="{config>/contentDensityConfigurable}">
+                        <Text
+                            class="sapUshellFlpSettingsDescription sapUshellFlpSettingsWide"
+                            text="{i18n>appearanceCompactCozyDescriptionText}"/>
                     </VBox>
-                </HBox>
-                <HBox visible="{config>/sizeBehaviorConfigurable}" alignItems="Start" justifyContent="End" class="sapUshellAppearanceBox">
-                    <Label text="{i18n>AppearanceTileSizeLabel}"
-                        class="sapUshellAppearanceLabel"
-                        width="auto"
-                        textAlign="{config>/textAlign}"
-                        labelFor="tileSizeRadioButtonGroup"
-                        id="sapUshellAppearanceTileSizeLabel" />
-                    <VBox class="sapUshellAppearanceTileSizeText">
+                    <HBox
+                        class="sapUiTinyMarginBegin"
+                        alignItems="Center"
+                        visible="{config>/sizeBehaviorConfigurable}">
+                        <Label
+                            id="sapUshellAppearanceTileSizeLabel"
+                            class="sapUiSmallMarginEnd"
+                            text="{i18n>AppearanceTileSizeLabel}"
+                            textAlign="{config>/textAlign}"
+                            labelFor="tileSizeRadioButtonGroup" />
                         <RadioButtonGroup selectedIndex="{config>/tileSize}" id="tileSizeRadioButtonGroup">
                             <buttons>
                                 <RadioButton
                                     text="{i18n>AppearanceTileSizeSmall}"
-                                    class="sapUshellAppearanceTileSizeSmall"
                                     ariaLabelledBy="sapUshellAppearanceTileSizeLabel" />
                                 <RadioButton
                                     text="{i18n>AppearanceTileSizeLarge}"
-                                    class="sapUshellAppearanceTileSizeLarge"
                                     ariaLabelledBy="sapUshellAppearanceTileSizeLabel" />
                             </buttons>
                         </RadioButtonGroup>
-                        <Text text="{i18n>appearanceTileSizeDescriptionText}" class="sapUshellFlpSettingsDescription" />
+                    </HBox>
+                    <VBox
+                        class="sapUshellFlpSettingsDescriptionBorder"
+                        visible="{config>/sizeBehaviorConfigurable}">
+                        <Text
+                            class="sapUshellFlpSettingsDescription sapUshellFlpSettingsWide"
+                            text="{i18n>appearanceTileSizeDescriptionText}"/>
                     </VBox>
-                </HBox>
+                </Panel>
             </IconTabFilter>
         </items>
     </IconTabBar>

package/src/main/js/sap/ushell/components/shell/Settings/appearance/AppearanceEntry.js

@@ -62,7 +62,8 @@ sap.ui.define([
                             viewName: "sap.ushell.components.shell.Settings.appearance.Appearance",
                             viewData: {
                                 themeList: oThemes?.options || [],
-                                themeSets: oThemes?.sets || []
+                                themeSets: oThemes?.sets || [],
+                                themeRoot: oThemes?.themeRoot
                             }
                         });
                     }).then(function (oView) {

package/src/main/js/sap/ushell/components/shell/UserActionsMenu/Component.js

@@ -14,7 +14,7 @@ sap.ui.define([
     return UIComponent.extend("sap.ushell.components.shell.UserActionsMenu.Component", {
 
         metadata: {
-            version: "1.130.0",
+            version: "1.131.0",
             library: "sap.ushell",
             dependencies: {
                 libs: ["sap.m"]

package/src/main/js/sap/ushell/components/shell/UserImage/Component.js

@@ -38,7 +38,7 @@ sap.ui.define([
     return UIComponent.extend("sap.ushell.components.shell.UserImage.Component", {
 
         metadata: {
-            version: "1.130.0",
+            version: "1.131.0",
             library: "sap.ushell.components.shell.UserImage",
             dependencies: {
                 libs: {

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

@@ -40,7 +40,7 @@ sap.ui.define([
     // visualizationOrganizer Component
     return UIComponent.extend("sap.ushell.components.visualizationOrganizer.Component", {
         metadata: {
-            version: "1.130.0",
+            version: "1.131.0",
             library: "sap.ushell",
             dependencies: { libs: ["sap.m"] },
             properties: {

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

@@ -3,7 +3,7 @@
  * @fileOverview WorkPageBuilder Component
  * This UIComponent gets initialized by the FLP renderer upon visiting a work page if work pages are enabled (/core/workPages/enabled).
  *
- * @version 1.130.0
+ * @version 1.131.0
  */
 
 sap.ui.define([

package/src/main/js/sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.accessibility.js

@@ -2,7 +2,7 @@
 
 /**
  * @file WorkPageBuilder accessibility features
- * @version 1.130.0
+ * @version 1.131.0
  */
 
 sap.ui.define([

package/src/main/js/sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.controller.js

@@ -2,7 +2,7 @@
 
 /**
  * @file WorkPageBuilder controller for WorkPageBuilder view
- * @version 1.130.0
+ * @version 1.131.0
  */
 sap.ui.define([
     "sap/base/Log",
@@ -123,6 +123,25 @@ sap.ui.define([
 
             WorkPageBuilderLayoutHelper.register(oWorkPage);
             this.getView().setModel(WorkPageBuilderLayoutHelper.getModel(), "viewSettings");
+
+            this.oContentFinderPromise = this.createContentFinderComponent();
+
+            return this.oContentFinderPromise.then(function (oContentFinderComponent) {
+                const oContentFinder = oContentFinderComponent;
+                oContentFinder.attachContentFinderClosed(null, function () {
+                    oContentFinder?.detachVisualizationsAdded(this._onAddVisualization, this);
+                    oContentFinder?.detachVisualizationFilterApplied(this._onVisualizationFilterApplied, this);
+                }, this);
+            }.bind(this));
+
+        },
+        /**
+         * handler for the "visualizationFilterApplied" event .
+         * @param {sap.base.Event} oAppliedEvent The "visualizationFilterApplied" event.
+         * @private
+         */
+        _onVisualizationFilterApplied: function (oAppliedEvent) {
+            this.getOwnerComponent().fireEvent("visualizationFilterApplied", oAppliedEvent.getParameters());
         },
 
         onExit: function () {
@@ -711,7 +730,7 @@ sap.ui.define([
          */
         createContentFinderComponent: function () {
             this.oContentFinderPromise = Component.create({
-                id: this.getOwnerComponent().createId("workPageContentFinder"),
+                id: this.getOwnerComponent()?.createId("workPageContentFinder"),
                 name: "sap.ushell.components.contentFinder"
             });
 
@@ -728,18 +747,12 @@ sap.ui.define([
          * @public
          */
         openWidgetGallery: function (oEvent) {
-            var oSource = oEvent.getSource(); //WorkPageColumn
-
-            if (!this.oContentFinderPromise) {
-                this.oContentFinderPromise = this.createContentFinderComponent();
-            }
+           const oSource = oEvent.getSource(); //WorkPageColumn
 
             return this.oContentFinderPromise.then(function (oContentFinderComponent) {
                 oContentFinderComponent.setWidgetGroups(this._getWidgetGroups());
                 oContentFinderComponent.attachVisualizationsAdded(oSource, this._onAddVisualization, this);
-                oContentFinderComponent.attachVisualizationFilterApplied(oSource, function (oAppliedEvent) {
-                    this.getOwnerComponent().fireEvent("visualizationFilterApplied", oAppliedEvent.getParameters());
-                }, this);
+                oContentFinderComponent.attachVisualizationFilterApplied(oSource, this._onVisualizationFilterApplied, this);
                 oContentFinderComponent.show("widgetGallery");
             }.bind(this));
         },
@@ -753,19 +766,13 @@ sap.ui.define([
          * @public
          */
         openTilesAppSearch: function (oEvent) {
-            var oSource = oEvent.getSource().getParent().getParent(); //WorkPageCell
-
-            if (!this.oContentFinderPromise) {
-                this.oContentFinderPromise = this.createContentFinderComponent();
-            }
+            const oSource = oEvent.getSource().getParent().getParent(); //WorkPageCell
 
             return this.oContentFinderPromise.then(function (oContentFinderComponent) {
                 oContentFinderComponent.setContextData({ restrictedVisualizations: this._getRestrictedVisualizationIds(oSource) });
                 oContentFinderComponent.setRestrictedMode(true);
                 oContentFinderComponent.attachVisualizationsAdded(oSource, this._onAddVisualization, this);
-                oContentFinderComponent.attachVisualizationFilterApplied(oSource, function (oAppliedEvent) {
-                    this.getOwnerComponent().fireEvent("visualizationFilterApplied", oAppliedEvent.getParameters());
-                }, this);
+                oContentFinderComponent.attachVisualizationFilterApplied(oSource, this._onVisualizationFilterApplied, this);
                 oContentFinderComponent.show("appSearch_tiles");
             }.bind(this));
         },

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPage.js

@@ -36,7 +36,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.130.0
+     * @version 1.131.0
      *
      * @private
      * @experimental

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPageButton.js

@@ -20,7 +20,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.130.0
+     * @version 1.131.0
      *
      * @private
      * @experimental

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPageCell.js

@@ -48,7 +48,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.130.0
+     * @version 1.131.0
      *
      * @private
      * @experimental

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPageColumn.js

@@ -32,7 +32,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.130.0
+     * @version 1.131.0
      *
      * @private
      * @experimental

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPageColumnResizer.js

@@ -17,7 +17,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.130.0
+     * @version 1.131.0
      *
      * @private
      * @experimental

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPageRow.js

@@ -25,7 +25,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.130.0
+     * @version 1.131.0
      *
      * @private
      * @experimental

package/src/main/js/sap/ushell/components/workPageBuilder/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.workPageBuilder",
         "applicationVersion": {
-            "version": "1.130.0"
+            "version": "1.131.0"
         },
         "i18n": "../../utils/workpage/resources/resources.properties",
         "ach": "CA-FLP-FE-UI",