@openui5/sap.ui.documentation 1.94.0 → 1.97.0

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

@@ -0,0 +1,188 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides reuse functionality for reading news from news RSS files
+sap.ui.define([
+		"sap/ui/core/Core",
+		"sap/ui/thirdparty/jquery",
+		"sap/ui/documentation/sdk/util/Resources",
+		"sap/base/Log"
+	],
+	function(Core, jQuery, ResourcesUtil, Log) {
+		"use strict";
+
+		var _oNewsDataCache = {},
+			_aNewNews = [],
+			_aOldNews = [],
+			_sPreparationFailureMessage = null,
+			_bInitiallySplit = false,
+			_sOldNewsLocalStorageKey = 'OLD_NEWS_IDS',
+			_sLocalStorageNewsName,
+			_oConfigUtilInstance;
+
+		function prepareNewsData(oConfigUtilInstance) {
+
+			if (_oNewsDataCache["newsRSS"]) {
+				return Promise.resolve(_oNewsDataCache["newsRSS"]);
+			}
+
+			_oConfigUtilInstance = oConfigUtilInstance;
+			_sLocalStorageNewsName = _oConfigUtilInstance.LOCAL_STORAGE_NAMES[_sOldNewsLocalStorageKey];
+
+			return _requireConfigJSON()
+					.then(_requireFeedXML)
+					.then(_parseDateToLocaleString)
+					.then(_splitNewAndOldItems)
+					.catch(function (vReason) {
+						_sPreparationFailureMessage = vReason.message;
+						Log.error(_sPreparationFailureMessage);
+					})
+					.finally(_publishNewsChangedEvent);
+		}
+
+		function _splitNewAndOldItems() {
+
+			if (_bInitiallySplit) {
+				return Promise.resolve();
+			}
+
+			var aLocalStorageCachedIDs = _oConfigUtilInstance.getLocalStorageItem(_sLocalStorageNewsName);
+
+			return new Promise(function (resolve) {
+
+				var aItems = _oNewsDataCache["newsRSS"].items,
+					oCurrItem;
+
+				if (Array.isArray(aLocalStorageCachedIDs)) {
+					for (var i = 0; i < aItems.length; i++) {
+						oCurrItem = aItems[i];
+						if (aLocalStorageCachedIDs.indexOf(oCurrItem.id) !== -1) {
+							_aOldNews.push(oCurrItem);
+						} else {
+							_aNewNews.push(oCurrItem);
+						}
+					}
+				} else {
+					_aNewNews = aItems.slice();
+				}
+				_bInitiallySplit = true;
+				resolve();
+			});
+		}
+
+		function getPreparationFailureMessage() {
+			return _sPreparationFailureMessage;
+		}
+
+		function getNewNewsArray() {
+			return _aNewNews;
+		}
+
+		function getOldNewsArray() {
+			return _aOldNews;
+		}
+
+		function moveNewItemToOld(oItem) {
+			var iIndexInNewArr = _aNewNews.indexOf(oItem),
+				aLocalStorageIDs = _oConfigUtilInstance.getLocalStorageItem(_sLocalStorageNewsName) || [];
+
+			if (iIndexInNewArr > -1) {
+				_aNewNews.splice(iIndexInNewArr, 1);
+			}
+
+			_aOldNews.push(oItem);
+			aLocalStorageIDs.push(oItem.id);
+
+			_oConfigUtilInstance.setLocalStorageItem(_sLocalStorageNewsName, aLocalStorageIDs);
+			_publishNewsChangedEvent();
+		}
+
+		function moveAllNewItemsToOld() {
+			var aLocalStorageIDs = _oConfigUtilInstance.getLocalStorageItem(_sLocalStorageNewsName) || [],
+				oCurrItem;
+
+			for (var i = 0; i < _aNewNews.length; i++) {
+				oCurrItem = _aNewNews[i];
+				_aOldNews.push(oCurrItem);
+				aLocalStorageIDs.push(oCurrItem.id);
+			}
+
+			_aNewNews = [];
+			_oConfigUtilInstance.setLocalStorageItem(_sLocalStorageNewsName, aLocalStorageIDs);
+
+			_publishNewsChangedEvent();
+		}
+
+		function _parseDateToLocaleString() {
+			var aItems = _oNewsDataCache["newsRSS"].items;
+
+			aItems.forEach(function(oItem) {
+				oItem.updated = new Date(oItem.updated).toLocaleString();
+			});
+		}
+
+		function _publishNewsChangedEvent() {
+			Core.getEventBus().publish("newsChanged", "onDemoKitNewsChanged");
+		}
+
+		function _requireConfigJSON() {
+			return new Promise(function (resolve) {
+				jQuery.ajax(ResourcesUtil.getResourceOriginPath("/news-config.json"), {
+						type: "GET",
+						dataType: "JSON",
+					success : function(oResult) {
+						resolve(oResult);
+					},
+					error : function () {
+						Log.error("failed to load news-config.json");
+						resolve();
+					}
+				});
+			});
+		}
+
+		function _requireFeedXML(oJSON) {
+			return new Promise(function (resolve) {
+				jQuery.ajax(ResourcesUtil.getResourceOriginPath(oJSON.feedPath), {
+						type: "GET",
+						dataType: "xml",
+					success : function(oResult) {
+
+						var items = [];
+						jQuery('item', oResult).each( function() {
+							var item = {};
+							item.title = jQuery(this).find('title').eq(0).text();
+							item.link = jQuery(this).find('link').eq(0).text();
+							item.description = jQuery(this).find('description').eq(0).text();
+							item.updated = jQuery(this).find('pubDate').eq(0).text();
+							item.id = jQuery(this).find('guid').eq(0).text();
+							items.push(item);
+						});
+
+						_oNewsDataCache["newsRSS"] = {"items" : items};
+						resolve(
+							_oNewsDataCache["newsRSS"]
+						);
+					},
+					error : function () {
+						Log.error("failed to load news rss");
+						_oNewsDataCache["newsRSS"] = null;
+						resolve();
+					}
+				});
+			});
+		}
+
+		return {
+			moveAllNewItemsToOld: moveAllNewItemsToOld,
+			moveNewItemToOld: moveNewItemToOld,
+			prepareNewsData: prepareNewsData,
+			getPreparationFailureMessage: getPreparationFailureMessage,
+			getNewNewsArray: getNewNewsArray,
+			getOldNewsArray: getOldNewsArray
+		};
+
+	});

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

