npm - @sap/open.fe - Versions diffs - 1.98.0 → 1.99.0 - Mend

@sap/open.fe 1.98.0 → 1.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (916) hide show

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/formSample.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Field in Edit Mode</title>
+	<link type="image/x-icon" href="../../../../../../../../../resources/sap/ui/core/mimes/logo/txtonly_16x16.ico" rel="shortcut icon" />
+	<link type="image/x-icon" href="../../../../../../../../../resources/sap/ui/core/mimes/logo/txtonly_16x16.ico" rel="icon" />
+	<style>
+		html, body, body > div, #container, #container-uiarea {
+			height: 100%;
+		}
+	</style>
+	<script id="sap-ui-bootstrap"
+			src="../../../../../../../../../resources/sap-ui-core.js"
+			data-sap-ui-theme="sap_fiori_3"
+			data-sap-ui-resourceroots='{
+				"sap.fe.core.fpmExplorer.formSample": "./form/formSample",
+				"sap.fe.core.fpmExplorer.content": "../../../content",
+				"test.sap.fe.test": "../../../../../../../../../test-resources/sap/fe/test"
+			}'
+			data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-loglevel="ERROR"
+			data-sap-ui-language="en"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-async="true"
+	>
+	</script>
+</head>
+<body class="sapUiBody sapUiSizeCompact">
+<div data-sap-ui-component
+	 data-name="sap.fe.core.fpmExplorer.formSample"
+	 data-id="container"
+	 data-settings='{"id" : "formElementLabel"}'></div>
+</body>
+</html>

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/guidance/guidanceFreestyle/EntryPage.controller.js CHANGED Viewed

