diff --git a/docs/Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md b/docs/Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md
index 28dc522e..02c0d1df 100644
--- a/docs/Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md
+++ b/docs/Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md
@@ -58,7 +58,7 @@ To download the code from the Demo Kit, follow these steps:
3. Extract the project folder to a desired location on your local machine.
-4. **If you use UI5 Tooling \(recommended\):** At your chosen location, open a new shell and execute `npm install`. After all dependencies have been installed, enter `npm start` to start the development server.
+4. **If you use UI5 Tooling \(recommended\):** At your chosen location, open a new shell and execute `npm install`. After all dependencies have been installed, enter `npm start` to start the development server. \(**Note:** if they're not already present, you may have to create and adjust some project configuration files first; see the [Walkthrough Tutorial](Walkthrough_Tutorial_3da5f4b.md) for an example.\)
5. Test your project setup by opening one of its HTML pages in your development environment and making sure that the app displays the features exactly as shown in the preview of the step.
diff --git a/docs/More_About_Controls_3ec6808.md b/docs/More_About_Controls_3ec6808.md
index 9e9c7bdb..416f5825 100644
--- a/docs/More_About_Controls_3ec6808.md
+++ b/docs/More_About_Controls_3ec6808.md
@@ -55,7 +55,7 @@ This library contains the `CodeEditor` control.
and all its components, base classes for controls, components and the Model-View-Controller
(MVC) classes.")**
This library contains the jQuery plugins \(`jQuery.sap.*`\), the core and all its components, base classes for controls, components and the Model-View-Controller \(MVC\) classes.
-- **[sap.ui.mdc \(experimental\)](sap_ui_mdc_experimental_1dd2aa9.md "The sap.ui.mdc library contains composite, metadata-driven controls
+- **[sap.ui.mdc \(experimental\)](sap_ui_mdc_experimental_1dd2aa9.md "The sap.ui.mdc library contains composite, metadata-driven controls
that assemble UI elements with predefined user experience and various functionalities. The
controls can be used as a basis for scalable application development and can be implemented
for use with any OpenUI5 model
diff --git a/docs/Step_10_Descriptor_for_Applications_8f93bf2.md b/docs/Step_10_Descriptor_for_Applications_8f93bf2.md
index fd083910..cd61e769 100644
--- a/docs/Step_10_Descriptor_for_Applications_8f93bf2.md
+++ b/docs/Step_10_Descriptor_for_Applications_8f93bf2.md
@@ -31,22 +31,19 @@ The SAP Fiori launchpad acts as an application container and instantiates the ap
You can view and download all files at [Walkthrough - Step 10](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.10).
-> ### Caution:
-> Automatic model instantiation is only available as of OpenUI5 version 1.30. If you are using an older version, you can manually instantiate the resource bundle and other models of the app in the `init` method of the `Component.js` file as we did in [Step 9: Component Configuration](Step_9_Component_Configuration_4cfa608.md).
-
***
### webapp/manifest.json \(New\)
-```js
+```
{
- "_version": "1.12.0",
+ "_version": "1.58.0",
"sap.app": {
- "id": "sap.ui.demo.walkthrough",
- "type": "application",
+ "id": "ui5.walkthrough",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
+ "type": "application",
"applicationVersion": {
"version": "1.0.0"
}
@@ -60,13 +57,8 @@ You can view and download all files at [Walkthrough - Step 10](https://sdk.openu
}
},
"sap.ui5": {
- "rootView": {
- "viewName": "sap.ui.demo.walkthrough.view.App",
- "type": "XML",
- "id": "app"
- },
"dependencies": {
- "minUI5Version": "1.93",
+ "minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
@@ -76,11 +68,16 @@ You can view and download all files at [Walkthrough - Step 10](https://sdk.openu
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
- "bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
+ "bundleName": "ui5.walkthrough.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
+ },
+ "rootView": {
+ "viewName": "ui5.walkthrough.view.App",
+ "type": "XML",
+ "id": "app"
}
}
}
@@ -95,19 +92,19 @@ The content of the `manifest.json` file is a configuration object in JSON format
The `sap.app` namespace contains the following application-specific attributes:
- - `id` \(mandatory\): The namespace of our application component
+ - `id` \(mandatory\): The namespace of our application component.
The ID must not exceed 70 characters. It must be unique and must correspond to the component ID/namespace.
- - `type`: Defines what we want to configure, here: an application
+ - `type`: Defines what we want to configure; here: an application.
- - `i18n`: Defines the path to the resource bundle file
+ - `i18n`: Defines the path to the resource bundle file. The `supportedLocales` and `fallbackLocale` properties are set to empty strings, as our demo app uses only one `i18n.properties` file for simplicity and we'd like to prevent the browser from trying to load additional `i18n_*.properties` files based on your browser settings and your locale.
- - `title`: Title of the application in handlebars syntax referenced from the app's resource bundle
+ - `title`: Title of the application in handlebars syntax referenced from the app's resource bundle.
- - `description`: Short description text what the application does in handlebars syntax referenced from the app's resource bundle
+ - `description`: Short description text what the application does in handlebars syntax referenced from the app's resource bundle.
- - `applicationVersion`: The version of the application to be able to easily update the application later on
+ - `applicationVersion`: The version of the application to be able to update the application easily later on.
- **`sap.ui`**
@@ -147,28 +144,28 @@ The content of the `manifest.json` file is a configuration object in JSON format
- SAPUI5 Walkthrough
+ UI5 Walkthrough
-
+
```
-Now we declare our component in the body of our `index.html`. In the bootstrapping script of our `index.html`, we enable the `ComponentSupport` module and remove the `sap.m` library. Then, we declare our component in the body via a `div` tag. This will instantiate the component when the `onInit` event is executed.
+Now we declare our component in the body of our `index.html`. In the bootstrapping script of our `index.html`, we enable the `ComponentSupport` module. Then, we declare our component in the body via a `div` tag. This will instantiate the component when the `onInit` event is executed.
-We will no longer need our `index.js` from now on, because the descriptor takes care of everything.
+We can delete our `index.js`, because the descriptor now takes care of everything.
***
@@ -195,23 +192,26 @@ In the resource bundle we simply add the texts for the app and add comments to s
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
-], function (UIComponent, JSONModel) {
+], (UIComponent, JSONModel) => {
"use strict";
- return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
+
+ return UIComponent.extend("ui5.walkthrough.Component", {
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
- init : function () {
+
+ init() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
+
// set data model
- var oData = {
+ const oData = {
recipient : {
name : "World"
}
};
- var oModel = new JSONModel(oData);
+ const oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
diff --git a/docs/Step_11_Pages_and_Panels_3b9d9f8.md b/docs/Step_11_Pages_and_Panels_3b9d9f8.md
index 5b7018f0..01133fe9 100644
--- a/docs/Step_11_Pages_and_Panels_3b9d9f8.md
+++ b/docs/Step_11_Pages_and_Panels_3b9d9f8.md
@@ -24,13 +24,21 @@ After all the work on the app structure it’s time to improve the look of our a
***
+
+
### Coding
You can view and download all files at [Walkthrough - Step 11](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.11).
+***
+
+
+
+### webapp/view/App.view.xml
+
```xml
@@ -41,10 +49,10 @@ You can view and download all files at [Walkthrough - Step 11](https://sdk.openu
-
+
+
### Coding
You can view and download all files at [Walkthrough - Step 12](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.12).
+***
+
+
+
+### webapp/view/App.view.xml
+
```xml
-
+
@@ -43,9 +51,11 @@ You can view and download all files at [Walkthrough - Step 12](https://sdk.openu
+
+
+
### Coding
You can view and download all files at [Walkthrough - Step 13](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.13).
+***
+
+
+
+### webapp/view/App.view.xml
+
```xml
+
@@ -46,14 +55,17 @@ You can view and download all files at [Walkthrough - Step 13](https://sdk.openu
class="sapUiResponsiveMargin"
width="auto">
+
+
+
diff --git a/docs/Step_14_Custom_CSS_and_Theme_Colors_723f4b2.md b/docs/Step_14_Custom_CSS_and_Theme_Colors_723f4b2.md
index 708e206c..a23c8b4b 100644
--- a/docs/Step_14_Custom_CSS_and_Theme_Colors_723f4b2.md
+++ b/docs/Step_14_Custom_CSS_and_Theme_Colors_723f4b2.md
@@ -24,14 +24,22 @@ Sometimes we need to define some more fine-granular layouts and this is when we
output text is bold")
> ### Caution:
-> As stated in the *Compatibility Rules*, the HTML and CSS generated by OpenUI5 is not part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. A prerequisite for this is that you have control over the version of OpenUI5 being used, for example in a standalone scenario.
+> As stated in the [Compatibility Rules](Compatibility_Rules_91f0873.md), the HTML and CSS generated by OpenUI5 is not part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. A prerequisite for this is that you have control over the version of OpenUI5 being used, for example in a standalone scenario.
***
+
+
### Coding
You can view and download all files at [Walkthrough - Step 14](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.14).
+***
+
+
+
+### webapp/css/style.css \(New\)
+
```
html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
margin-right: 0.125rem
@@ -60,11 +68,11 @@ In an additional class `myCustomText` we define a bold text and set the display
### webapp/manifest.json
-```js
+```
...
"sap.ui5": {
...
- "models": {
+ "rootView": {
...
},
"resources": {
@@ -86,10 +94,11 @@ In the `resources` section of the `sap.ui5` namespace, additional resources for
```xml
+
@@ -100,14 +109,17 @@ In the `resources` section of the `sap.ui5` namespace, additional resources for
class="sapUiResponsiveMargin"
width="auto">
+
+
+
diff --git a/docs/Step_15_Nested_Views_df8c9c3.md b/docs/Step_15_Nested_Views_df8c9c3.md
index bd2473d1..d6feee51 100644
--- a/docs/Step_15_Nested_Views_df8c9c3.md
+++ b/docs/Step_15_Nested_Views_df8c9c3.md
@@ -25,22 +25,31 @@ Our panel content is getting more and more complex and now it is time to move th
***
+
+
### Coding
You can view and download all files at [Walkthrough - Step 15](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.15).
+***
+
+
+
+### webapp/view/App.view.xml
+
```xml
+
-
+
@@ -58,22 +67,26 @@ Instead of putting the panel and its content directly into our `App` view, we wi
```xml
+
+
+
+
@@ -92,14 +105,16 @@ The whole content for the panel is now added to the new file `HelloPanel.view.xm
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
-], function (Controller, MessageToast) {
+], (Controller, MessageToast) => {
"use strict";
- return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
- onShowHello : function () {
+
+ return Controller.extend("ui5.walkthrough.controller.HelloPanel", {
+ onShowHello() {
// read msg from i18n model
- var oBundle = this.getView().getModel("i18n").getResourceBundle();
- var sRecipient = this.getView().getModel().getProperty("/recipient/name");
- var sMsg = oBundle.getText("helloMsg", [sRecipient]);
+ const oBundle = this.getView().getModel("i18n").getResourceBundle();
+ const sRecipient = this.getView().getModel().getProperty("/recipient/name");
+ const sMsg = oBundle.getText("helloMsg", [sRecipient]);
+
// show message
MessageToast.show(sMsg);
}
@@ -116,9 +131,9 @@ To have a reusable asset, the method `onShowHello` is also moved from the app co
```js
sap.ui.define([
"sap/ui/core/mvc/Controller"
-], function (Controller) {
+], (Controller) => {
"use strict";
- return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
+ return Controller.extend("ui5.walkthrough.controller.App", {
});
});
```
diff --git a/docs/Step_16_Dialogs_and_Fragments_4da7298.md b/docs/Step_16_Dialogs_and_Fragments_4da7298.md
index 351c9bd1..170e2e5c 100644
--- a/docs/Step_16_Dialogs_and_Fragments_4da7298.md
+++ b/docs/Step_16_Dialogs_and_Fragments_4da7298.md
@@ -32,34 +32,47 @@ We will now add a dialog to our app. Dialogs are special, because they open on t
***
+
+
### Coding
You can view and download all files at [Walkthrough - Step 16](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.16).
+***
+
+
+
+### webapp/view/HelloPanel.view.xml
+
```xml
+
+
+
+
+
@@ -80,10 +93,10 @@ It is a good practice to set a unique ID like `helloWorldButton` to key controls
+
+ title="Hello {/recipient/name}"/>
```
@@ -97,31 +110,31 @@ The syntax is similar to a view, but since fragments do not have a controller th
```js
sap.ui.define([
- "sap/ui/core/mvc/Controller",
- "sap/m/MessageToast",
- "sap/ui/core/Fragment"
-], function (Controller, MessageToast, Fragment) {
- "use strict";
-
- return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
-
- onShowHello : function () {
- …
- },
- onOpenDialog : function () {
-
- // create dialog lazily
- if (!this.pDialog) {
- this.pDialog = this.loadFragment({
- name: "sap.ui.demo.walkthrough.view.HelloDialog"
- });
- }
- this.pDialog.then(function(oDialog) {
- oDialog.open();
- });
- }
-
- });
+ "sap/ui/core/mvc/Controller",
+ "sap/m/MessageToast"
+], (Controller, MessageToast) => {
+ "use strict";
+
+ return Controller.extend("ui5.walkthrough.controller.HelloPanel", {
+ onShowHello() {
+ // read msg from i18n model
+ const oBundle = this.getView().getModel("i18n").getResourceBundle();
+ const sRecipient = this.getView().getModel().getProperty("/recipient/name");
+ const sMsg = oBundle.getText("helloMsg", [sRecipient]);
+
+ // show message
+ MessageToast.show(sMsg);
+ },
+ onOpenDialog() {
+ // create dialog lazily
+ this.pDialog ??= this.loadFragment({
+ name: "ui5.walkthrough.view.HelloDialog"
+ });
+
+ this.pDialog.then((oDialog) => oDialog.open());
+ }
+
+ });
});
```
@@ -129,14 +142,8 @@ If the dialog in the fragment does not exist yet, the fragment is instantiated b
As you can see in the snippet above, we store the loading `Promise` of the dialog fragment on the controller instance. This allows us to handle the opening of the dialog asynchronously on each click of the `helloDialogButton` button.
-To reuse the dialog opening and closing functionality in other controllers, you can create a new file `sap.ui.demo.walkthrough.controller.BaseController`, which extends `sap.ui.core.mvc.Controller`, and put all your dialog-related coding into this controller. Now, all the other controllers can extend from `sap.ui.demo.walkthrough.controller.BaseController` instead of `sap.ui.core.mvc.Controller`.
-
-***
-
-### Conventions
-
-- Private functions and variables should always start with an underscore.
-
+> ### Tip:
+> To reuse the dialog opening and closing functionality in other controllers, you can create a new file `ui5.walkthrough.controller.BaseController`, which extends `sap.ui.core.mvc.Controller`, and put all your dialog-related coding into this controller. Now, all the other controllers can extend from `ui5.walkthrough.controller.BaseController` instead of `sap.ui.core.mvc.Controller`.
***
diff --git a/docs/Step_17_Fragment_Callbacks_354f98e.md b/docs/Step_17_Fragment_Callbacks_354f98e.md
index e18a0677..18cbf894 100644
--- a/docs/Step_17_Fragment_Callbacks_354f98e.md
+++ b/docs/Step_17_Fragment_Callbacks_354f98e.md
@@ -24,44 +24,48 @@ Now that we have integrated the dialog, it's time to add some user interaction.
***
+
+
### Coding
You can view and download all files at [Walkthrough - Step 17](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.17).
+***
+
+
+
+### webapp/controller/HelloPanel.controller.js
+
```js
sap.ui.define([
"sap/ui/core/mvc/Controller",
- "sap/m/MessageToast",
- "sap/ui/core/Fragment"
-], function (Controller, MessageToast, Fragment) {
+ "sap/m/MessageToast"
+], (Controller, MessageToast) => {
"use strict";
- return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
-
- onShowHello : function () {
+ return Controller.extend("ui5.walkthrough.controller.HelloPanel", {
+ onShowHello() {
// read msg from i18n model
- var oBundle = this.getView().getModel("i18n").getResourceBundle();
- var sRecipient = this.getView().getModel().getProperty("/recipient/name");
- var sMsg = oBundle.getText("helloMsg", [sRecipient]);
+ const oBundle = this.getView().getModel("i18n").getResourceBundle();
+ const sRecipient = this.getView().getModel().getProperty("/recipient/name");
+ const sMsg = oBundle.getText("helloMsg", [sRecipient]);
// show message
MessageToast.show(sMsg);
},
- onOpenDialog : function () {
-
- if (!this.pDialog) {
- this.pDialog = this.loadFragment({
- name: "sap.ui.demo.walkthrough.view.HelloDialog"
+ onOpenDialog() {
+ // create dialog lazily
+ this.pDialog ??= this.loadFragment({
+ name: "ui5.walkthrough.view.HelloDialog"
});
- }
- this.pDialog.then(function(oDialog) {
- oDialog.open();
+
+ this.pDialog.then((oDialog) => oDialog.open());
});
},
- onCloseDialog : function () {
- // note: We don't need to chain to the pDialog promise, since this event-handler
+ onCloseDialog() {
+ // note: We don't need to chain to the pDialog promise, since this event handler
// is only called from within the loaded dialog itself.
this.byId("helloDialog").close();
}
@@ -80,9 +84,11 @@ The event handler function is put into the same controller file and it closes th
+