@@ -12,7 +12,8 @@ sap.ui.define([],
 		var aTools = [
 			{
 				"id": "uiThemeDesigner",
-				"text": "UI Theme Designer"
+				"text": "UI Theme Designer",
+				"href": "https://www.sap.com/community/topics/ui-theme-designer.html"
 			},
 			{
 				"id": "businessApplicationStudio",
@@ -63,6 +64,11 @@ sap.ui.define([],
 				"id": "fioriTools",
 				"text": "SAP Fiori Tools",
 				"href": "https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US"
+			},
+			{
+				"id": "flexibleProgrammingModelExplorer",
+				"text": "Flexible Programming Model Explorer",
+				"href": "https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction"
 			}
 		];
 

package/src/sap/ui/documentation/sdk/css/style.css

@@ -11,6 +11,22 @@
 	vertical-align: bottom;
 }
 
+.newsButton.sapMBtn .sapMBadgeTopRight.sapMBadge .sapMBadgeIndicator {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 0;
+}
+
+.sapUiSizeCompact .newsButton.sapMBtn .sapMBadgeTopRight.sapMBadge .sapMBadgeIndicator {
+	top: -0.25rem;
+	right: -0.125rem;
+}
+
+.sapUiDemokitCustomNLI.sapMNLI {
+	cursor: default;
+}
+
 .aboutDialog .sapMMsgStrip .sapMFT {
     word-break: break-word;
 }
@@ -1089,6 +1105,21 @@ html:not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_belize_hcb):not(.sapUiT
 	}
 }
 
+.sapUiDemokit .videoWrapper {
+	position: relative;
+	padding-bottom: 56.25%;
+	height: 0;
+}
+
+.sapUiDemokit .videoWrapper iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
 /* ==========================================================================
    Documentation Page Header styles
   ========================================================================== */
@@ -1508,11 +1539,6 @@ html.sapUiTheme-sap_belize_hcb .sapUiDocumentationTopicsIframe {
 	background: #fff;
 }
 
