@openui5/sap.ui.rta 1.127.1 → 1.129.0

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorRegistry.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 * @private
 	 */
 	const ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
@@ -81,7 +81,7 @@ sap.ui.define([
 	 */
 	ChangeIndicatorRegistry.prototype.getAllRegisteredChanges = function() {
 		return values(this._oRegisteredChanges || {}).map(function(oChange) {
-			return Object.assign({}, oChange);
+			return { ...oChange };
 		});
 	};
 
@@ -101,7 +101,7 @@ sap.ui.define([
 	 * @returns {object} Registered change
 	 */
 	ChangeIndicatorRegistry.prototype.getRegisteredChange = function(sChangeId) {
-		return this._oRegisteredChanges[sChangeId] && Object.assign({}, this._oRegisteredChanges[sChangeId]);
+		return this._oRegisteredChanges[sChangeId] && { ...this._oRegisteredChanges[sChangeId] };
 	};
 
 	/**
@@ -118,16 +118,14 @@ sap.ui.define([
 			if (oChangeIndicators[sSelectorId] === undefined) {
 				oChangeIndicators[sSelectorId] = [];
 			}
-			oChangeIndicators[sSelectorId].push(Object.assign(
-				{
-					id: oChangeIndicatorData.change.getId(),
-					dependent: bDependent,
-					affectedElementId: sAffectedElementId || sPreviousAffectedElementId,
-					displayElementsKey: oChangeIndicatorData.visualizationInfo.displayElementIds.toString(),
-					descriptionPayload: oChangeIndicatorData.visualizationInfo.descriptionPayload || {}
-				},
-				_omit(oChangeIndicatorData, ["visualizationInfo"])
-			));
+			oChangeIndicators[sSelectorId].push({
+				id: oChangeIndicatorData.change.getId(),
+				dependent: bDependent,
+				affectedElementId: sAffectedElementId || sPreviousAffectedElementId,
+				displayElementsKey: oChangeIndicatorData.visualizationInfo.displayElementIds.toString(),
+				descriptionPayload: oChangeIndicatorData.visualizationInfo.descriptionPayload || {},
+				..._omit(oChangeIndicatorData, ["visualizationInfo"])
+			});
 			sPreviousAffectedElementId = sAffectedElementId || sPreviousAffectedElementId;
 		}
 

package/src/sap/ui/rta/util/changeVisualization/ChangeVisualization.js

@@ -84,7 +84,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeVisualization
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 * @private
 	 */
 	const ChangeVisualization = Control.extend("sap.ui.rta.util.changeVisualization.ChangeVisualization", {
@@ -323,9 +323,15 @@ sap.ui.define([
 		return this._oTextBundle.getText(sLabelKey, [iChangesCount]);
 	};
 
-	ChangeVisualization.prototype._getChangeCategoryButton = function(sChangeCategoryName) {
+	ChangeVisualization.prototype._getChangeCategoryButtonText = function(sChangeCategoryName) {
 		const sButtonKey = `BTN_CHANGEVISUALIZATION_OVERVIEW_${sChangeCategoryName.toUpperCase()}`;
-		return this._oTextBundle.getText(sButtonKey);
+		const sBaseText = this._oTextBundle.getText(sButtonKey);
+		const sVisualizedChangeState = this._oChangeVisualizationModel.getData().changeState;
+		if (sVisualizedChangeState === ChangeStates.ALL) {
+			return sBaseText;
+		}
+		const sStateText = this._oTextBundle.getText(`BUT_CHANGEVISUALIZATION_VERSIONING_${sVisualizedChangeState.toUpperCase()}`);
+		return `${sBaseText} (${sStateText})`;
 	};
 
 	ChangeVisualization.prototype.openChangeCategorySelectionPopover = function(oEvent) {
@@ -369,6 +375,7 @@ sap.ui.define([
 	ChangeVisualization.prototype.onChangeCategorySelection = function(oEvent) {
 		const sSelectedChangeCategory = oEvent.getSource().getBindingContext("visualizationModel").getObject().key;
 		this._selectChangeCategory(sSelectedChangeCategory);
+		this.getPopover()?.close();
 	};
 
 	ChangeVisualization.prototype.onVersioningCategoryChange = function(oEvent) {
@@ -379,7 +386,7 @@ sap.ui.define([
 	ChangeVisualization.prototype._selectChangeCategory = function(sSelectedChangeCategory) {
 		this._sSelectedChangeCategory = sSelectedChangeCategory;
 
-		const sChangeCategoryText = this._getChangeCategoryButton(sSelectedChangeCategory);
+		const sChangeCategoryText = this._getChangeCategoryButtonText(sSelectedChangeCategory);
 
 		this._updateVisualizationModel({
 			changeCategory: sSelectedChangeCategory,
@@ -393,8 +400,12 @@ sap.ui.define([
 	ChangeVisualization.prototype._selectChangeState = function(sSelectedChangeState) {
 		this._sSelectedChangeState = sSelectedChangeState;
 
+		const sSelectedChangeCategory = this._oChangeVisualizationModel.getData().changeCategory;
+		const sChangeCategoryText = this._getChangeCategoryButtonText(sSelectedChangeCategory);
+
 		this._updateVisualizationModel({
-			changeState: sSelectedChangeState
+			changeState: sSelectedChangeState,
+			changeCategoryText: sChangeCategoryText
 		});
 
 		this._updateChangeIndicators();
@@ -515,11 +526,10 @@ sap.ui.define([
 	};
 
 	ChangeVisualization.prototype._updateVisualizationModel = function(oData) {
-		this._oChangeVisualizationModel.setData(Object.assign(
-			{},
-			this._oChangeVisualizationModel.getData(),
-			oData
-		));
+		this._oChangeVisualizationModel.setData({
+			...this._oChangeVisualizationModel.getData(),
+			...oData
+		});
 	};
 
 	ChangeVisualization.prototype._updateChangeIndicators = function() {
@@ -559,6 +569,7 @@ sap.ui.define([
 			} else if (oChangeIndicator.getOverlayId() !== sOverlayId) {
 				// Overlay id might change, e.g. during undo/redo of dirty changes
 				oChangeIndicator.setOverlayId(sOverlayId);
+				oChangeIndicator.setVisible(true);
 			}
 			return undefined;
 		}.bind(this));
@@ -615,30 +626,38 @@ sap.ui.define([
 		this._oChangeIndicatorRegistry.registerChangeIndicator(sSelectorId, oChangeIndicator);
 	};
 
-	ChangeVisualization.prototype._setFocusedIndicator = function() {
+	ChangeVisualization.prototype._setFocusedIndicator = async function() {
 		// Sort the Indicators according XY-Position
 		// Set the tabindex according the sorting
 		// Focus the first visible indicator
-		this._oChangeIndicatorRegistry.waitForIndicatorRendering()
-		.then(() => {
-			const aVisibleIndicators = this._oChangeIndicatorRegistry.getChangeIndicators().filter((oIndicator) => {
-				// As setting the focus happens asynchronously after rendering,
-				// the overlay can be gone by the time this code is executed
-				return oIndicator.getVisible() && OverlayRegistry.getOverlay(oIndicator.getOverlayId());
-			})
-			.sort(function(oIndicator1, oIndicator2) {
+		await this._oChangeIndicatorRegistry.waitForIndicatorRendering();
+		const aVisibleIndicators = [];
+		this._oChangeIndicatorRegistry.getChangeIndicators().forEach((oIndicator) => {
+			const oOverlay = OverlayRegistry.getOverlay(oIndicator.getOverlayId());
+			// As setting the focus happens asynchronously after rendering,
+			// the overlay can be gone by the time this code is executed
+			if (!oOverlay) {
+				return;
+			}
+			if (oIndicator.getVisible()) {
+				oOverlay.setFocusable(true);
+				aVisibleIndicators.push(oIndicator);
+			} else {
+				oOverlay.setFocusable(false);
+			}
+		});
+
+		if (aVisibleIndicators.length > 0) {
+			aVisibleIndicators.sort(function(oIndicator1, oIndicator2) {
 				const iDeltaY = oIndicator1.getPosY() - oIndicator2.getPosY();
 				const iDeltaX = oIndicator1.getPosX() - oIndicator2.getPosX();
 				// Only consider x value if y is the same
 				return iDeltaY || iDeltaX;
 			});
-
-			if (aVisibleIndicators.length === 0) {
-				return;
-			}
-
 			const aVisibleIndicatorsOnScrollPosition = [];
 			aVisibleIndicators.forEach(function(oIndicator, iIndex) {
+				const oOverlay = OverlayRegistry.getOverlay(oIndicator.getOverlayId());
+				oOverlay.setFocusable(true);
 				oIndicator.getDomRef().tabIndex = iIndex + 2;
 				// Indicators with posY < 0 are outside of the current scroll position
 				if (oIndicator.getPosY() > 0) {
@@ -652,7 +671,7 @@ sap.ui.define([
 			} else {
 				aVisibleIndicators[0].focus();
 			}
-		});
+		}
 	};
 
 	ChangeVisualization.prototype._toggleRootOverlayClickHandler = function(bEnable) {
@@ -684,6 +703,17 @@ sap.ui.define([
 		this.oMenuButton = oToolbar.getControl("toggleChangeVisualizationMenuButton");
 		this.oRootOverlay = OverlayRegistry.getOverlay(oRootControl);
 		this.setVersionsModel(oToolbar);
+		// When the visualization is started, the focusable overlays are stored to be reset when the visualization is stopped
+		this.aFocusableOverlays ||= OverlayRegistry.getOverlays().filter(function(oOverlay) {
+			return oOverlay.getFocusable();
+		});
+
+		const fnSetOverlayFocusability = (bFocusable) => {
+			this.aFocusableOverlays.forEach(function(oOverlay) {
+				oOverlay.setFocusable(bFocusable);
+			});
+		};
+
 		if (this.oVersionsModel && this.oVersionsModel.getData().versioningEnabled) {
 			this._updateVisualizationModel({
 				versioningAvailable: this.oVersionsModel.getData().versioningEnabled,
@@ -697,15 +727,20 @@ sap.ui.define([
 			});
 		}
 
+		// Clean up when the visualization is no longer active
 		if (this.getIsActive()) {
 			this.setIsActive(false);
 			this._toggleRootOverlayClickHandler(false);
+			fnSetOverlayFocusability(true);
+			delete this.aFocusableOverlays;
 			return;
 		}
+		fnSetOverlayFocusability(false);
 		this._toggleRootOverlayClickHandler(true);
 		if (!this.getRootControlId()) {
 			this.setRootControlId(oRootControl);
 		}
+
 		this.setIsActive(true);
 		// show all change visualizations at startup
 		this._updateChangeRegistry()

package/src/sap/ui/rta/util/whatsNew/WhatsNew.js

@@ -0,0 +1,110 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/m/library",
+	"sap/ui/base/ManagedObject",
+	"sap/ui/core/Element",
+	"sap/ui/core/Fragment",
+	"sap/ui/fl/write/api/FeaturesAPI",
+	"sap/ui/model/json/JSONModel",
+	"sap/ui/model/resource/ResourceModel",
+	"sap/ui/rta/util/whatsNew/whatsNewContent/WhatsNewFeatures",
+	"sap/ui/rta/util/whatsNew/WhatsNewUtils"
+], function(
+	mLibrary,
+	ManagedObject,
+	Element,
+	Fragment,
+	FeaturesAPI,
+	JSONModel,
+	ResourceModel,
+	WhatsNewFeatures,
+	WhatsNewUtils
+) {
+	"use strict";
+
+	const oURLHelper = mLibrary.URLHelper;
+
+	/**
+	 * @class Constructor for a new sap.ui.rta.util.whatsNew.WhatsNew
+	 * @extends sap.ui.base.ManagedObject
+	 * @author SAP SE
+	 * @version 1.129.0
+	 * @constructor
+	 * @since 1.129
+	 * @private
+	 * @ui5-restricted sap.ui.rta
+	 */
+	const WhatsNew = ManagedObject.extend("sap.ui.rta.util.whatsNew.WhatsNew", {
+		metadata: {
+			properties: {
+				dontShowAgainFeatureIds: { type: "array", defaultValue: [] },
+				layer: { type: "string", defaultValue: "" }
+			},
+			aggregations: {
+				whatsNewDialog: { type: "sap.m.Dialog", multiple: false }
+			}
+		}
+	});
+
+	WhatsNew.prototype.setDontShowAgainFeatureIds = async function(aDontShowAgainFeatureIds) {
+		this.setProperty("dontShowAgainFeatureIds", aDontShowAgainFeatureIds);
+		this.aUnseenFeatures = await WhatsNewUtils.getFilteredFeatures(aDontShowAgainFeatureIds, this.getLayer());
+	};
+
+	WhatsNew.prototype.initializeWhatsNewDialog = async function() {
+		const aDontShowAgainFeatureIds = await FeaturesAPI.getSeenFeatureIds({ layer: this.getLayer() });
+		await this.setDontShowAgainFeatureIds(aDontShowAgainFeatureIds);
+		if (this.aUnseenFeatures.length === 0 || this.getLayer() !== "CUSTOMER") {
+			return;
+		}
+		const oWhatsNewDialogModel = new JSONModel();
+		oWhatsNewDialogModel.setData({ featureCollection: this.aUnseenFeatures });
+		if (!this.oWhatsNewDialog)	{
+			await this.createWhatsNewDialog(oWhatsNewDialogModel);
+		}
+		this.oWhatsNewDialog.open();
+	};
+
+	WhatsNew.prototype.createWhatsNewDialog = async function(oWhatsNewDialogModel) {
+		const oRTAResourceModel = new ResourceModel({ bundleName: "sap.ui.rta.messagebundle" });
+		this.oWhatsNewDialog = await Fragment.load({
+			name: "sap.ui.rta.util.whatsNew.WhatsNewDialog",
+			controller: this
+		});
+		this.oWhatsNewDialog.setModel(oRTAResourceModel, "i18n");
+		this.oWhatsNewDialog.setModel(oWhatsNewDialogModel, "whatsNewModel");
+	};
+
+	WhatsNew.prototype.closeWhatsNewDialog = function() {
+		if (this.oWhatsNewDialog) {
+			const oDontShowAgainCheckbox = Element.getElementById("whatsNewDialog_DontShowAgain");
+			if (oDontShowAgainCheckbox.getSelected()) {
+				const aUnseenFeatureIds = this.aUnseenFeatures.map((oUnseenFeature) => oUnseenFeature.featureId);
+				const aSeenFeatureIds = [...this.getDontShowAgainFeatureIds(), ...aUnseenFeatureIds];
+				const mPropertyBag = { layer: this.getLayer(), seenFeatureIds: aSeenFeatureIds };
+				FeaturesAPI.setSeenFeatureIds(mPropertyBag);
+			}
+			this.oWhatsNewDialog.close();
+		}
+	};
+
+	WhatsNew.prototype.onLearnMorePress = function() {
+		const sActivePageId = Element.getElementById("sapWhatsNewDialogCarousel").getActivePage();
+		const sLearnMoreUrl = WhatsNewUtils.getLearnMoreURL(sActivePageId, this.aUnseenFeatures);
+		oURLHelper.redirect(sLearnMoreUrl, true);
+	};
+
+	WhatsNew.prototype.destroy = function(...aArgs) {
+		ManagedObject.prototype.destroy.apply(this, aArgs);
+		if (this.oWhatsNewDialog) {
+			this.oWhatsNewDialog.destroy();
+		}
+	};
+
+	return WhatsNew;
+});

package/src/sap/ui/rta/util/whatsNew/WhatsNewDialog.fragment.xml

@@ -0,0 +1,81 @@
+<core:FragmentDefinition
+	xmlns:core="sap.ui.core"
+	xmlns="sap.m"
+	xmlns:grid="sap.ui.layout.cssgrid"
+	xmlns:f="sap.f"
+	xmlns:util="sap.ui.fl.util">
+	<Dialog
+		id="sapUiRtaWhatsNewDialog"
+		title="{i18n>TIT_WHATS_NEW_DIALOG}"
+		contentWidth="50rem"
+		contentHeight="33rem"
+		horizontalScrolling="false">
+		<content>
+			<Carousel
+				id="sapWhatsNewDialogCarousel"
+				loop="true"
+				pages="{path: 'whatsNewModel>/featureCollection',  templateShareable: false}"
+				height="33rem"
+				width="100%">
+				<pages>
+					<Page enableScrolling="true" showHeader="false">
+						<VBox height="100%" width="100%">
+							<Title text="{whatsNewModel>title}" class="sapUiMediumMarginTop sapUiLargeMarginBegin sapUiTinyMarginBottom" level="H3"/>
+							<f:Card width="44rem" height="24rem" class="sapUiLargeMarginBeginEnd sapUiSmallMarginBottom">
+								<f:content>
+									<Page showHeader="false" backgroundDesign="Transparent">
+											<VBox items="{path: 'whatsNewModel>information', templateShareable: false}" class="sapUiSmallMargin">
+												<HBox alignItems="Center" class="sapUiTinyMargin">
+													<FormattedText
+														visible="{= (${whatsNewModel>image} === null ? true : false) &amp;&amp; (${whatsNewModel>text} !== null ? true : false)}"
+														htmlText="{whatsNewModel>text}"
+														/>
+													<Image
+														src= "{whatsNewModel>image}"
+														visible="{= (${whatsNewModel>image} !== null ? true : false) &amp;&amp; (${whatsNewModel>text} === null ? true : false)}"
+														class="whatsNewImage"
+														width="100%"
+														/>
+													<grid:CSSGrid
+														visible="{= (${whatsNewModel>image} !== null ? true : false) &amp;&amp; (${whatsNewModel>text} !== null ? true : false)}"
+														gridTemplateColumns="2fr 3fr"
+														gridGap="1rem">
+														<Image
+															src= "{whatsNewModel>image}"
+															class="whatsNewImage"
+															width="100%"/>
+														<HBox alignItems="Center">
+															<FormattedText htmlText="{whatsNewModel>text}"/>
+														</HBox>
+													</grid:CSSGrid>
+												</HBox>
+											</VBox>
+									</Page>
+								</f:content>
+							</f:Card>
+						</VBox>
+					</Page>
+				</pages>
+			</Carousel>
+		</content>
+		<footer>
+			<Toolbar>
+				<content>
+					<CheckBox
+						id="whatsNewDialog_DontShowAgain"
+						text="{i18n>TXT_DONT_SHOW_AGAIN_WHATS_NEW_DIALOG}">
+					</CheckBox>
+					<ToolbarSpacer />
+					<Button
+						id="sapUiRtaWhatsNewDialog_LearnMore"
+						text="{i18n>BTN_LEARN_MORE_WHATS_NEW_DIALOG}"
+						press=".onLearnMorePress"/>
+					<Button
+						id="sapUiRtaWhatsNewDialog_ButtonClose"
+						text="{i18n>BTN_CLOSE_FEEDBACK_DIALOG}"
+						press=".closeWhatsNewDialog"/>
+				</content>
+			</Toolbar>
+		</footer>
+	</Dialog>
+</core:FragmentDefinition>

package/src/sap/ui/rta/util/whatsNew/WhatsNewOverview.js

@@ -0,0 +1,82 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/m/library",
+	"sap/ui/core/Fragment",
+	"sap/ui/model/json/JSONModel",
+	"sap/ui/model/resource/ResourceModel",
+	"sap/ui/rta/util/whatsNew/WhatsNewUtils"
+], function(
+	mLibrary,
+	Fragment,
+	JSONModel,
+	ResourceModel,
+	WhatsNewUtils
+) {
+	"use strict";
+	const WhatsNewOverview = {};
+	const oURLHelper = mLibrary.URLHelper;
+	let oWhatsNewOverviewDialog;
+	let aWhatsNewOverviewContent;
+
+	async function getWhatsNewOverviewContent() {
+		const aFeatures = await WhatsNewUtils.getFilteredFeatures([]);
+		return [...aFeatures].reverse();
+	}
+
+	WhatsNewOverview.openWhatsNewOverviewDialog = async function() {
+		const oWhatsNewDialogModel = new JSONModel();
+		aWhatsNewOverviewContent = await getWhatsNewOverviewContent();
+		oWhatsNewDialogModel.setData({ featureCollection: aWhatsNewOverviewContent });
+		oWhatsNewDialogModel.setProperty("overviewActive", true);
+		if (!oWhatsNewOverviewDialog) {
+			await WhatsNewOverview.createWhatsNewOverviewDialog(oWhatsNewDialogModel);
+		}
+		oWhatsNewOverviewDialog.open();
+
+		return oWhatsNewOverviewDialog;
+	};
+
+	WhatsNewOverview.createWhatsNewOverviewDialog = async function(oWhatsNewDialogModel) {
+		const oRTAResourceModel = new ResourceModel({ bundleName: "sap.ui.rta.messagebundle" });
+		oWhatsNewOverviewDialog = await Fragment.load(
+			{
+				name: "sap.ui.rta.util.whatsNew.WhatsNewOverviewDialog",
+				controller: WhatsNewOverview
+			}
+		);
+		oWhatsNewOverviewDialog.setModel(oRTAResourceModel, "i18n");
+		oWhatsNewOverviewDialog.setModel(oWhatsNewDialogModel, "whatsNewModel");
+	};
+
+	WhatsNewOverview.closeWhatsNewOverviewDialog = function() {
+		if (oWhatsNewOverviewDialog) {
+			oWhatsNewOverviewDialog.close();
+		}
+	};
+
+	WhatsNewOverview.backToOverview = function() {
+		var oContext = oWhatsNewOverviewDialog.getBindingContext("whatsNewModel");
+		oContext.setProperty("overviewActive", true);
+	};
+
+	WhatsNewOverview.onSelectListItem = function(oEvent) {
+		const oSelectedItem = oEvent.getSource();
+		const oContext = oSelectedItem.getBindingContext("whatsNewModel");
+		const sPath = oContext.getPath();
+		oContext.setProperty("overviewActive", false);
+		oWhatsNewOverviewDialog.bindElement({ path: sPath, model: "whatsNewModel" });
+	};
+
+	WhatsNewOverview.onLearnMorePress = function(oEvent) {
+		const sPath = oEvent.getSource().getBindingContext("whatsNewModel").getPath();
+		const sLearnMoreUrl = WhatsNewUtils.getLearnMoreURL(sPath, aWhatsNewOverviewContent);
+		oURLHelper.redirect(sLearnMoreUrl, true);
+	};
+
+	return WhatsNewOverview;
+});

package/src/sap/ui/rta/util/whatsNew/WhatsNewOverviewDialog.fragment.xml

@@ -0,0 +1,75 @@
+<core:FragmentDefinition
+	xmlns:core="sap.ui.core"
+	xmlns="sap.m"
+	xmlns:grid="sap.ui.layout.cssgrid"
+	xmlns:f="sap.f"
+	xmlns:util="sap.ui.fl.util">
+	<Dialog
+		id="sapUiRtaWhatsNewOverviewDialog"
+		title="What's New in Key User Adaptation"
+		contentWidth="50rem"
+		contentHeight="33rem"
+		horizontalScrolling="false">
+		<List id="whatsNewOverview" items="{path: 'whatsNewModel>/featureCollection'}" visible="{whatsNewModel>overviewActive}">
+			<StandardListItem description="{whatsNewModel>description}" title="{whatsNewModel>title}" press=".onSelectListItem" type="Active"/>
+		</List>
+		<VBox  id="whatsNewItemPage" visible="{= ${whatsNewModel>overviewActive} === false}">
+			<VBox height="100%" width="100%" >
+				<Title text="{whatsNewModel>title}" class="sapUiMediumMarginTop sapUiLargeMarginBegin sapUiTinyMarginBottom" level="H3"/>
+				<VBox class="sapUiSmallMargin sapUiLargeMarginBegin sapUiLargeMarginEnd" >
+					<VBox height="100%" width="100%" items="{whatsNewModel>information}">
+						<HBox alignItems="Center" class=" sapUiSmallMarginBottom ">
+								<FormattedText
+									visible="{= (${whatsNewModel>image} === null ? true : false) &amp;&amp; (${whatsNewModel>text} !== null ? true : false)}"
+									htmlText="{whatsNewModel>text}"
+									class="sapUiMediumMarginEnd"/>
+								<Image
+									src= "{whatsNewModel>image}"
+									visible="{= (${whatsNewModel>image} !== null ? true : false) &amp;&amp; (${whatsNewModel>text} === null ? true : false)}"
+									class=" sapUiMediumMarginEnd whatsNewImage"
+									width="100%"
+									/>
+								<grid:CSSGrid
+									visible="{= (${whatsNewModel>image} !== null ? true : false) &amp;&amp; (${whatsNewModel>text} !== null ? true : false)}"
+									gridTemplateColumns="2fr 3fr"
+									gridGap="1rem">
+									<Image
+										src= "{whatsNewModel>image}"
+										decorative="true"
+										densityAware="false"
+										class=" sapUiMediumMarginEnd whatsNewImage"
+										width="100%"
+										/>
+									<HBox alignItems="Center">
+										<FormattedText htmlText="{whatsNewModel>text}"/>
+									</HBox>
+							</grid:CSSGrid>
+						</HBox>
+					</VBox>
+				</VBox>
+			</VBox>
+		</VBox>
+		<footer>
+			<Toolbar>
+				<content>
+					<ToolbarSpacer />
+					<Button
+						id="sapUiRtaWhatsNewOverviewDialog_LearnMore"
+						visible="{= ${whatsNewModel>overviewActive} === false}"
+						text="{i18n>BTN_LEARN_MORE_WHATS_NEW_DIALOG}"
+						press=".onLearnMorePress"/>
+					<Button
+						id="sapUiRtaWhatsNewOverviewDialog_ButtonClose"
+						visible="{whatsNewModel>overviewActive}"
+						text="{i18n>BTN_CLOSE_FEEDBACK_DIALOG}"
+						press=".closeWhatsNewOverviewDialog"/>
+					<Button
+						id="sapUiRtaWhatsNewOverviewDialog_ButtonBack"
+						visible="{= ${whatsNewModel>overviewActive} === false}"
+						text="{i18n>BTN_BACK_WHATS_NEW_OVERVIEW_DIALOG}"
+						press=".backToOverview"/>
+				</content>
+			</Toolbar>
+		</footer>
+	</Dialog>
+</core:FragmentDefinition>

package/src/sap/ui/rta/util/whatsNew/WhatsNewUtils.js

@@ -0,0 +1,73 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/ui/fl/registry/Settings",
+	"sap/ui/rta/util/whatsNew/whatsNewContent/WhatsNewFeatures"
+], function(
+	Settings,
+	WhatsNewFeatures
+) {
+	"use strict";
+
+	function filterDontShowAgainFeatures(aFeatures, aDontShowAgainFeatureIds) {
+		return aFeatures.filter((oFeature) => {
+			return !aDontShowAgainFeatureIds?.includes(oFeature.featureId);
+		});
+	}
+
+	async function filterApplicableFeatures(aFeatures, sLayer) {
+		const aAreFeaturesApplicable = await Promise.all(
+			aFeatures.map((oFeature) => {
+				if (typeof oFeature.isFeatureApplicable === "function") {
+					return oFeature.isFeatureApplicable(sLayer);
+				}
+				return true;
+			})
+		);
+
+		const aFilteredFeatures = aFeatures.filter((oFeature, iIndex) => {
+			return aAreFeaturesApplicable[iIndex];
+		});
+
+		return aFilteredFeatures;
+	}
+
+	const WhatsNewUtils = {
+		/**
+		 * Get the URL for the feature documentation
+		 * @param {string} sPath - The path of the feature, including the index
+		 * @param {Array} aFeatureCollection - Feature collection
+		 * @returns {string} URL for the feature documentation
+		 */
+		getLearnMoreURL(sPath, aFeatureCollection) {
+			const sFeaturePageIndex = sPath.slice(-1);
+			const oSettings = Settings.getInstanceOrUndef();
+			if (oSettings?.isAtoEnabled() && oSettings?.getSystem()) {
+				return aFeatureCollection[sFeaturePageIndex].documentationUrls.s4HanaCloudUrl;
+			}
+			if (!oSettings?.isAtoEnabled() && oSettings?.getSystem()) {
+				return aFeatureCollection[sFeaturePageIndex].documentationUrls.s4HanaOnPremUrl;
+			}
+			return aFeatureCollection[sFeaturePageIndex].documentationUrls.btpUrl;
+		},
+
+		/**
+		 * Filters the new features based on the dontShowAgain feature IDs and the Flex settings
+		 * @param {string[]} aDontShowAgainFeatureIds - Array of feature IDs that should be excluded
+		 * from the What's New dialog
+		 * @param {string} sLayer - Layer for which the features should be filtered
+		 * @returns {object[]} Filtered What's New features
+		 */
+		getFilteredFeatures(aDontShowAgainFeatureIds, sLayer) {
+			const aAllFeatures = WhatsNewFeatures.getAllFeatures();
+			const aNewFeatures = filterDontShowAgainFeatures(aAllFeatures, aDontShowAgainFeatureIds);
+			return filterApplicableFeatures(aNewFeatures, sLayer);
+		}
+	};
+
+	return WhatsNewUtils;
+});