OpenUI5 Documentation Update 20.08.2024

docs/Basic_Example_How_to_Use_Gherkin_4b0c519.md

@@ -93,16 +93,9 @@ sap.ui.define([
 
 ```
 
-To execute Gherkin tests, you need to find a version of SAPUI5 or OpenUI5 that works for you. Here are some possibilities with different stability:
+To execute Gherkin tests, you need to find a version of SAPUI5 or OpenUI5 that works for you. Our examples all use the nightly build from the OpenUI5 Content Delivery Network:
 
--   Stable: `https://sdk.openui5.org/resources/sap-ui-core.js`
-
--   Stable: `https://sdk.openui5.org/resources/sap-ui-core.js`
-
--   Nightly: `https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js`
-
-
-Our examples all use the nightly OpenUI5 build.
+`https://sdk.openui5.org/nightly/resources/sap-ui-core.js`
 
 ***
 
@@ -119,7 +112,7 @@ Here is a sample HTML bootstrap file for Gherkin. In this example, the feature f
 
     <script
       id="sap-ui-bootstrap"
-      src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
+      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
       data-sap-ui-resource-roots='{"GherkinWithOPA5": "./"}'
       data-sap-ui-log-level="INFO"
     ></script>
@@ -241,7 +234,7 @@ Here is a simple stub for a test Web site \(you may need to update the bootstrap
     <title>Using Gherkin with OPA5 Website</title>
     <script
       id="sap-ui-bootstrap"
-      src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
+      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
       data-sap-ui-libs="sap.m,sap.ui.layout"
     ></script>
     <script src="WebsiteCode.js"></script>

docs/Bootstrapping_Loading_and_Initializing_a04b0d1.md

@@ -12,7 +12,7 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/a04b0d
 
 To use OpenUI5 features in your HTML page, you have to load and initialize the SAPUI5 library.
 
-You can use the OpenUI5 bootstrap script in your page to initialize OpenUI5 runtime automatically as soon as the script is loaded and executed by the browser. For simple use cases as well as the default OpenUI5 installation, this is sufficient to build and run UIs. In addition to this, you can specify the set of OpenUI5 libraries and the theme used for your application in the configuration settings.
+You can use the OpenUI5 bootstrap script in your page to initialize OpenUI5 runtime automatically as soon as the script is loaded and executed by the browser. For simple use cases as well as the default OpenUI5 installation, this is sufficient to build and run UIs.
 
 > ### Note:  
 > If you run your app standalone, the bootstrap is added to your HTML page. In an SAP Fiori launchpad environment, the launchpad executes the bootstrap and no additional HTML page is needed to display the app.
@@ -21,23 +21,23 @@ The following code snippet shows a typical bootstrap script tag:
 
 ```html
 <script id="sap-ui-bootstrap" 
-     type="text/javascript"
      src="resources/sap-ui-core.js"
-     data-sap-ui-theme="sap_horizon"
-     data-sap-ui-libs="sap.m"
-     data-sap-ui-compat-version="edge">
+     data-sap-ui-async="true"
+     data-sap-ui-on-init="..."
+     data-sap-ui-compat-version="edge"
+     data-sap-ui-resource-roots='{ "my.app": "./" }'>
 </script>
 ```
 
-The attributes `data-sap-ui-theme="sap_horizon"` and `data-sap-ui-libs="sap.m"` already provide examples of how OpenUI5 runtime can be configured to the needs of an application.
+In addition to the above snippet, you can specify a set of OpenUI5 libraries with `data-sap-ui-libs="sap.m, sap.ui.layout, sap.ui.unified, ..."` if there is no manifest.json to declare dependent libraries. More options that can be configured with `data-` can be found in [Configuration Options and URL Parameters](Configuration_Options_and_URL_Parameters_91f2d03.md).
 
 ***
 
 <a name="loioa04b0d10fb494d1cb722b9e341b584ba__section_sct_d5h_4bc"/>
 
 ### `Core.ready` State
 
-After bootstrapping, you can use the `sap/ui/core/Core` singleton to either `await` the Core's `ready` state or provide a callback function:
+After bootstrapping, if `sap-ui-on-init` has not been configured already, you can use the `sap/ui/core/Core` singleton to either `await` the Core's `ready` state or provide a callback function:
 
 ```js
 sap.ui.require(["sap/ui/core/Core"], async (Core) => {

docs/Component_Controller_27ce0e4.md

@@ -14,30 +14,31 @@ The component controller is a script file \(written in either JavaScript or Type
 
 When written in JavaScript, a component controller is defined with the asynchronous module definition \(AMD\) syntax; this does not apply when using TypeScript. In the `sap.ui.define` statement the required dependencies can be declared which can be used in the controller.
 
-To create an OpenUI5 component, you extend either the `Component` or `UIComponent` base class and pass the name of the module \(namespace + `.Component`\).
+To create a component, you extend either the `Component` or `UIComponent` base class and pass the name of the module \(namespace + `.Component`\).
 
 ```js
-sap.ui.define(['sap/ui/core/UIComponent'],
-	function(UIComponent) {
-	"use strict";
-
-	var Component = UIComponent.extend("samples.components.sample.Component", {
-		metadata : {
-			interfaces: [
-				"sap.ui.core.IAsyncContentCreation" 
-			],
-			manifest : "json"
-		}
-	});
-	return Component;
+sap.ui.define([
+  "sap/ui/core/UIComponent"
+], (UIComponent) => {
+  "use strict";
+
+  return UIComponent.extend("my.app.Component", { // given "my.app" being the value of sap.app/id in manifest.json
+    metadata: {
+      interfaces: [
+        "sap.ui.core.IAsyncContentCreation"
+      ],
+      manifest: "json"
+    },
+    // ...
+  });
 });
 ```
 
 The metadata of the component controller should be used to declare the runtime metadata only \(which are the properties, aggregations, associations and events\).
 
 We recommend to define the component metadata externally in the descriptor \(`manifest.json`\), because the descriptor for components is mandatory for modern components and allows performance optimizations.
 
-We recommend to add the `sap.ui.core.IAsyncContentCreation` marker interface when defining a new component. Using this interface allows the component to be created fully asynchronously. This interface will implicitly set the component's `rootView` and router configuration to `async`. Nested views will also be handled asynchronously. Additionally, the error handling during the processing of views is stricter and will fail if a view definition contains errors, e.g. broken binding strings.
+We recommend to add the [`sap.ui.core.IAsyncContentCreation`](https://sdk.openui5.org/api/sap.ui.core.IAsyncContentCreation) marker interface when defining a new component. Using this interface allows the component to be created fully asynchronously. This interface will implicitly set the component's `rootView` and router configuration to `async`. Nested views will also be handled asynchronously. Additionally, the error handling during the processing of views is stricter and will fail if a view definition contains errors, e.g. broken binding strings.
 
 -   **[Component Metadata](Component_Metadata_0187ea5.md "The component class provides specific metadata for components by extending the
 			ManagedObject class. The UIComponent class provides

docs/Create_an_index_html_File_f7cbafc.md

@@ -27,16 +27,14 @@ A minimalistic `index.html` file is needed to test the project configuration. Th
     	<head>
     		<meta charset="utf-8">
     		<title>SAPUI5 Walkthrough</title>
-    		<script
-    			id="sap-ui-bootstrap"
+    		<script id="sap-ui-bootstrap"
     			src="/resources/sap-ui-core.js"
-    			data-sap-ui-theme="sap_horizon"
     			data-sap-ui-libs="sap.m"
     			data-sap-ui-compat-version="edge"
-                   data-sap-ui-async="true"
-                   data-sap-ui-on-init="module:my/app/main"
-                   data-sap-ui-resource-roots='{"my.app": "./"}'
-     			></script>
+    			data-sap-ui-async="true"
+    			data-sap-ui-on-init="module:my/app/main"
+    			data-sap-ui-resource-roots='{"my.app": "./"}'>
+    		</script>
     	</head>
     	<body class="sapUiBody" id="content">
     	</body>
@@ -48,7 +46,7 @@ A minimalistic `index.html` file is needed to test the project configuration. Th
     **main.js**
 
     ```js
-    sap.ui.define(['sap/m/Text'], function(Text) {
+    sap.ui.define(["sap/m/Text"], function(Text) {
         new Text({
             text: "OpenUI5 is loaded successfully!"
         }).placeAt("content");
@@ -59,7 +57,7 @@ A minimalistic `index.html` file is needed to test the project configuration. Th
 > ### Caution:  
 > Adapt the path where the resources are located \(`src="/resources/sap-ui-core.js"`\) according to your installation. For OpenUI5 you can use `src="https://sdk.openui5.org/resources/sap-ui-core.js"`.
 > 
-> You can use this reference to the latest stable version of OpenUI5 for the tutorial or for testing purposes, but never use this for productive use. In an actual app, you always have to specify an OpenUI5 version explicitly.
+> You can use this reference to the latest version of OpenUI5 for the tutorial or for testing purposes, but never use this for productive use. In an actual app, you always have to specify an OpenUI5 version explicitly.
 > 
 > For more information, see [Variant for Bootstrapping from Content Delivery Network](Variant_for_Bootstrapping_from_Content_Delivery_Network_2d3eb2f.md).
 

docs/Declarative_API_for_Initial_Components_82a0fce.md

@@ -18,12 +18,12 @@ The declarative API enables you to define the initially started component direct
 
 ### Using the `ComponentSupport` Module
 
-With the declarative `sap/ui/core/ComponentSupport` API it is possible to define the initially started component directly in the HTML markup instead of the imperative way using JavaScript or TypeScript. The declarative `ComponentSupport` is not activated by default, but must be enabled via the bootstrap:
+With the declarative `sap/ui/core/ComponentSupport` API, you can define the initially started component directly in the HTML markup instead of in the imperative way using JavaScript or TypeScript. The declarative `ComponentSupport` must be enabled via the bootstrap:
 
 ```html
 <!-- index.html -->
 <script id="sap-ui-bootstrap"
-    src="/resources/sap-ui-core.js"
+    src="resources/sap-ui-core.js"
     ...
     data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
     ...>

docs/Deprecated_Factories_Replacement_491bd9c.md

@@ -340,6 +340,7 @@ var aControls = sap.ui.extensionpoint(/*...*/);
 ```
 sap.ui.require(["sap/ui/core/ExtensionPoint"], (ExtensionPoint) => {
     ExtensionPoint.load({ 
+        async: true;
         // ...
     }).then((aControls) => {/*...*/});
 });
@@ -398,7 +399,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller"], (Controller) => {
             //         Any asynchronous behavior must be handled manually.
             this.loadFragment({
                 name: "my.fragment",
-                type: "XML" // or type: "JS"
+                // ...
             }).then((oControl) => {/*...*/});
         }
     });
@@ -411,7 +412,7 @@ If you're instantiating your fragment outside a controller, you can use the stat
 sap.ui.require([
     "sap/ui/core/Component", 
     "sap/ui/core/Fragment"
-    ], (Component, Fragment) => {
+], (Component, Fragment) => {
     // ...
 
     // "oPage" is an exemplary sap.m.Page control

docs/Logging_ebcf60c.md

@@ -28,7 +28,7 @@ Most error messages are sufficient to figure out what has gone wrong, for exampl
 > 
 >     <script
 >       id="sap-ui-bootstrap"
->       src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
+>       src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
 >       data-sap-ui-resource-roots='{"GherkinWithOPA5": "./"}'
 >       data-sap-ui-log-level="INFO">
 >     </script>

docs/Manifest_Model_Preload_26ba6a5.md

@@ -26,9 +26,7 @@ The `preload` flag is located in `manifest.json` under `sap.ui5/models`:
 
 The flag is not active by default, as there are some prerequisites:
 
--   `sap.ui.component` is set to `"async=true"` and `manifest` \(API parameter name of `sap.ui.component`\).
-
--   Make sure that the specific model implementation class \(e.g. `name.of.my.ModelClass`\) is loaded before calling one of the available component factories, e.g. `Component.create` or `sap.ui.core.Component#createComponent`; otherwise the model implementation class will be loaded synchronously.
+-   The component is created asynchronously.
 
 -   As model events \(for example `attachMetadataLoaded`\) may be missed because they are fired before the component coding runs, we recommend using the `Promise` API \(e.g. `metadataLoaded`\) instead, depending on the model type.
 

docs/Methods_Controlling_the_Initial_Instantiation_b430345.md

@@ -67,7 +67,7 @@ You can use the following methods:
 
 
 > ### Note:  
-> The settings passed to the `sap.ui.core.Component.create` or `sap.ui.component` factory calls are not available in the `Init` and `createContent` methods. Use `componentData` instead. For more information, see [`sap.ui.core.Component.create`](https://sdk.openui5.org/api/sap.ui.core.Component/methods/sap.ui.core.Component.create).
+> The settings passed to the `sap.ui.core.Component.create`or `sap.ui.component` factory calls are not available in the `init` and `createContent` methods. Use `componentData` instead. For more information, see [`sap.ui.core.Component.create`](https://sdk.openui5.org/api/sap.ui.core.Component/methods/sap.ui.core.Component.create).
 
 You can also overwrite the getters and setters for component properties in the Component controller.
 

docs/Multiple_Module_Locations_1dfab2e.md

@@ -16,47 +16,39 @@ In web applications, modules can be located in different locations, such as serv
 
 The `sap.ui.loader.config` function associates a module name prefix with a URL prefix. All modules are loaded from the registered URL instead of the standard resource root URL:
 
-```
+```js
 sap.ui.loader.config({
 	paths: {
-		'my/module': 'https://example.com/resources/my/module'
+		"my/module": "https://example.com/resources/my/module"
 	}
 });
 ```
 
 Thus, it is possible to redirect the request for the application-specific modules to the corresponding web application:
 
-```html
-
-	<script src="https://sdk.openui5.org/resources/sap-ui-core.js" ></script>
-
-	<script>
-		// redirect the 'my.webapp' package to the local web app
-		sap.ui.loader.config({
-			paths:{
-				"my/webapp": "my-webapp/resources/my/webapp"
-			}
-		});
-		
-		sap.ui.require([
-			'sap/ui/core/Core',	
-			'my/webapp/MyModule01’	// loads /my-webapp/resources/my/webapp/MyModule01.js
-		], function ( Core, MyModule01 ) {
-
-			//[…] use modules
-		}
-	</script>
+```js
+// redirect the 'my.webapp' package to the local web app
+sap.ui.loader.config({
+	paths: {
+		"my/webapp": "my-webapp/resources/my/webapp"
+	}
+});
+sap.ui.require([
+	"sap/ui/core/Core",	
+	"my/webapp/MyModule01"	// loads /my-webapp/resources/my/webapp/MyModule01.js
+], (Core, MyModule01) => {
+	// … 
+});
 ```
 
 > ### Note:  
 > The registered URL above contains the transformed module name prefix `my/webapp/`. This allows a more flexible packaging of the modules, for example, if you decide to deploy all modules named `my.company.*` to the central URL `http://my.company/shared/` without packaging them into a two level hierarchy of subfolders:
 > 
-> ```
-> 
+> ```js
 > sap.ui.loader.config({
->  	paths:{
->    		"my/company": "http://my.company/shared/"
->       }
+> 	paths: {
+> 		"my/company": "http://my.company/shared/"
+> 	}
 > });
 > ```
 > 

docs/Performance_Speed_Up_Your_App_408b40e.md

@@ -140,14 +140,6 @@ For more information, see:
 
 When creating a component manually, make sure the `manifest.json` descriptor file is loaded first, so that the dependencies are analyzed and preloaded when the component is loaded. For more information, see [Manifest First Function](Descriptor_for_Applications_Components_and_Libraries_manifest_json_be0cf40.md#loiobe0cf40f61184b358b5faedaec98b2da__manifirst).
 
-```js
-// "Component" required from module "sap/ui/core/Component"
-// load manifest.json from default location and evaluate it before creating an instance of the component 
-Component.create({
-  name: "my.component",
-});
-```
-
 ***
 
 <a name="loio408b40efed3c416681e1bd8cdd8910d4__section_LibraryPreloads"/>

docs/Step_27_Unit_Test_with_QUnit_TypeScript_750c8c1.md

@@ -12,7 +12,7 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/750c8c
 
 Now that we have a test folder in the app, we can start to increase our test coverage.
 
-Actually, every feature that we added to the app so far, would require a separate test case. We have totally neglected this so far, so let’s add a simple unit test for our custom formatter function from Step 23. We will test if the long text for our status is correct by comparing it with the texts from our resource bundle.
+Actually, every feature that we added to the app so far, would require a separate test case. We have totally neglected this so far, so let’s add a simple unit test for our custom formatter function from Step 22. We will test if the long text for our status is correct by comparing it with the texts from our resource bundle.
 
 > ### Note:  
 > In this tutorial, we focus on a simple use case for the test implementation. If you want to learn more about QUnit tests, have a look at our [Testing Tutorial](Testing_Tutorial_291c912.md) tutorial, especially [Step 2: A First Unit Test](Step_2_A_First_Unit_Test_b81736e.md).
@@ -47,7 +47,7 @@ We add a new folder `unit` under the `test` folder and a `model` subfolder where
 
 We create a new `formatter.ts` file under `webapp/test/unit/model` where the unit test for the custom formatter is implemented. The `formatter` function that we want to test is from the `formatter.ts` file located in the `webapp/model` folder.
 
-The new formatter file just contains one QUnit module for our formatter function and one unit test for the formatter function. In the implementation of the `statusText` function that we created in Step 23, we use the translated texts when calling the formatter. As we do not want to test the OpenUI5 binding functionality, we just use text in the test instead of a `ResourceBundle`.
+The new formatter file just contains one QUnit module for our formatter function and one unit test for the formatter function. In the implementation of the `statusText` function that we created in Step 22, we use the translated texts when calling the formatter. As we do not want to test the OpenUI5 binding functionality, we just use text in the test instead of a `ResourceBundle`.
 
 Finally, we perform our assertions. We check each branch of the formatter logic by invoking the isolated formatter function with the values that we expect in the data model \(`A`, `B`, `C`, and everything else\). We strictly compare the result of the formatter function with the hard-coded strings that we expect from the resource bundle and give a meaningful error message if the test should fail.