@@ -1,43 +1,72 @@
-sap.ui.define(["sap/fe/core/PageController", "sap/ui/core/UIComponent"], function(PageController, UIComponent) {
-	"use strict";
-	return PageController.extend("sap.fe.core.fpmExplorer.guidanceFreestyle.EntryPage", {
-		onInit: function() {
-			PageController.prototype.onInit.apply(this);
-			this.byId("codeAppComponent").setValue(
-				"sap.ui.define(['sap/fe/core/AppComponent'], function(AppComponent) {\n" +
-					"    'use strict';\n" +
-					"\n" +
-					"    return AppComponent.extend('your.application.Component', {\n" +
-					"        metadata: {\n" +
-					"            manifest: 'json'\n" +
-					"        }\n" +
-					"    });\n" +
-					"});"
-			);
-			this.byId("codeManifest").setValue(
-				'"targets": {\n' +
-					'\t"entryPage": {\n' +
-					'\t\t"type": "Component",\n' +
-					'\t\t"id": "entryPage",\n' +
-					'\t\t"name": "sap.fe.core.fpm",\n' +
-					'\t\t"options": {\n' +
-					'\t\t\t"settings": {\n' +
-					'\t\t\t\t"viewName": "your.custom.view",\n' +
-					'\t\t\t\t"contextPath": "/RootEntity"\n' +
-					"\t\t\t}\n" +
-					"\t\t}\n" +
-					"\t}\n" +
-					"}"
-			);
-			this.byId("codePageController").setValue(
-				'sap.ui.define(["sap/fe/core/PageController"], function(PageController) {\n' +
-					'\t"use strict";\n' +
-					"\n" +
-					'\treturn PageController.extend("sap.fe.core.fpmExplorer.guidanceFreestyle.DetailPage", {\n' +
-					"\t});\n" +
-					"});"
-			);
-		}
-	});
-});
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+ *      (c) Copyright 2009-2021 SAP SE. All rights reserved
+ */
+sap.ui.define(["sap/fe/core/PageController"], function (PageController) {
+  "use strict";
+  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function () {}; return { s: F, n: function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (e) { throw e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function () { it = it.call(o); }, n: function () { var step = it.next(); normalCompletion = step.done; return step; }, e: function (e) { didErr = true; err = e; }, f: function () { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+  var CODESNIPPETS = [
+  /* 1.) Extend sap.fe.AppComponent instead of the UI5 Core Component */
+  {
+    id: "codeAppComponent",
+    code:
+    /* js */
+    "\n\nsap.ui.define(['sap/fe/core/AppComponent'], function(AppComponent) {\n\t'use strict';\n\n\treturn AppComponent.extend('your.application.Component', {\n\t\tmetadata: {\n\t\t\tmanifest: 'json'\n\t\t}\n\t});\n});\n\n".slice(2, -2) // remove first and last 2 newlines
+  },
+  /* 2.) Adapt the manifest and wrap your view into the FPM Component provided by SAP Fiori elements */
+  {
+    id: "codeManifest",
+    code:
+    /* json */
+    "\n\n\"targets\": {\n\t\"entryPage\": {\n\t\t\"type\": \"Component\",\n\t\t\"id\": \"entryPage\",\n\t\t\"name\": \"sap.fe.core.fpm\",\n\t\t\"options\": {\n\t\t\t\"settings\": {\n\t\t\t\t\"viewName\": \"your.custom.view\",\n\t\t\t\t\"contextPath\": \"/RootEntity\"\n\t\t\t}\n\t\t}\n\t}\n}\n\n".slice(2, -2) // remove first and last 2 newlines
+  },
+  /* 3.) Extend the sap.fe.PageController instead of the UI5 MVC Controller */
+  {
+    id: "codePageController",
+    code:
+    /* js */
+    "\n\nsap.ui.define([\"sap/fe/core/PageController\"], function(PageController) {\n\t\"use strict\";\n\n\treturn PageController.extend(\"sap.fe.core.fpmExplorer.guidanceFreestyle.DetailPage\", {\n\t});\n});\n\n".slice(2, -2) // remove first and last 2 newlines
+  },
+  /* Adding sap.fe.macros library as a dependent library */
+  {
+    id: "codeDependency",
+    code:
+    /* json */
+    "\n\n\"sap.ui5\": {\n\t\"dependencies\": {\n\t\t\"libs\": {\n\t\t\t...,\n\t\t\t\"sap.fe.macros\": {}\n\t\t\t...,\n\t\t}\n\t}\n}\n\n".slice(2, -2) // remove first and last 2 newlines
+  }];
+  return PageController.extend("sap.fe.core.fpmExplorer.guidanceFreestyle.EntryPage", {
+    onInit: function () {
+      PageController.prototype.onInit.apply(this);
+      var _iterator = _createForOfIteratorHelper(CODESNIPPETS),
+          _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _oSnippet$code$split;
+          var oSnippet = _step.value;
+          var oEditor = this.byId(oSnippet.id);
+          var iHeight = ((_oSnippet$code$split = oSnippet.code.split("\n")) === null || _oSnippet$code$split === void 0 ? void 0 : _oSnippet$code$split.length) || 3;
+          oEditor.setValue(oSnippet.code);
+          oEditor.setHeight("".concat(iHeight, "rem"));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  });
+}, false);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVudHJ5UGFnZS5jb250cm9sbGVyLnRzIl0sIm5hbWVzIjpbIkNPREVTTklQUEVUUyIsImlkIiwiY29kZSIsInNsaWNlIiwiUGFnZUNvbnRyb2xsZXIiLCJleHRlbmQiLCJvbkluaXQiLCJwcm90b3R5cGUiLCJhcHBseSIsIm9TbmlwcGV0Iiwib0VkaXRvciIsImJ5SWQiLCJpSGVpZ2h0Iiwic3BsaXQiLCJsZW5ndGgiLCJzZXRWYWx1ZSIsInNldEhlaWdodCJdLCJtYXBwaW5ncyI6IjtBQUFBO0FBQ0E7QUFDQTs7Ozs7Ozs7OztBQUNBLE1BQU1BLFlBQVksR0FBRztBQUNwQjtBQUNBO0FBQ0NDLElBQUFBLEVBQUUsRUFBRSxrQkFETDtBQUVDQyxJQUFBQSxJQUFJO0FBQUU7QUFBUyxnT0FZZkMsS0FaZSxDQVlULENBWlMsRUFZTixDQUFDLENBWkssQ0FGaEIsQ0FjYzs7QUFkZCxHQUZvQjtBQW1CcEI7QUFDQTtBQUNDRixJQUFBQSxFQUFFLEVBQUUsY0FETDtBQUVDQyxJQUFBQSxJQUFJO0FBQUU7QUFBVyx5U0FnQmpCQyxLQWhCaUIsQ0FnQlgsQ0FoQlcsRUFnQlIsQ0FBQyxDQWhCTyxDQUZsQixDQWtCYzs7QUFsQmQsR0FwQm9CO0FBeUNwQjtBQUNBO0FBQ0NGLElBQUFBLEVBQUUsRUFBRSxvQkFETDtBQUVDQyxJQUFBQSxJQUFJO0FBQUU7QUFBUyxzTkFTZkMsS0FUZSxDQVNULENBVFMsRUFTTixDQUFDLENBVEssQ0FGaEIsQ0FXYzs7QUFYZCxHQTFDb0I7QUF3RHBCO0FBQ0E7QUFDQ0YsSUFBQUEsRUFBRSxFQUFFLGdCQURMO0FBRUNDLElBQUFBLElBQUk7QUFBRTtBQUFXLHlJQVlqQkMsS0FaaUIsQ0FZWCxDQVpXLEVBWVIsQ0FBQyxDQVpPLENBRmxCLENBY2M7O0FBZGQsR0F6RG9CLENBQXJCO1NBMkVlQyxjQUFjLENBQUNDLE1BQWYsQ0FBc0IscURBQXRCLEVBQTZFO0FBQzNGQyxJQUFBQSxNQUFNLEVBQUUsWUFBVztBQUNsQkYsTUFBQUEsY0FBYyxDQUFDRyxTQUFmLENBQXlCRCxNQUF6QixDQUFnQ0UsS0FBaEMsQ0FBc0MsSUFBdEM7O0FBRGtCLGlEQUdLUixZQUhMO0FBQUE7O0FBQUE7QUFHbEIsNERBQXFDO0FBQUE7O0FBQUEsY0FBMUJTLFFBQTBCO0FBQ3BDLGNBQU1DLE9BQW1CLEdBQUcsS0FBS0MsSUFBTCxDQUFVRixRQUFRLENBQUNSLEVBQW5CLENBQTVCO0FBQ0EsY0FBTVcsT0FBTyxHQUFHLHlCQUFBSCxRQUFRLENBQUNQLElBQVQsQ0FBY1csS0FBZCxDQUFvQixJQUFwQiwrRUFBMkJDLE1BQTNCLEtBQXFDLENBQXJEO0FBQ0FKLFVBQUFBLE9BQU8sQ0FBQ0ssUUFBUixDQUFpQk4sUUFBUSxDQUFDUCxJQUExQjtBQUNBUSxVQUFBQSxPQUFPLENBQUNNLFNBQVIsV0FBcUJKLE9BQXJCO0FBQ0E7QUFSaUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQVNsQjtBQVYwRixHQUE3RSxDIiwic291cmNlUm9vdCI6Ii4iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUGFnZUNvbnRyb2xsZXIgZnJvbSBcInNhcC9mZS9jb3JlL1BhZ2VDb250cm9sbGVyXCI7XG5pbXBvcnQgQ29kZUVkaXRvciBmcm9tIFwic2FwL3VpL2NvZGVlZGl0b3IvQ29kZUVkaXRvclwiO1xuXG5jb25zdCBDT0RFU05JUFBFVFMgPSBbXG5cdC8qIDEuKSBFeHRlbmQgc2FwLmZlLkFwcENvbXBvbmVudCBpbnN0ZWFkIG9mIHRoZSBVSTUgQ29yZSBDb21wb25lbnQgKi9cblx0e1xuXHRcdGlkOiBcImNvZGVBcHBDb21wb25lbnRcIixcblx0XHRjb2RlOiAvKiBqcyAqLyBgXG5cbnNhcC51aS5kZWZpbmUoWydzYXAvZmUvY29yZS9BcHBDb21wb25lbnQnXSwgZnVuY3Rpb24oQXBwQ29tcG9uZW50KSB7XG5cdCd1c2Ugc3RyaWN0JztcblxuXHRyZXR1cm4gQXBwQ29tcG9uZW50LmV4dGVuZCgneW91ci5hcHBsaWNhdGlvbi5Db21wb25lbnQnLCB7XG5cdFx0bWV0YWRhdGE6IHtcblx0XHRcdG1hbmlmZXN0OiAnanNvbidcblx0XHR9XG5cdH0pO1xufSk7XG5cbmAuc2xpY2UoMiwgLTIpIC8vIHJlbW92ZSBmaXJzdCBhbmQgbGFzdCAyIG5ld2xpbmVzXG5cdH0sXG5cblx0LyogMi4pIEFkYXB0IHRoZSBtYW5pZmVzdCBhbmQgd3JhcCB5b3VyIHZpZXcgaW50byB0aGUgRlBNIENvbXBvbmVudCBwcm92aWRlZCBieSBTQVAgRmlvcmkgZWxlbWVudHMgKi9cblx0e1xuXHRcdGlkOiBcImNvZGVNYW5pZmVzdFwiLFxuXHRcdGNvZGU6IC8qIGpzb24gKi8gYFxuXG5cInRhcmdldHNcIjoge1xuXHRcImVudHJ5UGFnZVwiOiB7XG5cdFx0XCJ0eXBlXCI6IFwiQ29tcG9uZW50XCIsXG5cdFx0XCJpZFwiOiBcImVudHJ5UGFnZVwiLFxuXHRcdFwibmFtZVwiOiBcInNhcC5mZS5jb3JlLmZwbVwiLFxuXHRcdFwib3B0aW9uc1wiOiB7XG5cdFx0XHRcInNldHRpbmdzXCI6IHtcblx0XHRcdFx0XCJ2aWV3TmFtZVwiOiBcInlvdXIuY3VzdG9tLnZpZXdcIixcblx0XHRcdFx0XCJjb250ZXh0UGF0aFwiOiBcIi9Sb290RW50aXR5XCJcblx0XHRcdH1cblx0XHR9XG5cdH1cbn1cblxuYC5zbGljZSgyLCAtMikgLy8gcmVtb3ZlIGZpcnN0IGFuZCBsYXN0IDIgbmV3bGluZXNcblx0fSxcblxuXHQvKiAzLikgRXh0ZW5kIHRoZSBzYXAuZmUuUGFnZUNvbnRyb2xsZXIgaW5zdGVhZCBvZiB0aGUgVUk1IE1WQyBDb250cm9sbGVyICovXG5cdHtcblx0XHRpZDogXCJjb2RlUGFnZUNvbnRyb2xsZXJcIixcblx0XHRjb2RlOiAvKiBqcyAqLyBgXG5cbnNhcC51aS5kZWZpbmUoW1wic2FwL2ZlL2NvcmUvUGFnZUNvbnRyb2xsZXJcIl0sIGZ1bmN0aW9uKFBhZ2VDb250cm9sbGVyKSB7XG5cdFwidXNlIHN0cmljdFwiO1xuXG5cdHJldHVybiBQYWdlQ29udHJvbGxlci5leHRlbmQoXCJzYXAuZmUuY29yZS5mcG1FeHBsb3Jlci5ndWlkYW5jZUZyZWVzdHlsZS5EZXRhaWxQYWdlXCIsIHtcblx0fSk7XG59KTtcblxuYC5zbGljZSgyLCAtMikgLy8gcmVtb3ZlIGZpcnN0IGFuZCBsYXN0IDIgbmV3bGluZXNcblx0fSxcblxuXHQvKiBBZGRpbmcgc2FwLmZlLm1hY3JvcyBsaWJyYXJ5IGFzIGEgZGVwZW5kZW50IGxpYnJhcnkgKi9cblx0e1xuXHRcdGlkOiBcImNvZGVEZXBlbmRlbmN5XCIsXG5cdFx0Y29kZTogLyoganNvbiAqLyBgXG5cblwic2FwLnVpNVwiOiB7XG5cdFwiZGVwZW5kZW5jaWVzXCI6IHtcblx0XHRcImxpYnNcIjoge1xuXHRcdFx0Li4uLFxuXHRcdFx0XCJzYXAuZmUubWFjcm9zXCI6IHt9XG5cdFx0XHQuLi4sXG5cdFx0fVxuXHR9XG59XG5cbmAuc2xpY2UoMiwgLTIpIC8vIHJlbW92ZSBmaXJzdCBhbmQgbGFzdCAyIG5ld2xpbmVzXG5cdH1cbl07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2VDb250cm9sbGVyLmV4dGVuZChcInNhcC5mZS5jb3JlLmZwbUV4cGxvcmVyLmd1aWRhbmNlRnJlZXN0eWxlLkVudHJ5UGFnZVwiLCB7XG5cdG9uSW5pdDogZnVuY3Rpb24oKSB7XG5cdFx0UGFnZUNvbnRyb2xsZXIucHJvdG90eXBlLm9uSW5pdC5hcHBseSh0aGlzKTtcblxuXHRcdGZvciAoY29uc3Qgb1NuaXBwZXQgb2YgQ09ERVNOSVBQRVRTKSB7XG5cdFx0XHRjb25zdCBvRWRpdG9yOiBDb2RlRWRpdG9yID0gdGhpcy5ieUlkKG9TbmlwcGV0LmlkKSBhcyBDb2RlRWRpdG9yO1xuXHRcdFx0Y29uc3QgaUhlaWdodCA9IG9TbmlwcGV0LmNvZGUuc3BsaXQoXCJcXG5cIik/Lmxlbmd0aCB8fCAzO1xuXHRcdFx0b0VkaXRvci5zZXRWYWx1ZShvU25pcHBldC5jb2RlKTtcblx0XHRcdG9FZGl0b3Iuc2V0SGVpZ2h0KGAke2lIZWlnaHR9cmVtYCk7XG5cdFx0fVxuXHR9XG59KTtcbiJdfQ==

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/guidance/guidanceFreestyle/EntryPage.controller.ts ADDED Viewed

@@ -0,0 +1,90 @@
+import PageController from "sap/fe/core/PageController";
+import CodeEditor from "sap/ui/codeeditor/CodeEditor";
+const CODESNIPPETS = [
+	/* 1.) Extend sap.fe.AppComponent instead of the UI5 Core Component */
+	{
+		id: "codeAppComponent",
+		code: /* js */ `
+sap.ui.define(['sap/fe/core/AppComponent'], function(AppComponent) {
+	'use strict';
+	return AppComponent.extend('your.application.Component', {
+		metadata: {
+			manifest: 'json'
+		}
+	});
+});
+`.slice(2, -2) // remove first and last 2 newlines
+	},
+	/* 2.) Adapt the manifest and wrap your view into the FPM Component provided by SAP Fiori elements */
+	{
+		id: "codeManifest",
+		code: /* json */ `
+"targets": {
+	"entryPage": {
+		"type": "Component",
+		"id": "entryPage",
+		"name": "sap.fe.core.fpm",
+		"options": {
+			"settings": {
+				"viewName": "your.custom.view",
+				"contextPath": "/RootEntity"
+			}
+		}
+	}
+}
+`.slice(2, -2) // remove first and last 2 newlines
+	},
+	/* 3.) Extend the sap.fe.PageController instead of the UI5 MVC Controller */
+	{
+		id: "codePageController",
+		code: /* js */ `
+sap.ui.define(["sap/fe/core/PageController"], function(PageController) {
+	"use strict";
+	return PageController.extend("sap.fe.core.fpmExplorer.guidanceFreestyle.DetailPage", {
+	});
+});
+`.slice(2, -2) // remove first and last 2 newlines
+	},
+	/* Adding sap.fe.macros library as a dependent library */
+	{
+		id: "codeDependency",
+		code: /* json */ `
+"sap.ui5": {
+	"dependencies": {
+		"libs": {
+			...,
+			"sap.fe.macros": {}
+			...,
+		}
+	}
+}
+`.slice(2, -2) // remove first and last 2 newlines
+	}
+];
+export default PageController.extend("sap.fe.core.fpmExplorer.guidanceFreestyle.EntryPage", {
+	onInit: function() {
+		PageController.prototype.onInit.apply(this);
+		for (const oSnippet of CODESNIPPETS) {
+			const oEditor: CodeEditor = this.byId(oSnippet.id) as CodeEditor;
+			const iHeight = oSnippet.code.split("\n")?.length || 3;
+			oEditor.setValue(oSnippet.code);
+			oEditor.setHeight(`${iHeight}rem`);
+		}
+	}
+});

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/guidance/guidanceFreestyle/EntryPage.view.xml CHANGED Viewed

@@ -20,7 +20,7 @@
 					text="You must change your Component.js file to extend the SAP Fiori elements AppComponent instead of the UI5 Core Component. This ensures that your app will run within the SAP Fiori elements framework."
 				/>
-				<code:CodeEditor class="sapUiTinyMargin" id="codeAppComponent" lineNumbers="false" type="javascript" editable="false" height="150px" />
+				<code:CodeEditor class="sapUiTinyMargin" id="codeAppComponent" lineNumbers="false" type="javascript" editable="false" />
 			</Panel>
@@ -31,7 +31,7 @@
 					text="In the manifest, you must wrap each view in which you want to use the building blocks provided by SAP Fiori elements into the FPM component provided by SAP Fiori elements. SAP Fiori elements needs the context path as the pointer to the metadata path."
 				/>
-				<code:CodeEditor class="sapUiTinyMargin" id="codeManifest" lineNumbers="false" type="json" editable="false" height="210px" />
+				<code:CodeEditor class="sapUiTinyMargin" id="codeManifest" lineNumbers="false" type="json" editable="false" />
 				<Text
 					class="sapUiTinyMargin"
@@ -45,7 +45,7 @@
 					text="Extend the page controller of SAP Fiori elements instead of the UI5 MVC controller. Adapt the view controller of your custom page as follows:"
 				/>
-				<code:CodeEditor class="sapUiTinyMargin" id="codePageController" lineNumbers="false" type="js" editable="false" height="100px" />
+				<code:CodeEditor class="sapUiTinyMargin" id="codePageController" lineNumbers="false" type="js" editable="false" />
 			</Panel>
 			<Panel headerText="You can now use the building blocks provided by SAP Fiori elements.">
@@ -74,6 +74,15 @@
 					text="The building blocks provided by SAP Fiori elements require a 'UI' model with an isEditMode property. If you don't use the editFlow controller extension our framework provides, you must set this property yourself. If you want to use a building block in edit mode independent of the UI model, for example when using a dialog, you can explicitly set readOnly to false. Note that this also overrides the field control."
 				/>
 			</Panel>
+			<Panel headerText="Adding sap.fe.macros library as a dependent library">
+				<Text
+					class="sapUiTinyMargin"
+					text="To benefit from performance optimizations, SAP Fiori elements recommends that you add the sap.fe.macros library as a dependency to your application. Doing so ensures the sap.fe.macros library that contains the building blocks provided by SAP Fiori elements is preloaded. To achieve this, enhance the manifest.json of your application as shown in the following sample code:"
+				/>
+				<code:CodeEditor class="sapUiTinyMargin" id="codeDependency" lineNumbers="false" type="json" editable="false" />
+			</Panel>
 		</content>
 	</Page>
 </mvc:View>

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableCustoms/Page.controller.js CHANGED Viewed

@@ -28,6 +28,10 @@ sap.ui.define(["sap/fe/core/PageController", "sap/ui/model/json/JSONModel", "sap
 		},
 		onPressInColumn(oEvent) {
 			MessageBox.show("You pressed the custom action in the table");
+		},
+		onTableSelectionChanged(oEvent) {
+			var oTable = this.byId("LineItemTableRowPress");
+			MessageBox.show("Selection has changed. " + oTable.getSelectedContexts().length + " rows are selected.");
 		}
 	});
 });

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableCustoms/Page.view.xml CHANGED Viewed

@@ -26,9 +26,15 @@
 								</macros:Column>
 							</macros:columns>
 						</macros:Table>
-					</Panel>
-					<Panel headerText="Table with Custom Handler for Event 'Row Press'">
-						<macros:Table metaPath="@com.sap.vocabularies.UI.v1.LineItem" readOnly="true" id="LineItemTableRowPress" rowPress=".onRowPressed">
+					</Panel>
+					<Panel headerText="Table with Custom Handlers for Events 'Row Press' and 'Selection Change'">
+						<macros:Table
+							metaPath="@com.sap.vocabularies.UI.v1.LineItem"
+							readOnly="true"
+							id="LineItemTableRowPress"
+							rowPress=".onRowPressed"
+							selectionChange=".onTableSelectionChanged"
+						>
 						</macros:Table>
 					</Panel>
 				</Panel>

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableFilterBar/Component.js ADDED Viewed

@@ -0,0 +1,36 @@
+sap.ui.define(["test/sap/fe/test/mockserver/MockServer", "sap/fe/core/AppComponent", "sap/ui/core/Component"], function(
+	MockServer,
+	AppComponent,
+	Component
+) {
+	"use strict";
+	var oMockServer = MockServer.register({
+		generateMockData: false,
+		urlBasePath: "/sap/fe/core/mock",
+		name: "tableFilterBar",
+		// metadataXmlPath: "sap/fe/core/fpmExplorer/fieldDisplay/localService/metadata.xml",
+		metadataCdsPath: "sap/fe/core/fpmExplorer/tableFilterBar/localService/service.cds",
+		cdsServiceName: "sap.fe.core.FieldDisplay",
+		mockdataRootPath: "sap/fe/core/fpmExplorer/tableFilterBar/localService"
+	});
+	// Disable flex
+	Component._fnOnInstanceCreated = null;
+	// Disable web worker (fixing EXCEL export)
+	sap.ui.disableExportWorkers = true;
+	return AppComponent.extend("sap.fe.core.fpmExplorer.tableFilterBar.Component", {
+		metadata: {
+			manifest: "json"
+		},
+		init: function() {
+			this.oMockServer = oMockServer;
+			AppComponent.prototype.init.apply(this, arguments);
+		},
+		onServicesStarted: function() {
+			AppComponent.prototype.onServicesStarted.apply(this, arguments);
+			if (window.parent) {
+				window.parent.postMessage("sampleLoaded");
+			}
+		}
+	});
+});

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableFilterBar/TableFilterBar.controller.js ADDED Viewed

@@ -0,0 +1,5 @@
+sap.ui.define(["sap/fe/core/PageController", "sap/ui/model/json/JSONModel"], function(PageController, JSONModel) {
+	"use strict";
+	return PageController.extend("sap.fe.core.fpmExplorer.tableFilterBar.TableFilterBar", {});
+});

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableFilterBar/TableFilterBar.view.xml ADDED Viewed

@@ -0,0 +1,11 @@
+<mvc:View
+	xmlns="sap.m"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns:macros="sap.fe.macros"
+	controllerName="sap.fe.core.fpmExplorer.tableFilterBar.TableFilterBar"
+>
+	<Panel headerText="Table in Display Mode with FilterBar">
+		<macros:FilterBar metaPath="@com.sap.vocabularies.UI.v1.SelectionFields#SF1" id="FilterBar" />
+		<macros:Table metaPath="@com.sap.vocabularies.UI.v1.LineItem" displayMode="true" id="LineItemTable" filterBar="FilterBar" />
+	</Panel>
+</mvc:View>

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableFilterBar/localService/RootEntity.json ADDED Viewed

@@ -0,0 +1,102 @@
+[
+	{
+		"ID": 1,
+		"StringProperty": "Hello",
+		"NumberProperty": 78.777,
+		"IntegerProperty": 89,
+		"DateProperty": "2022-03-03",
+		"TimeProperty": "21:45:00",
+		"BooleanProperty": false,
+		"PropertyWithUnit": 42,
+		"PropertyWithCurrency": "215232",
+		"Unit": "KG",
+		"Currency": "JPY",
+		"TextProperty": "Description",
+		"TextArrangementTextOnlyProperty": "Value",
+		"TextArrangementTextFirstProperty": "Value",
+		"TextArrangementTextLastProperty": "Value",
+		"TextArrangementTextSeparateProperty": "Value",
+		"PropertyWithValueHelp": "Value3",
+		"Criticality": 0
+	},
+	{
+		"ID": 2,
+		"StringProperty": "Good morning",
+		"NumberProperty": 75.41,
+		"IntegerProperty": 39,
+		"DateProperty": "2021-03-03",
+		"TimeProperty": "09:45:00",
+		"BooleanProperty": false,
+		"PropertyWithUnit": 10,
+		"PropertyWithCurrency": "232.05",
+		"Unit": "KG",
+		"Currency": "EUR",
+		"TextProperty": "Description",
+		"TextArrangementTextOnlyProperty": "Value",
+		"TextArrangementTextFirstProperty": "Value",
+		"TextArrangementTextLastProperty": "Value",
+		"TextArrangementTextSeparateProperty": "Value",
+		"PropertyWithValueHelp": "Value2",
+		"Criticality": 1
+	},
+	{
+		"ID": 3,
+		"StringProperty": "Bye",
+		"NumberProperty": 8.12,
+		"IntegerProperty": 9,
+		"DateProperty": "2020-12-03",
+		"TimeProperty": "21:37:00",
+		"BooleanProperty": false,
+		"PropertyWithUnit": 10,
+		"PropertyWithCurrency": "5232",
+		"Unit": "KG",
+		"Currency": "JPY",
+		"TextProperty": "Description",
+		"TextArrangementTextOnlyProperty": "Value",
+		"TextArrangementTextFirstProperty": "Value",
+		"TextArrangementTextLastProperty": "Value",
+		"TextArrangementTextSeparateProperty": "Value",
+		"PropertyWithValueHelp": "Value3",
+		"Criticality": 2
+	},
+	{
+		"ID": 4,
+		"StringProperty": "Sup",
+		"NumberProperty": 17.7,
+		"IntegerProperty": 11,
+		"DateProperty": "2019-03-01",
+		"TimeProperty": "04:41:12",
+		"BooleanProperty": true,
+		"PropertyWithUnit": 10,
+		"PropertyWithCurrency": "5232",
+		"Unit": "KG",
+		"Currency": "JPY",
+		"TextProperty": "Description",
+		"TextArrangementTextOnlyProperty": "Value",
+		"TextArrangementTextFirstProperty": "Value",
+		"TextArrangementTextLastProperty": "Value",
+		"TextArrangementTextSeparateProperty": "Value",
+		"PropertyWithValueHelp": "Value1",
+		"Criticality": 3
+	},
+	{
+		"ID": 5,
+		"StringProperty": "Sup",
+		"NumberProperty": 13.145,
+		"IntegerProperty": 15,
+		"DateProperty": "2019-03-01",
+		"TimeProperty": "04:41:12",
+		"BooleanProperty": true,
+		"PropertyWithUnit": 10,
+		"PropertyWithCurrency": "5232",
+		"Unit": "KG",
+		"Currency": "USD",
+		"TextProperty": "Description",
+		"TextArrangementTextOnlyProperty": "Value",
+		"TextArrangementTextFirstProperty": "Value",
+		"TextArrangementTextLastProperty": "Value",
+		"TextArrangementTextSeparateProperty": "Value",
+		"PropertyWithValueHelp": "Value1",
+		"Criticality": 5
+	}
+]

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableFilterBar/localService/ValueHelpEntity.js ADDED Viewed

@@ -0,0 +1,11 @@
+sap.ui.define([], function() {
+	"use strict";
+	var aMockData = [];
+	for (var i = 0; i < 50; i++) {
+		aMockData.push({
+			"KeyProp": "Value" + i,
+			"Description": "Description for Value" + i
+		});
+	}
+	return aMockData;
+});

package/packages/sap.fe.core/test/sap/fe/core/fpmExplorer/topics/buildingBlocks/table/tableFilterBar/localService/service.cds ADDED Viewed

@@ -0,0 +1,94 @@
+using {cuid, managed} from '@sap/cds/common';
+namespace sap.fe.core;
+entity RootEntity {
+    key ID                                		: Integer @Common.Label : 'ID';
+    StringProperty                              : String @Common.Label: 'String Property';
+    IntegerProperty                             : Integer @Common.Label: 'Integer Property';
+    NumberProperty                              : Decimal(4, 2) @Common.Label: 'Number Property';
+    BooleanProperty                             : Boolean @Common.Label: 'Boolean Property';
+    DateProperty                              	: Date @Common.Label: 'Date Property';
+    TimeProperty                              	: Time @Common.Label: 'Time Property';
+    PropertyWithUnit                    	  	: Integer64	@Common.Label: 'Property With Unit' @Measures.Unit : Unit;
+    PropertyWithCurrency                   	  	: Integer64	@Common.Label: 'Property With Currency' @Measures.ISOCurrency : Currency;
+    Unit                            			: String;
+    Currency                             		: String;
+    TextProperty                             	: String;
+    TextArrangementTextOnlyProperty				: String 	@Common : {
+																		  Text            : TextProperty,
+																		  TextArrangement : #TextOnly
+																	  };
+	TextArrangementTextLastProperty				: String 	@Common : {
+																			  Text            : TextProperty,
+																			  TextArrangement : #TextLast
+																		  };
+	TextArrangementTextFirstProperty				: String 	@Common : {
+																			  Text            : TextProperty,
+																			  TextArrangement : #TextFirst
+																		  };
+	TextArrangementTextSeparateProperty				: String 	@Common : {
+    																			  Text            : TextProperty,
+    																			  TextArrangement : #TextSeparate
+    																		  };
+	  PropertyWithValueHelp				 : String @(
+		  Common         : {
+		  	  Label : 'Property with Value Help',
+			  ValueList                : {
+				  Label          : 'Value with Value Help',
+				  CollectionPath : 'ValueHelpEntity',
+				  Parameters     : [
+					  {
+						  $Type             : 'Common.ValueListParameterInOut',
+						  LocalDataProperty : PropertyWithValueHelp,
+						  ValueListProperty : 'KeyProp'
+					  },
+					  {
+						  $Type             : 'Common.ValueListParameterDisplayOnly',
+						  ValueListProperty : 'Description'
+					  }
+				  ]
+			  }
+		  });
+	Criticality : Integer;
+}
+annotate RootEntity with @(UI : {
+	SelectionFields #SF1: [
+			StringProperty,
+			IntegerProperty
+	],
+    LineItem                       : {
+    ![@UI.Criticality]: Criticality,
+    $value : [
+    	{Value : ID},
+    	{Value : IntegerProperty},
+    	{Value : NumberProperty},
+    	{Value : StringProperty},
+    	{Value : BooleanProperty},
+    	{Value : TextArrangementTextFirstProperty},
+    	{Value: PropertyWithValueHelp}
+    ]}
+});
+entity ValueHelpEntity  @(cds.autoexpose) {
+    key KeyProp      : String(1) @(
+		Common : {
+			Text            : Description,
+			TextArrangement : #TextFirst
+		},
+		title  : 'Value Help Key'
+	);
+	Description : String(20)@(
+		Core.Immutable : true,
+		Common         : {
+			Label     : 'Value Help Description'
+		}
+	);
+}
+service FieldDisplay {
+	@odata.draft.enabled
+    entity RootEntity as projection on core.RootEntity;
+	entity ValueHelpEntity as projection on core.ValueHelpEntity;
+}