OpenUI5 Documentation Update 21.11.2024

SAP · Nov 21, 2024 · 9911fb2 · 9911fb2
1 parent 8e7ca12
commit 9911fb2
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 54 deletions.
diff --git a/docs/0index.md b/docs/0index.md
@@ -806,6 +806,7 @@ OpenUI5 Version for the OpenUI5 Demo Kit
         -   [Semantic Pages](Semantic_Pages_84f3d52.md)
             -   [Semantic Page \(sap.f\)](Semantic_Page_sap_f_47dc868.md)
             -   [Semantic Page \(sap.m\)](Semantic_Page_sap_m_4a97a07.md)
+        -   [Pages: Which One Should I Choose?](Pages_Which_One_Should_I_Choose_8a860c0.md)
         -   [Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md)
         -   [Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md)
         -   [sap.f](sap_f_0b455b0.md)

diff --git a/docs/More_About_Controls_3ec6808.md b/docs/More_About_Controls_3ec6808.md
@@ -36,6 +36,11 @@ OpenUI5 offers the possibility to hyphenate words in multiline texts when contro
 -   **[Semantic Pages](Semantic_Pages_84f3d52.md "The semantic page controls help the app designers and developers implement and comply
 		with the SAP Fiori design guidelines more easily.")**  
 The semantic page controls help the app designers and developers implement and comply with the SAP Fiori design guidelines more easily.
+-   **[Pages: Which One Should I Choose?](Pages_Which_One_Should_I_Choose_8a860c0.md "OpenUI5 applications are used in different environments: They can either be
+		embedded within shells that come with their own header or they are displayed standalone without such a shell around them. This has
+		implications on how the header area of an OpenUI5 application should look
+		like.")**  
+OpenUI5 applications are used in different environments: They can either be embedded within shells that come with their own header or they are displayed standalone without such a shell around them. This has implications on how the header area of an OpenUI5 application should look like.
 -   **[Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md "The libraries provided by OpenUI5 contain various
 		different table controls that are suitable for different use cases. The table below outlines
 		which table controls are available, and what features are supported by each one.")**  

diff --git a/docs/Pages_Which_One_Should_I_Choose_8a860c0.md b/docs/Pages_Which_One_Should_I_Choose_8a860c0.md
@@ -0,0 +1,55 @@
+<!-- loio8a860c05f38145029c4dcab75ac11ba7 -->
+
+| loio |
+| -----|
+| 8a860c05f38145029c4dcab75ac11ba7 |
+
+<div id="loio">
+
+view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/8a860c05f38145029c4dcab75ac11ba7) | [demo kit latest release](https://sdk.openui5.org/topic/8a860c05f38145029c4dcab75ac11ba7)</div>
+
+## Pages: Which One Should I Choose?
+
+OpenUI5 applications are used in different environments: They can either be embedded within shells that come with their own header or they are displayed standalone without such a shell around them. This has implications on how the header area of an OpenUI5 application should look like.
+
+***
+
+<a name="loio8a860c05f38145029c4dcab75ac11ba7__section_s33_lmb_ffb"/>
+
+### Standalone App
+
+A **standalone OpenUI5 application** could use an `sap.m.Page` control as the root control of its views. The `Page` control provides a visually distinguished header bar with space for an application \(or page\) title and has a built-in *Back* button allowing the user to navigate back to the previous page. You can enable the *Back* button by setting the `Page`'s `showNavButton` property to `true`.
+
+***
+
+<a name="loio8a860c05f38145029c4dcab75ac11ba7__section_dtc_x2m_3fb"/>
+
+### Embedded App
+
+On the other hand, an **embedding shell** \(like SAP Build Work Zone or the SAP Fiori launchpad\) might already come with its own header containing a *Back* button and space for a title. Using an `sap.m.Page` control would then lead to a duplicate header and possibly even duplicate*Back* buttons.
+
+The `sap.f.DynamicPage` control could be your preferred alternative in such a scenario as it comes without a header bar and *Back* button but still offers the option to configure a title if needed, as well as many other features on top of a plain `sap.m.Page`.
+
+Further alternatives are `sap.f.semantic.SemanticPage` and `sap.uxap.ObjectPageLayout`, depending on your use case. Note that these are part of control libraries other than `sap.m`, so you would need to add the respective library to your application setup. For some scenarios, the `sap.tnt.ToolPage` may also be a suitable alternative. But you could also configure the `sap.m.Page` to have its header hidden.
+
+***
+
+<a name="loio8a860c05f38145029c4dcab75ac11ba7__section_pln_lng_ldc"/>
+
+### Conclusion
+
+There is no one-size-fits-all recommendation on which page type to use for your app, so it’s important to be aware of the above considerations. For further guidance, refer to the [SAP Fiori for Web Design Guidelines regarding page layouts and floorplans](https://experience.sap.com/fiori-design-web/floorplan-overview/).
+
+**Related Information**  
+
+
+[API Reference: sap.m.Page](https://sdk.openui5.org/api/sap.m.Page)
+
+[API Reference: sap.f.DynamicPage](https://sdk.openui5.org/api/sap.f.DynamicPage)
+
+[API Reference: sap.f.semantic.SemanticPage](https://sdk.openui5.org/api/sap.f.semantic.SemanticPage)
+
+[API Reference: sap.uxap.ObjectPageLayout](https://sdk.openui5.org/api/sap.uxap.ObjectPageLayout)
+
+[API Reference: sap.tnt.ToolPage](https://sdk.openui5.org/api/sap.tnt.ToolPage)
+
diff --git a/docs/Step_23_Filtering_5295470.md b/docs/Step_23_Filtering_5295470.md
@@ -77,9 +77,7 @@ sap.ui.define([
 ], (Controller, JSONModel, Filter, FilterOperator) => {
 	"use strict";
 
-	return Controller.extend("ui5.walkthrough.controller.InvoiceList", {
-		formatter: formatter, 
-
+	return Controller.extend("ui5.walkthrough.controller.InvoiceList", { 
 		onInit() {
 			const oViewModel = new JSONModel({
 				currency: "EUR"

diff --git a/docs/Step_28_Integration_Test_with_OPA_9bf4dce.md b/docs/Step_28_Integration_Test_with_OPA_9bf4dce.md
@@ -148,70 +148,44 @@ In the assertions section we define a `waitFor` statement that checks if a `sap.
 
 <a name="loio9bf4dce43b7943d0909cd6c58a933589__section_srf_xpc_yfb"/>
 
-### webapp/test/integration/opaTests.qunit.html \(New\)
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Integration tests for the UI5 Walkthrough</title>
-	<meta charset="utf-8">
-
-	<script
-		id="sap-ui-bootstrap"
-		src="../../resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
-		data-sap-ui-resource-roots='{
-			"ui5.walkthrough": "../../"
-		}'
-		data-sap-ui-compat-version="edge"
-		data-sap-ui-async="true">
-	</script>
-
-	<link rel="stylesheet" type="text/css" href="../../resources/sap/ui/thirdparty/qunit-2.css">
-
-	<script src="../../resources/sap/ui/thirdparty/qunit-2.js"></script>
-	<script src="../../resources/sap/ui/qunit/qunit-junit.js"></script>
-
-	<script src="opaTests.qunit.js"></script>
-</head>
-<body>
-	<div id="qunit"></div>
-	<div id="qunit-fixture"></div>
-</body>
-</html>
-```
+### webapp/test/integration/opaTests.qunit.js \(New\)
 
-This file contains our test suite for all OPA tests of the app. We use the same namespace as for our application.
+We create a new `opaTests.qunit.js` file under `webapp/test/integration/`.
 
-Then we load the basic QUnit functionality via script tags from OpenUI5 so that we can execute the test journey. The `NavigationJourney` we defined above will be loaded via a script called `opaTests.qunit.js`:
+This module imports our `NavigationJourney` and is the entrypoint for all integration tests in the project.
+
+```js
+sap.ui.define([
+	"./NavigationJourney"
+]);
+```
 
 ***
 
 <a name="loio9bf4dce43b7943d0909cd6c58a933589__section_trf_xpc_yfb"/>
 
-### webapp/test/integration/opaTests.qunit.js \(New\)
+### webapp/test/testsuite.qunit.js
 
-```js
-QUnit.config.autostart = false;
+Finally we reference the new `integration/opaTests.qunit.js` in the `testsuite.qunit.js` file. The `.qunit.js` extension is omitted and will be added automatically during runtime.
 
-sap.ui.require(["sap/ui/core/Core"], async(Core) => {
+```js
+sap.ui.define(() => {
 	"use strict";
-
-	await Core.ready();
-
-	sap.ui.require([
-		"ui5/walkthrough/localService/mockserver",
-		"ui5/walkthrough/test/integration/NavigationJourney"
-	], (mockserver) => {
-		// initialize the mock server
-		mockserver.init();
-		QUnit.start();
-	});
+	return {
+		// ...
+		tests: {
+			"unit/unitTests": {
+				title: "UI5 Walkthrough - Unit Tests"
+			},
+			"integration/opaTests": {
+				title: "UI5 Walkthrough - Integration Tests"
+			}
+		}
+	};
 });
 ```
 
-This script loads the `NavigationJourney`, and the test functions inside are immediately executed. When you call the `webapp/test/integration/opaTests.qunit.html` page of your project on the server, you should see the QUnit layout and a test “Should see the Hello dialog” is executed immediately. It will load the app component on the right side of the page. There you can see what operations the test is performing on the app, if everything works correctly the button click is triggered, then a dialog is shown and the test case is green.
+If we now open the `webapp/test/testsuite.qunit.html` file in the browser and select `integration/opaTests`, the QUnit layout should appear and a test “Should see the Hello dialog” will run immediately. This action will load the app component on the right side of the page. There you can see the operations the test is performing on the app. If everything works correctly, a button click will be triggered, then a dialog will be displayed and the test case will be green.
 
 ***
 

diff --git a/docs/index.json b/docs/index.json
@@ -2651,6 +2651,9 @@
 							}
 						}
 					},
+					"Pages: Which One Should I Choose?": {
+						"link": "Pages_Which_One_Should_I_Choose_8a860c0.md"
+					},
 					"Tables: Which One Should I Choose?": {
 						"link": "Tables_Which_One_Should_I_Choose_148892f.md"
 					},

diff --git a/docs/index.md b/docs/index.md
@@ -806,6 +806,7 @@ OpenUI5 Version for the OpenUI5 Demo Kit
         -   [Semantic Pages](Semantic_Pages_84f3d52.md)
             -   [Semantic Page \(sap.f\)](Semantic_Page_sap_f_47dc868.md)
             -   [Semantic Page \(sap.m\)](Semantic_Page_sap_m_4a97a07.md)
+        -   [Pages: Which One Should I Choose?](Pages_Which_One_Should_I_Choose_8a860c0.md)
         -   [Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md)
         -   [Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md)
         -   [sap.f](sap_f_0b455b0.md)

diff --git a/docs/sidebar.md b/docs/sidebar.md
@@ -800,6 +800,7 @@
         -   [Semantic Pages](Semantic_Pages_84f3d52.md)
             -   [Semantic Page \(sap.f\)](Semantic_Page_sap_f_47dc868.md)
             -   [Semantic Page \(sap.m\)](Semantic_Page_sap_m_4a97a07.md)
+        -   [Pages: Which One Should I Choose?](Pages_Which_One_Should_I_Choose_8a860c0.md)
         -   [Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md)
         -   [Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md)
         -   [sap.f](sap_f_0b455b0.md)