-/* Prettified text looks bigger when viewed from mac, even if it has the same font size */
-html[data-sap-ui-os="mac"] pre.prettyprint.prettyprinted {
-	font-size: 0.8rem;
-}
-
 /*
  * API Detail page specific CSS improving readability
  * Note: Keep in mind this is applicable only for the sap_belize and sap_belize_plus themes

package/src/sap/ui/documentation/sdk/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html style="height: 100%;">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>SAPUI5 Navigation</title>
+	<script>
+
+		var sSampleId = new window.URLSearchParams(window.location.search).get('sap-ui-xx-sample-id'),
+			sSamplePath = new window.URLSearchParams(window.location.search).get('sap-ui-xx-sample-path'),
+			sOrigin = new window.URLSearchParams(window.location.search).get('sap-ui-xx-sample-origin'),
+			sVersion = new window.URLSearchParams(window.location.search).get('sap-ui-xx-sample-version'),
+
+			oPath = {};
+		if (!sOrigin || sOrigin == ".") {
+			sOrigin = window.location.origin + (window.location.pathname.includes("testsuite") ? "/testsuite" : "");
+		} else {
+			sOrigin = sOrigin + sVersion;
+		}
+
+		oPath[sSampleId.replace(/\./g, "/")] = sSamplePath;
+		oPath["sap/ui/demo/mock"] = sOrigin + "/test-resources/sap/ui/documentation/sdk";
+		oPath["test-resources/sap/ui/documentation/sdk"] = ".";
+		oPath["sap/uxap/sample"] = sOrigin + "/test-resources/sap/uxap/demokit/sample";
+
+
+
+		document.write("<script src=" + sOrigin  + '/resources/sap-ui-core.js' + " id='sap-ui-bootstrap' " +
+				"data-sap-ui-libs='sap.m' data-sap-ui-bindingSyntax='complex' data-sap-ui-compatVersion='edge'></scr" + "ipt>");
+		document.write("<base href=" + sOrigin + "/>");
+
+	</script>
+</head>
+<body class="sapUiBody sapUiSizeCompact" id="content">
+<script>
+	sap.ui.getCore().attachInit(function () {
+		sap.ui.require([
+			"sap/ui/core/ComponentContainer"
+		], function (ComponentContainer) {
+
+			sap.ui.loader.config({
+				paths: oPath
+			});
+
+			var oContainer = new ComponentContainer({
+				name : sSampleId,
+				height : "100%",
+				manifest: false
+			}).placeAt('content');
+
+		});
+	});
+</script>
+</body>
+</html>

package/src/sap/ui/documentation/sdk/manifest.json

@@ -32,6 +32,13 @@
 			"async": true,
 			"id": "app"
 		},
+		"resources": {
+		  "css": [
+			{
+			  "uri": "css/style.css"
+			}
+		  ]
+		},
 		"dependencies": {
 			"minUI5Version": "1.46.0",
 			"libs": {
@@ -290,6 +297,13 @@
 						"tools"
 					]
 				},
+				{
+					"pattern": "news",
+					"name": "news",
+					"target": [
+						"news"
+					]
+				},
 				{
 					"pattern": "search/{searchParam}:?options:",
 					"name": "search",
@@ -415,6 +429,11 @@
 					"viewLevel": 2,
 					"viewId": "tools"
 				},
+				"news": {
+					"viewName": "News",
+					"viewLevel": 2,
+					"viewId": "news"
+				},
 				"apiDetailInitial": {
 					"viewName": "ApiDetailInitial",
 					"viewId": "apiDetailInitial",
@@ -462,6 +481,10 @@
 					"viewLevel": 2,
 					"controlAggregation": "detailPages"
 				},
+				"sampleNotFound": {
+				  "viewName": "SampleNotFound",
+				  "viewId": "sampleNotFound"
+				},
 				"notFound": {
 					"viewName": "NotFound",
 					"viewId": "notFound"

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

@@ -9,8 +9,9 @@ sap.ui.define([
 	'sap/m/routing/Router',
 	'sap/ui/core/routing/History',
 	'sap/ui/thirdparty/hasher',
-	"sap/ui/documentation/sdk/controller/util/ControlsInfo"
-], function(Router, History, Hasher, ControlsInfo) {
+	"sap/ui/documentation/sdk/controller/util/ControlsInfo",
+	"sap/ui/thirdparty/URI"
+], function(Router, History, Hasher, ControlsInfo, URI) {
 	"use strict";
 
 	// We need to set the global hasher instance to not encode URL's. This is specific for the SDK
@@ -238,7 +239,7 @@ sap.ui.define([
 			return;
 		}
 
-		oAnchorElement = getClosestParentLink(oElement);
+		oAnchorElement = getClosestParentLink(oElement, true);
 
 		if (!oAnchorElement) {
 			return;
@@ -293,7 +294,9 @@ sap.ui.define([
 			oTarget = oEvent.target,
 			oAnchorElement = getClosestParentLink(oTarget),
 			bCtrlHold = oEvent.ctrlKey || oEvent.metaKey,
-			sTargetHref;
+			sTargetHref,
+			bNewWindow,
+			oUri;
 
 		if (oAnchorElement) {
 			// The links from the static documentation are already preprocessed at build-time
@@ -302,17 +305,18 @@ sap.ui.define([
 				return;
 			}
 			sTargetHref = getHref(oAnchorElement);
+			bNewWindow = bCtrlHold || !getSameWindow(oAnchorElement);
 		}
 
 		// Do not change href if it's already changed or if it's a stand-alone HTML page
-		if (!sTargetHref || /^https?:\/\//.test(sTargetHref) || sTargetHref.endsWith(".html")) {
+		if (!sTargetHref || (oUri = URI(sTargetHref)).is("absolute") || oUri.suffix() === "html") {
 			return;
 		}
 
 		// When context menu of the Browser is opened or when the aux button is clicked,
 		// or if the ctrl is hold and left mouse button is clicked
 		// we change the href of the anchor element
-		if (iPressedButton === 2 || iPressedButton === 4 || (bCtrlHold && iPressedButton === 1)) {
+		if (iPressedButton === 2 || iPressedButton === 4 || (bNewWindow && iPressedButton === 1)) {
 			sTargetHref = this.convertToStaticFormat(sTargetHref);
 			oAnchorElement.setAttribute("href", sTargetHref);
 		}
@@ -649,21 +653,21 @@ sap.ui.define([
 	};
 
 	// util
-	function getClosestParentLink(oAnchorElement, iMaxDrillUp) {
-		var bIsAnchor = isAnchorElement(oAnchorElement), iDrillUp = 0;
+	function getClosestParentLink(oAnchorElement, bSameWindow, iMaxDrillUp) {
+		var bIsAnchor = isAnchorElement(oAnchorElement, bSameWindow), iDrillUp = 0;
 		iMaxDrillUp || (iMaxDrillUp = 3);
 
 		while (!bIsAnchor && iDrillUp++ < iMaxDrillUp) {
 			oAnchorElement = oAnchorElement && oAnchorElement.parentElement;
-			bIsAnchor = isAnchorElement(oAnchorElement);
+			bIsAnchor = isAnchorElement(oAnchorElement, bSameWindow);
 		}
 
 		return oAnchorElement;
 	}
 
-	function isAnchorElement(oAnchorElement) {
-		if (oAnchorElement && oAnchorElement.nodeName === "A" && oAnchorElement.getAttribute("target") !== "_blank") {
-			return true;
+	function isAnchorElement(oAnchorElement, bSameWindow) {
+		if (oAnchorElement && oAnchorElement.nodeName === "A") {
+			return bSameWindow ? getSameWindow(oAnchorElement) : true;
 		}
 
 		return false;
@@ -673,6 +677,10 @@ sap.ui.define([
 		return oAnchorElement.getAttribute("href");
 	}
 
+	function getSameWindow(oAnchorElement) {
+		return oAnchorElement.getAttribute("target") !== "_blank";
+	}
+
 	return DocumentationRouter;
 
 });

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

@@ -22,22 +22,27 @@
 		 *
 		 * @param {string} sPath Relative path to resources
 		 */
