@openui5/sap.ui.documentation 1.136.1 → 1.138.0

package/src/sap/ui/documentation/sdk/controller/Sample.controller.js

@@ -58,6 +58,15 @@ sap.ui.define([
 			"sap-ui-language"
 		];
 
+		// Constants for better maintainability
+		var CONSTANTS = {
+			LEGACY_THEME_VERSION_THRESHOLD: 68,
+			LEGACY_DEFAULT_THEME: "sap_belize",
+			SETTINGS_TIMEOUT: 3000,
+			BUSY_DIALOG_TIMEOUT: 1000,
+			EXTERNAL_SAMPLE_RENDERING_DELAY: 100
+		};
+
 		return SampleBaseController.extend("sap.ui.documentation.sdk.controller.Sample", {
 			/* =========================================================== */
 			/* lifecycle methods										   */
@@ -147,10 +156,9 @@ sap.ui.define([
 
 				// check whether to open sample standalone
 				if (bShouldRedirect) {
-					this._handleRedirect();
+					this._handleRedirect(oSample);
 				}
 
-
 				// If we are in a scenario without contexts - this is the case for tutorials
 				if (oSample.previousSampleId || oSample.nextSampleId) {
 					oModelData.previousSampleId = oSample.previousSampleId;
@@ -180,7 +188,11 @@ sap.ui.define([
 				oModelData.name = oSample.name;
 				oModelData.details = oSample.details;
 				oModelData.description = oSample.description;
-				oModelData.showSettings = true;
+				oModelData.showSettings = !oSample.external; // Disable settings for external samples
+				oModelData.external = oSample.external;
+				oModelData.externalAppRef = oSample.externalAppRef;
+				oModelData.externalSourceRef = oSample.externalSourceRef;
+				oModelData.externalResourceRef = oSample.externalResourceRef;
 
 				var sLocalStorageDKSamples = this._getChangedSamplesLocalStorage();
 				if (sLocalStorageDKSamples && JSON.parse(sLocalStorageDKSamples).indexOf(oSample.id) > -1) {
@@ -238,20 +250,67 @@ sap.ui.define([
 			/**
 			 * Handles redirection from DemoKit to the sample page, rather than loading it as an iFrame.
 			 * The 'dk-sample-standalone' query parameter must be in the URI to take effect.
+			 * @param {object} oSample - The sample object containing metadata
 			 * @private
 			 */
-			_handleRedirect : function () {
+			_handleRedirect : function (oSample) {
+				if (this._isExternalSample(oSample)) {
+					URLHelper.redirect(oSample.externalAppRef, false);
+					return;
+				}
+
 				this._initIframeURL();
 				this._applySearchParamValueToIframeURL('sap-ui-theme', this._sDefaultSampleTheme);
 				this.sIFrameUrl += "&dk-sample-standalone";
 				URLHelper.redirect(this.sIFrameUrl, false);
 			},
 
+			/**
+			 * Checks if the given sample is external
+			 * @param {object} oSample - The sample object
+			 * @returns {boolean} True if the sample is external
+			 * @private
+			 */
+			_isExternalSample: function(oSample) {
+				return oSample && oSample.external;
+			},
+
+			/**
+			 * Gets the iframe content window safely
+			 * @returns {Window|null} The iframe content window or null if not available
+			 * @private
+			 */
+			_getIframeContentWindow: function() {
+				var oIframeDomRef = this._oHtmlControl && this._oHtmlControl.getDomRef();
+				return oIframeDomRef ? oIframeDomRef.contentWindow : null;
+			},
+
+			/**
+			 * Posts a message to the iframe content window safely
+			 * @param {object} oMessage - The message to post
+			 * @private
+			 */
+			_postMessageToIframe: function(oMessage) {
+				var oContentWindow = this._getIframeContentWindow();
+				if (oContentWindow) {
+					oContentWindow.postMessage(oMessage, this.getOwnerComponent()._sSampleIframeOrigin);
+				}
+			},
+
 			/**
 			 * Initializes the URL of the sample itself, loaded either in an iFrame or standalone.
 			 * @private
 			 */
 			_initIframeURL : function () {
+				var oModelData = this.oModel && this.oModel.getData();
+
+				// Check if this is an external sample
+				if (oModelData && this._isExternalSample(oModelData) && oModelData.externalAppRef) {
+					this.sIFrameUrl = oModelData.externalAppRef;
+					// No need to proceed further for external samples
+					return;
+				}
+
 				var sSampleOrigin = ResourcesUtil.getConfig(),
 					sSampleVersion = ResourcesUtil.getResourcesVersion(),
 					sSampleSearchParams = "";
@@ -341,22 +400,23 @@ sap.ui.define([
 
 			loadSampleSettings: function(fnCallback) {
 				return new Promise(function (resolve, reject) {
-					var oIframe = this._oHtmlControl.getDomRef();
-					oIframe.contentWindow.postMessage({
+					this._postMessageToIframe({
 						type: "SETTINGS",
 						reason: "get"
-					}, this.getOwnerComponent()._sSampleIframeOrigin);
-
-					window.addEventListener("message", loadSettings);
+					});
 
-					function loadSettings(eMessage) {
+					var fnLoadSettings = function(eMessage) {
 						fnCallback(eMessage);
-						window.removeEventListener("message", loadSettings);
+						window.removeEventListener("message", fnLoadSettings);
 						resolve();
-					}
+					};
+
+					window.addEventListener("message", fnLoadSettings);
+
 					setTimeout(function() {
+						window.removeEventListener("message", fnLoadSettings);
 						reject("The sample iframe is not loading settings");
-					},3000);
+					}, CONSTANTS.SETTINGS_TIMEOUT);
 				}.bind(this));
 			},
 
@@ -411,29 +471,37 @@ sap.ui.define([
 			 * @private
 			 */
 			_applyAppConfiguration: function(sThemeActive, sDensityMode, bRTL){
-				var oIframe = this._oHtmlControl.getDomRef();
+				var oModelData = this.oModel.getData();
+
+				// Skip settings application for external samples
+				if (this._isExternalSample(oModelData)) {
+					return;
+				}
 
 				if (this.getModel().getProperty('/iframe')) {
 					this._setStandAloneIndexIframeSetting(sThemeActive, sDensityMode, bRTL);
 				} else {
-					sDensityMode = this._presetDensity(sDensityMode);
-					oIframe.contentWindow.postMessage({
+					this._postMessageToIframe({
 						type: "SETTINGS",
 						reason: "set",
 						data: {
-							"density": sDensityMode,
+							"density": this._presetDensity(sDensityMode),
 							"RTL": bRTL,
 							"theme": sThemeActive
 						}
-					}, this.getOwnerComponent()._sSampleIframeOrigin);
+					});
 				}
 			},
 
-			_setStandAloneIndexIframeSetting(sThemeActive, sDensityMode, bRTL) {
+			_setStandAloneIndexIframeSetting: function(sThemeActive, sDensityMode, bRTL) {
 				this._applySearchParamValueToIframeURL('sap-ui-theme', sThemeActive);
 				this._applySearchParamValueToIframeURL('sap-ui-density', sDensityMode);
 				this._applySearchParamValueToIframeURL('sap-ui-rtl', bRTL);
-				this._oHtmlControl.getDomRef().src = this.sIFrameUrl;
+
+				var oIframeDomRef = this._oHtmlControl && this._oHtmlControl.getDomRef();
+				if (oIframeDomRef) {
+					oIframeDomRef.src = this.sIFrameUrl;
+				}
 			},
 
 			/**
@@ -444,7 +512,7 @@ sap.ui.define([
 				this._oBusyDialog.open();
 				setTimeout(function () {
 					this._oBusyDialog.close();
-				}.bind(this), 1000);
+				}.bind(this), CONSTANTS.BUSY_DIALOG_TIMEOUT);
 			},
 
 			_updateFileContent: function(sRef, sFile, bForceFetch) {
@@ -465,19 +533,37 @@ sap.ui.define([
 			},
 
 			onNewTab: function () {
+				var oModelData = this.oModel.getData();
+
+				// For external samples, open the external URL directly
+				if (this._isExternalSample(oModelData) && oModelData.externalAppRef) {
+					URLHelper.redirect(oModelData.externalAppRef, true);
+					return;
+				}
+
 				if (this.oModel.getProperty("/iframe")) {
 					URLHelper.redirect(this.sIFrameUrl, true);
 					return;
 				}
 
+				this._openNewTabWithSettings();
+			},
+
+			/**
+			 * Opens a new tab with current sample settings applied
+			 * @private
+			 */
+			_openNewTabWithSettings: function() {
 				this.loadSampleSettings(function(eMessage){
 					this._applySearchParamValueToIframeURL('sap-ui-theme', eMessage.data.data.theme);
 					this._applySearchParamValueToIframeURL('sap-ui-rtl', eMessage.data.data.RTL);
 					this._applySearchParamValueToIframeURL('sap-ui-density', eMessage.data.data.density);
-				}.bind(this)).then(function(){
+				}.bind(this))
+				.then(function(){
 					URLHelper.redirect(this.sIFrameUrl, true);
-				}.bind(this)).catch(function(err){
-					Log.error(err);
+				}.bind(this))
+				.catch(function(err){
+					Log.error("Failed to load sample settings for new tab", err);
 				});
 			},
 
@@ -543,14 +629,10 @@ sap.ui.define([
 
 					this._oHtmlControl = this._createHTMLControl()
 						.addEventDelegate({
-							onBeforeRendering: function () {
-								window.removeEventListener("message", this.onMessage.bind(this));
-							}.bind(this)
+							onBeforeRendering: this._onBeforeIframeRendering.bind(this)
 						})
 						.addEventDelegate({
-							onAfterRendering: function () {
-								window.addEventListener("message",this.onMessage.bind(this));
-							}.bind(this)
+							onAfterRendering: this._onAfterIframeRendering.bind(this)
 						});
 
 					this._getPage().removeAllContent();
@@ -559,6 +641,31 @@ sap.ui.define([
 				}.bind(this));
 			},
 
+			/**
+			 * Handler executed before the iframe rendering
+			 * @private
+			 */
+			_onBeforeIframeRendering: function() {
+				window.removeEventListener("message", this.onMessage.bind(this));
+			},
+
+			/**
+			 * Handler executed after the iframe rendering
+			 * @private
+			 */
+			_onAfterIframeRendering: function() {
+				var oModelData = this.oModel.getData();
+
+				// For external samples, resolve immediately after rendering since they don't use our messaging protocol
+				if (this._isExternalSample(oModelData)) {
+					setTimeout(function() {
+						this.fResolve({});
+					}.bind(this), CONSTANTS.EXTERNAL_SAMPLE_RENDERING_DELAY);
+				} else {
+					window.addEventListener("message", this.onMessage.bind(this));
+				}
+			},
+
 			_createHTMLControl: function () {
 				return new HTML({
 					id : "sampleFrame",
@@ -571,6 +678,12 @@ sap.ui.define([
 			},
 
 			onMessage: function(eMessage) {
+				var oModelData = this.oModel.getData();
+
+				if (this._isExternalSample(oModelData)) {
+					return;
+				}
+
 				if (eMessage.origin !== this.getOwnerComponent()._sSampleIframeOrigin) {
 					return;
 				}
@@ -596,16 +709,21 @@ sap.ui.define([
 					this.sIFrameUrl = sap.ui.require.toUrl(this._sId.replace(/\./g, "/")) + "/" + eMessage.data.config.sample.iframe;
 					this._setStandAloneIndexIframeSetting(oSettingsData.theme, oSettingsData.density, oSettingsData.rtl);
 				}
-				this._oHtmlControl.getDomRef().contentWindow.postMessage({
-					type: "SETTINGS",
-					reason: "set",
-					data: {
-						"density": oSettingsData.density,
-						"RTL": oSettingsData.rtl,
-						"theme": oSettingsData.theme
-					}
-				}, this.getOwnerComponent()._sSampleIframeOrigin);
-				this.fResolve(eMessage.data.config.sample);
+
+				// Skip settings initialization for external samples
+				if (!this._isExternalSample(oSettingsData)) {
+					this._postMessageToIframe({
+						type: "SETTINGS",
+						reason: "set",
+						data: {
+							"density": oSettingsData.density,
+							"RTL": oSettingsData.rtl,
+							"theme": oSettingsData.theme
+						}
+					});
+				}
+
+				this.fResolve(eMessage.data.config?.sample || {});
 			},
 			fnMessageLoad: function() {
 				Log.info("Sample Iframe for sample " + this._sId + " is loaded");
@@ -640,15 +758,28 @@ sap.ui.define([
 
 			setDefaultSampleTheme: function() {
 				var sSampleVersion = ResourcesUtil.getResourcesVersion();
-				this._sDefaultSampleTheme = sSampleVersion && parseInt(sSampleVersion.slice(3,5)) < 68 ?
-					"sap_belize" : Theming.getTheme();
+				this._sDefaultSampleTheme = sSampleVersion && parseInt(sSampleVersion.slice(3,5)) < CONSTANTS.LEGACY_THEME_VERSION_THRESHOLD ?
+					CONSTANTS.LEGACY_DEFAULT_THEME : Theming.getTheme();
 			},
 
 			onNavBack : function (oEvt) {
 				this.oRouter.navTo("entity", { id : this.entityId });
 			},
 
-			onNavToCode : function (evt) {
+			/**
+			 * Handles the navigation to the code view or to the external source code
+			 * @override
+			 */
+			onNavToCode: function () {
+				var oModelData = this.oModel.getData();
+
+				// For external samples, redirect to the external source code repository
+				if (this._isExternalSample(oModelData) && oModelData.externalSourceRef) {
+					URLHelper.redirect(oModelData.externalSourceRef, true);
+					return;
+				}
+
+				// For internal samples, navigate to the code view as usual
 				this.oRouter.navTo("code", {
 					entityId: this.entityId,
 					sampleId: this._sId
@@ -659,6 +790,26 @@ sap.ui.define([
 				ToggleFullScreenHandler.updateMode(oEvt, this.getView(), this);
 			},
 
+			/**
+			 * Handles the download of the sample source code.
+			 * If the sample is external, it redirects to the external URL instead.
+			 * @override
+			 */
+			onDownload: function () {
+				var oModelData = this.oModel.getData();
+
+				// For external samples, open the external URL directly since they don't have downloadable source files
+				if (this._isExternalSample(oModelData) && oModelData.externalResourceRef) {
+					URLHelper.redirect(oModelData.externalResourceRef, true);
+					return;
+				}
+
+				// Call the parent's download method for internal samples
+				if (SampleBaseController.prototype.onDownload) {
+					SampleBaseController.prototype.onDownload.call(this);
+				}
+			},
+
 			_oRTA : null,
 
 			_applySearchParamValueToIframeURL: function(sSearchParam, sNewVal) {
@@ -695,17 +846,17 @@ sap.ui.define([
 			},
 
 			onToggleAdaptationMode : function (oEvt) {
-				if (!this._oHtmlControl || !this._oHtmlControl.getDomRef()) {
+				var oContentWindow = this._getIframeContentWindow();
+				if (!oContentWindow) {
 					return false;
 				}
 
-				var oIframe = this._oHtmlControl.getDomRef();
-				oIframe.contentWindow.postMessage({
+				this._postMessageToIframe({
 					type: "RTA",
 					data: {
 						"msg": "Start the RTA"
 					}
-				}, this.getOwnerComponent()._sSampleIframeOrigin);
+				});
 			},
 
 			onRouteNotFound: function() {
@@ -713,7 +864,6 @@ sap.ui.define([
 
 				this.oRouter.myNavToWithoutHash("sap.ui.documentation.sdk.view.SampleNotFound", "XML", false);
 				setTimeout(this.appendPageTitle.bind(this, sNotFoundTitle));
-				return;
 			}
 		});
 	}

package/src/sap/ui/documentation/sdk/controller/SubApiDetail.controller.js

@@ -534,12 +534,15 @@ sap.ui.define([
 							const versionData = this.getModel("versionData").getData();
 							const isModuleAvailable = oControlData.module !== this.NOT_AVAILABLE;
 							const library = versionData?.libraries?.find((lib) => lib.name === oEntityData.lib);
+							const version = library?.version?.includes("-SNAPSHOT") ? "" : library?.version;
+							const bIsOpenUI5Lib = library.npmPackageName?.startsWith("@openui5");
 
-							if (!isModuleAvailable || !library?.version) {
+
+							if (!isModuleAvailable || !version || !bIsOpenUI5Lib) {
 								return _getObjectAttributeBlock("Module", oControlData.module);
 							}
 
-							const sGitHubUrl = `https://github.com/SAP/openui5/blob/${library.version}/src/${oEntityData.lib}/src/${oControlData.module}.js`;
+							const sGitHubUrl = `https://github.com/SAP/openui5/blob/1.138.0/src/${oEntityData.lib}/src/${oControlData.module}.js`;
 
 							return _getHBox({
 								items: [

package/src/sap/ui/documentation/sdk/controller/util/ConfigUtil.js

@@ -25,7 +25,8 @@ sap.ui.define([
 		"COOKIE_NAMES": {
 			"APPROVAL_REQUESTED": "dk_approval_requested",
 			"ALLOW_FUNCTIONAL_COOKIES": "dk_allow_functional_cookies",
-			"CONFIGURATION_APPEARANCE": "appearance"
+			"CONFIGURATION_APPEARANCE": "appearance",
+			"DEMOKIT_IMPORTANT_MESSAGES_READ": "dk_important_messages_read"
 		},
 
 		"LOCAL_STORAGE_NAMES": {

package/src/sap/ui/documentation/sdk/controller/util/ControlsInfo.js

@@ -216,8 +216,8 @@ sap.ui.define(["sap/ui/thirdparty/jquery", 'sap/ui/documentation/library', "sap/
 
 						oEnt.library = oDoc.library;
 
-						// add entity
-						if (aCategoryAllowList.indexOf(oEnt.category) > -1) {
+						// add entity (exclude hidden entities)
+						if (aCategoryAllowList.indexOf(oEnt.category) > -1 && !oEnt.hidden) {
 							data.entities.push(oEnt);
 						}
 					});

package/src/sap/ui/documentation/sdk/controller/util/ResourcesInfo.js

@@ -41,7 +41,7 @@ sap.ui.define([],
 			{
 				"id": "linter",
 				"text": "UI5 linter",
-				"href": "https://github.com/SAP/ui5-linter"
+				"href": "https://github.com/UI5/linter"
 			},
 			{
 				"id": "fpmExplorer",

package/src/sap/ui/documentation/sdk/model/formatter.js

@@ -125,6 +125,11 @@ sap.ui.define([
 				return "";
 			},
 
+			formatImportantMessage: function (sMsg, sParam) {
+				var sParam = this._getFullVersion();
+				return formatMessage(sMsg, sParam);
+			},
+
 			formatIndexByVersionEntry: function (sControlName, sEntityName, sEntityType, bStatic, sText) {
 				var sTitle = this.formatSenderLink(sControlName, sEntityName, sEntityType),
 					sHref = this.formatApiHref(sControlName, sEntityName, sEntityType, bStatic),

package/src/sap/ui/documentation/sdk/model/messagesData.json

@@ -4,5 +4,15 @@
 		"type": "Information",
 		"text": "Starting with version 1.88, {0} no longer supports Microsoft Internet Explorer 11.",
 		"expire": "2021-04-30"
+	},
+	{
+	  	"id": "IM2",
+		"type": "Warning",
+		"versionValidator": ".*.legacy-free(-SNAPSHOT)?$",
+		"text": "This version ({0}) is intended for experimentation only and should not be used for productive purposes. For more information, see",
+		"expire": "2027-04-30",
+		"linkText": "the SAP Community blog post",
+		"mandatory": true,
+		"linkHref": "https://community.sap.com/t5/technology-blog-posts-by-sap/explore-sapui5-openui5-1-136-x-legacy-free/ba-p/14103271"
 	}
 ]}

package/src/sap/ui/documentation/sdk/thirdparty/DataTables/Buttons-3.0.0/js/buttons.colVis.js

@@ -46,7 +46,9 @@
 	}
 	else {
 		// Browser
-		factory( jQuery, window, document );
+		// ##### BEGIN: MODIFIED BY SAP
+		factory( globalThis?.sap?.ui?.require?.("sap/ui/thirdparty/jquery") ?? jQuery, window, document );
+		// ##### END: MODIFIED BY SAP
 	}
 }(function( $, window, document ) {
 'use strict';

package/src/sap/ui/documentation/sdk/thirdparty/DataTables/Buttons-3.0.0/js/buttons.html5.js

@@ -49,7 +49,9 @@
 	}
 	else {
 		// Browser
-		factory( jQuery, window, document );
+		// ##### BEGIN: MODIFIED BY SAP
+		factory( globalThis?.sap?.ui?.require?.("sap/ui/thirdparty/jquery") ?? jQuery, window, document );
+		// ##### END: MODIFIED BY SAP
 	}
 }(function( $, window, document ) {
 'use strict';

package/src/sap/ui/documentation/sdk/thirdparty/DataTables/Buttons-3.0.0/js/buttons.jqueryui.js

@@ -45,7 +45,9 @@
 	}
 	else {
 		// Browser
-		factory( jQuery, window, document );
+		// ##### BEGIN: MODIFIED BY SAP
+		factory( globalThis?.sap?.ui?.require?.("sap/ui/thirdparty/jquery") ?? jQuery, window, document );
+		// ##### END: MODIFIED BY SAP
 	}
 }(function( $, window, document ) {
 'use strict';

package/src/sap/ui/documentation/sdk/thirdparty/DataTables/Buttons-3.0.0/js/dataTables.buttons.js

@@ -41,7 +41,9 @@
 	}
 	else {
 		// Browser
-		factory( jQuery, window, document );
+		// ##### BEGIN: MODIFIED BY SAP
+		factory( globalThis?.sap?.ui?.require?.("sap/ui/thirdparty/jquery") ?? jQuery, window, document );
+		// ##### END: MODIFIED BY SAP
 	}
 }(function( $, window, document ) {
 'use strict';

package/src/sap/ui/documentation/sdk/thirdparty/DataTables/DataTables-2.0.1/js/dataTables.jqueryui.js

@@ -41,7 +41,9 @@
 	}
 	else {
 		// Browser
-		factory(jQuery, window, document);
+		// ##### BEGIN: MODIFIED BY SAP
+		factory(globalThis?.sap?.ui?.require?.("sap/ui/thirdparty/jquery") ?? jQuery, window, document);
+		// ##### END: MODIFIED BY SAP
 	}
 }(function ($, window, document) {
 	'use strict';

package/src/sap/ui/documentation/sdk/thirdparty/DataTables/DataTables-2.0.1/js/dataTables.js

@@ -56,7 +56,9 @@
 	}
 	else {
 		// Browser
-		window.DataTable = factory(jQuery, window, document);
+		// ##### BEGIN: MODIFIED BY SAP
+		window.DataTable = factory(globalThis?.sap?.ui?.require?.("sap/ui/thirdparty/jquery") ?? jQuery, window, document);
+		// ##### END: MODIFIED BY SAP
 	}
 }(function ($, window, document) {
 	"use strict";

package/src/sap/ui/documentation/sdk/thirdparty/highlight.js/highlight.js

@@ -998,10 +998,10 @@ var hljs = (function () {
    * @param {string} message
    */
   const deprecated = (version, message) => {
-    if (seenDeprecations[`1.136.1/${message}`]) return;
+    if (seenDeprecations[`1.138.0/${message}`]) return;
 
-    console.log(`Deprecated as of 1.136.1. ${message}`);
-    seenDeprecations[`1.136.1/${message}`] = true;
+    console.log(`Deprecated as of 1.138.0. ${message}`);
+    seenDeprecations[`1.138.0/${message}`] = true;
   };
 
   /* eslint-disable no-throw-literal */

package/src/sap/ui/documentation/sdk/util/DocumentationRouter.js

@@ -328,7 +328,7 @@ sap.ui.define([
 		}
 
 		// Do not change href if it's already changed or if it's a stand-alone HTML page
-		if (!sTargetHref || (oUri = URI(sTargetHref)).is("absolute") || oUri.suffix() === "html") {
+		if (!sTargetHref || (oUri = URI(sTargetHref)).is("absolute") || (sTargetHref.indexOf("#") <= 0 && oUri.suffix() === "html")) {
 			return;
 		}
 

package/src/sap/ui/documentation/sdk/view/App.view.xml

@@ -71,7 +71,7 @@
 					<OverflowToolbar class="sapUiDemoKitHeaderOTB" style="Clear">
 						<ObjectStatus
 							text="{ parts:
-								['appView>/bShowVersionSwitchButton', 'versionData>/isDevVersion', 'versionData>/version'],
+								['appView>/bShowVersionSwitchButton', 'versionData>/isDevVersion', 'versionData>/fullVersion'],
 								formatter: '.formatter.formatVersionStatus'
 							}"
 							state="Information"
@@ -294,6 +294,27 @@
 		</tnt:sideContent>
 
 		<tnt:mainContents>
+			<VBox items="{messagesData>/messages}" width="100%" class="sapUiTinyMarginTop" visible="{=!!${messagesData>/iVisibleMessagesCount}}">
+				<items>
+					<MessageStrip close="onCloseImportantMessage" text="{
+						parts: [
+							'messagesData>text'
+						],
+						formatter: '.formatter.formatImportantMessage'
+					}" class="sapUiTinyMarginBottom sapUiTinyMarginBeginEnd" showIcon="true" showCloseButton="{= !${messagesData>mandatory} }" visible="{messagesData>isMessageVisible}" type="{messagesData>type}">
+						<customData>
+							<core:CustomData key="messageID" value="{messagesData>id}" />
+						</customData>
+						<link>
+							<Link
+								visible="{= (!!${messagesData>linkText} &amp;&amp; !!${messagesData>linkHref}) }"
+								text="{messagesData>linkText}"
+								target="_blank"
+								href="{messagesData>linkHref}" />
+						</link>
+					</MessageStrip>
+				</items>
+			</VBox>
 			<OverflowToolbar
 				visible="{= (${appView>/bHasMaster} &amp;&amp; !${appView>/bLandscape}) &#124;&#124; ${appView>/bHasMaster} &amp;&amp; ${appView>/device/system/phone} }">
 				<ToggleButton