+
 		getResourceOriginPath: function (sPath) {
-			var oConfig, sOrigin,
+			var sOrigin,
 				oUri = URI(sPath),
-				bUseUnifiedResourceOrigin = new window.URLSearchParams(window.location.search).get('sap-ui-xx-unifiedResources') != null,
-				sVersionPrefixPath = bUseUnifiedResourceOrigin && window.sessionStorage.getItem("versionPrefixPath") || "";
+				sVersionPrefixPath = this.getResourcesVersion();
 			if (oUri && oUri.is("absolute")) {
 				return sPath;
 			}
-			oConfig = self['sap-ui-documentation-config'];
-			sOrigin = (oConfig && oConfig.demoKitResourceOrigin) || '.';
+			sOrigin = this.getConfig() || '.';
 
 			return sOrigin + sVersionPrefixPath + this._formatPath(sPath);
 		},
 		getHasProxy: function () {
-			var oConfig = self['sap-ui-documentation-config'];
-			return !!(oConfig && oConfig.demoKitResourceOrigin);
+			return new window.URLSearchParams(window.location.search).get('sap-ui-xx-unifiedResources') != null ||
+				window["sap-ui-unified-resources"];
+		},
+		getResourcesVersion: function() {
+			return this.getHasProxy() && window.sessionStorage.getItem("versionPrefixPath") || "";
+		},
+		getConfig: function() {
+			return self['sap-ui-documentation-config'] && self['sap-ui-documentation-config'].demoKitResourceOrigin;
 		},
 		_formatPath: function(sPath) {
 			sPath = sPath.replace(/^\.\//, '/');

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

@@ -72,7 +72,15 @@
 							</items>
 						</IconTabHeader>
 
-						<ObjectStatus text="{= ${versionData>/isBetaVersion} ? ${i18n>APP_VERSION_BETA_VERSION} : ${i18n>APP_VERSION_VERSION}} {versionData>/version} {= ${versionData>/isBetaVersion} ? ${i18n>APP_VERSION_NOT_PRODUCTIVE} : ${versionData>/isDevVersion} ? ${i18n>APP_VERSION_IN_PROGRESS} : ''}" state="{= ${versionData>/isBetaVersion} ? 'Error' : ${versionData>/isDevVersion} ? 'Warning' : 'None'}" visible="{=!${appView>/bPhoneSize}}" />
+						<ObjectStatus text="{= ${versionData>/isBetaVersion} ? ${i18n>APP_VERSION_BETA_VERSION} :
+											${i18n>APP_VERSION_VERSION}}
+											{versionData>/version}
+											{= ${versionData>/isBetaVersion} ? ${i18n>APP_VERSION_NOT_PRODUCTIVE} :
+											${versionData>/isDevVersion} ? ${i18n>APP_VERSION_IN_PROGRESS} :
+											${versionData>/latestVersion} === ${versionData>/version} ? '(Latest)' :
+											''}" state="{= ${versionData>/isBetaVersion} ? 'Error' :
+											${versionData>/isDevVersion} ? 'Warning' :
+											'None'}" visible="{=!${appView>/bPhoneSize}}" />
 
 						<Button id="changeVersionButton" press="onChangeVersionButtonPress" type="Transparent" text="{i18n>APP_CHANGE_VERSION_BTN}" visible="{appView>/bShowVersionSwitchInHeader}">
 							<layoutData>
@@ -89,6 +97,24 @@
 							</layoutData>
 						</Button>
 
+						<Button
+							visible="{=!${news>/newsPreparationFailureMessage}}"
+							id="notificationsButton"
+							tooltip="{i18n>APP_NEWS_BTN_TOOLTIP}"
+							press="handleNewsPress"
+							icon="sap-icon://bell"
+							type="Transparent"
+							class="newsButton">
+							<customData>
+								<BadgeCustomData
+									key="badge"
+									value="{news>/newsCount}"/>
+							</customData>
+							<layoutData>
+								<OverflowToolbarLayoutData priority="NeverOverflow" />
+							</layoutData>
+						</Button>
+
 						<MenuButton tooltip="{i18n>APP_INFORMATION_BTN_TOOLTIP}" id="aboutMenuButton" icon="sap-icon://action-settings" type="Transparent" visible="{=!${appView>/bSearchMode}}">
 							<layoutData>
 								<OverflowToolbarLayoutData priority="NeverOverflow" />

package/src/sap/ui/documentation/sdk/view/ChangeVersionDialog.fragment.xml

@@ -5,12 +5,22 @@
 			title="{i18n>CHANGE_VERSION_DIALOG_TITLE}"
 			contentHeight="400px"
 			stretch="{appView>/bPhoneSize}">
-		<endButton>
+		<buttons>
 			<Button
-				text="{i18n>CHANGE_VERSION_DIALOG_CLOSE_BTN}"
-				press="onCloseVersionDialog">
+				text="{i18n>CHANGE_VERSION_DIALOG_APPLY_BTN}"
+				type="Emphasized"
+				press="onVersionItemPress">
 			</Button>
-		</endButton>
+			<Button
+					text="{i18n>CHANGE_VERSION_DIALOG_LATEST_BTN}"
+					type="Ghost"
+					press="onLatestVersionItemPress">
+			</Button>
+			<Button
+					text="{i18n>CHANGE_VERSION_DIALOG_CLOSE_BTN}"
+					press="onCloseVersionDialog">
+			</Button>
+		</buttons>
 		<subHeader>
 			<Bar>
 				<contentMiddle>
@@ -23,7 +33,7 @@
 		</subHeader>
 		<Tree
 				id="versionList"
-				itemPress="onVersionItemPress"
+				mode="SingleSelectMaster"
 				items="{
 					path: '/',
 					sorter: [{
@@ -37,8 +47,7 @@
 					}]
 				}">
 			<StandardTreeItem
-					title="{path: 'version'}"
-					type="{= ${path: 'path'} ? 'Active' : 'Inactive'}">
+					title="{path: 'version'}{= ${path: 'version'} === ${versionData>/latestVersion} ? ' (Latest)' : ''}">
 				<customData>
 					<core:CustomData key="path" value="{path: 'path'}" />
 				</customData>

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

@@ -0,0 +1,68 @@
+<mvc:View controllerName="sap.ui.documentation.sdk.controller.News"
+		xmlns:mvc="sap.ui.core.mvc"
+		xmlns="sap.m"
+		xmlns:l="sap.ui.layout"
+		xmlns:core="sap.ui.core">
+
+	<MessagePage
+		visible="{=!!${/preparationFailureMessage}}"
+		text="{i18n>NEWS_PREP_FAILURE_TITLE}"
+		description="{/preparationFailureMessage}"
+		showHeader="false"
+		icon="sap-icon://message-warning"/>
+	<VBox visible="{=!${/preparationFailureMessage}}">
+		<NotificationList>
+
+			<NotificationListGroup
+				items="{path:  '/new', templateShareable: false}"
+				title="{i18n>NEWS_NEW_GROUP_TITLE}"
+				showCloseButton="false">
+
+				<buttons>
+					<Button text="{i18n>NEWS_BTN_MARK_AS_READ}" press="handleMarkAsRead" />
+				</buttons>
+
+				<NotificationListItem
+					title="{title}"
+					description="{description}"
+					datetime="{updated}"
+					close="handleNewsItemClose"
+					class="sapUiDemokitCustomNLI">
+					<buttons>
+						<Button visible="{= %{link} !== ''}" text="{i18n>NEWS_BTN_VISIT_LINK}" press="handleVisitLink">
+							<customData>
+								<core:CustomData key="newsLink" value="{link}"/>
+							</customData>
+						</Button>
+					</buttons>
+					<customData>
+						<core:CustomData key="newsID" value="{id}"/>
+					</customData>
+				</NotificationListItem>
+
+			</NotificationListGroup>
+
+			<NotificationListGroup
+				items="{path:  '/old', templateShareable: false}"
+				title="{i18n>NEWS_READ_GROUP_TITLE}"
+				showCloseButton="false">
+
+				<NotificationListItem
+					title="{title}"
+					description="{description}"
+					datetime="{updated}"
+					showCloseButton="false"
+					class="sapUiDemokitCustomNLI">
+					<buttons>
+						<Button visible="{= %{link} !== ''}" text="{i18n>NEWS_BTN_VISIT_LINK}" press="handleVisitLink">
+							<customData>
+								<core:CustomData key="newsLink" value="{link}"/>
+							</customData>
+						</Button>
+					</buttons>
+				</NotificationListItem>
+
+			</NotificationListGroup>
+		</NotificationList>
+	</VBox>
+</mvc:View>