sap-tutorials · jmmargo · Jul 19, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 19, 2024
diff --git a/tutorials/cp-cf-create-destination/checkdest.png b/tutorials/cp-cf-create-destination/checkdest.png
diff --git a/tutorials/cp-cf-create-destination/cp-cf-create-destination.md b/tutorials/cp-cf-create-destination/cp-cf-create-destination.md
@@ -23,7 +23,7 @@ author_profile: https://github.com/nicoschoenteich
 - How to specify the SAP Business Application Studio usage parameter for a generic OData service.
 
 ## Intro
-Destinations are key building blocks in SAP BTP, as they are used to define connections for outbound communication from your application to remote systems. These remote systems can be on-premises or in the cloud.
+Destinations are key building blocks on SAP BTP, as they are used to define connections for outbound communication from your application to remote systems. These remote systems can be on-premises or in the cloud.
 
 A destination has a name, a URL, authentication details, and other optional configuration details.
 
@@ -35,23 +35,23 @@ The Northwind OData services are available in several versions. Most tutorials c
 
 ### Enter your SAP BTP account
 
-- For Free Trial Accounts: <https://account.hanatrial.ondemand.com>
+- For (free) Trial Accounts: <https://account.hanatrial.ondemand.com>
 - For Free Tier and Enterprise Accounts on **feature set A**: <https://account.hana.ondemand.com>
-- For Free Tier and Enterprise Accounts on **feature set B**: The link depends on your region. One option is <https://cockpit.eu10.hana.ondemand.com/cockpit/>. (Replace "eu10" with your region.)
+- For Free Tier and Enterprise Accounts on **feature set B**: The link depends on your region. One option is <https://cockpit.eu10.hana.ondemand.com/cockpit/>. (Replace `eu10` with your region.)
 
 
 ### Access your subaccount
 
 Click on the tile of your Cloud Foundry subaccount:
 
-<!-- border -->![subaccount](./subaccount.png)
+![subaccount](./subaccount.png)
 
 
 ### Open the Destinations view
 
-Click on the **Destinations** button on the left panel and click **New Destination** to open a new destination configuration form:
+Click on the **Destinations** button on the left panel and click **Create Destination** to open a new destination configuration form:
 
-<!-- border -->![destination](./destination.png)
+![destination](./destination.png)
 
 ### Create a new destination
 
@@ -77,12 +77,12 @@ Property Name     | Value
 
 When specifying a URL with the HTTPS scheme, a checkbox **Use default JDK truststore** will appear. Ensure that this is checked.
 
-<!-- border -->![new destination entered](./newdest.png)
+![new destination entered](./newdest.png)
 
 
 ### Check the connection
 
-Click on the `Check Connection` icon on the newly created Destination to see if everything works as expected:
+Click on the **Check Connection** icon on the newly created destination to see if everything works as expected:
 
-<!-- border -->![check destination function](./checkdest.png)
+![check destination function](./checkdest.png)
 
diff --git a/tutorials/cp-cf-create-destination/destination.png b/tutorials/cp-cf-create-destination/destination.png
diff --git a/tutorials/cp-cf-create-destination/newdest.png b/tutorials/cp-cf-create-destination/newdest.png
diff --git a/tutorials/cp-cf-create-destination/subaccount.png b/tutorials/cp-cf-create-destination/subaccount.png
diff --git a/tutorials/cp-cf-download-cli/cfhelp.png b/tutorials/cp-cf-download-cli/cfhelp.png
diff --git a/tutorials/cp-cf-download-cli/cp-cf-download-cli.md b/tutorials/cp-cf-download-cli/cp-cf-download-cli.md
@@ -1,8 +1,8 @@
 ---
 parser: v2
 auto_validation: true
-author_name: Marius Obert
-author_profile: https://github.com/iobert
+author_name: Nico Schoenteich
+author_profile: https://github.com/nicoschoenteich
 tags: [tutorial>beginner, topic>cloud, products>sap-business-technology-platform ]
 primary_tag: products>sap-btp--cloud-foundry-environment
 time: 15
@@ -12,9 +12,9 @@ time: 15
 <!-- description --> Download and install the CLI, which allows access via the command line.
 
 ## You will learn  
- - How to download the Command Line Interface (CLI) package
- - How to install the CLI and connect it to Cloud Foundry
- - How to explore a few basic CLI commands
+ - How to download the Command Line Interface (CLI) package.
+ - How to install the CLI and connect it to Cloud Foundry.
+ - How to explore a few basic CLI commands.
 
 ---
 
@@ -30,6 +30,7 @@ Open the installer on your computer, and follow the installation instructions.
 
 > For more help with the CLI installation, look at the [Cloud Foundry CLI installation documentation](http://docs.cloudfoundry.org/cf-cli/install-go-cli.html).
 
+
 ### Test the Cloud Foundry CLI
 
 Open a command prompt on your computer.  
@@ -44,11 +45,14 @@ Next, test the Cloud Foundry command line interface to make sure it is installed
 
 To test the CLI, type in the following:
 
-    cf
+```Bash
+cf
+```
 
 You should see a list of Cloud Foundry commands.
 
-<!-- border -->![Cloud Foundry list of Commands](cfhelp.png)
+![Cloud Foundry list of Commands](cfhelp.png)
+
 
 ### Determine your Cloud Foundry URL
 
@@ -66,15 +70,15 @@ You can also identify your API Endpoint using your Cloud Foundry account:
 
 First, navigate to the [SAP BTP cockpit](https://hanatrial.ondemand.com) and select **Enter Your Trial Account**
 
-<!-- border -->![entertrial](entertrial.png)
+![entertrial](entertrial.png)
 
 Next, click on the subaccount.
 
-<!-- border -->![subaccount](subaccount.png)
+![subaccount](subaccount.png)
 
 The **API Endpoint** is displayed on the left-hand side of the **Overview** page.
 
-<!-- border -->![endpoint](endpoint.png)
+![endpoint](endpoint.png)
 
 ### Log in using the CLI
 
@@ -83,7 +87,7 @@ Next, open a command line prompt on your computer.  In the command line screen,
 ```bash
 cf login -a <URL>
 ```
-> Replace the `<URL>` section with the URL you selected from the table.
+> Replace the `<URL>` section with the URL you selected from the table. For more information on the log in using the Command Line Interface (CLI), go to the SAP BTP Help Portal [Log On to the Cloud Foundry Environment Using the Cloud Foundry Command Line Interface](https://help.sap.com/products/BTP/65de2977205c403bbc107264b8eccf4b/7a37d66c2e7d401db4980db0cd74aa6b.html?locale=en-US) website.
 
 When prompted, enter your username and password.  Once you are logged in, you should see your API endpoint, user, org, and space.
 

diff --git a/tutorials/cp-cf-download-cli/endpoint.png b/tutorials/cp-cf-download-cli/endpoint.png
diff --git a/tutorials/cp-cf-download-cli/entertrial.png b/tutorials/cp-cf-download-cli/entertrial.png
diff --git a/tutorials/cp-cf-download-cli/subaccount.png b/tutorials/cp-cf-download-cli/subaccount.png
diff --git a/tutorials/cp-cf-sapui5-local-debug/cp-cf-sapui5-local-debug.md b/tutorials/cp-cf-sapui5-local-debug/cp-cf-sapui5-local-debug.md
@@ -11,88 +11,85 @@ author_profile: https://github.com/nicoschoenteich
 # Debug Your SAPUI5 App
 <!-- description --> Debugging and logging are the nut and bolts to inspect your application. Learn how to debug and test your web apps with the Google Chrome Dev Tools.
 
+## Prerequisites
+  - You have previously [created an SAPUI5 application](cp-cf-sapui5-local).
+
 ## You will learn
-  - How to do add breakpoints to your JavaScript code
-  - How to log data to the console
-  - How to use the Google Chrome Dev Tools.
+  - How to do add breakpoints to your JavaScript code.
+  - How to log data to the browser console.
+  - How to use the browser dev tools.
 
 ---
 
 ### Add a message page
 
 Add a simple message page to let the users know you are still working on this app.
 
-Replace the existing page in the file `webapp/view/MainView.view.xml` with
-```JavaScript
-<MessagePage showHeader="false"
-  description="More content to come"
-  text="Stay tuned!"
-  icon="sap-icon://home" />
+Replace the existing `<Page />` control in the file `myui5app/webapp/view/MainView.view.xml` with the following code:
+
+```XML
+<MessagePage
+    showHeader="false"
+    description="More content to come"
+    text="Stay tuned!"
+    icon="sap-icon://home" />
 ```
 
+> Tip: You can put your editor window and browser window right next to each other to benefit from the live reload feature of the web server even more.
 
-![message](./messagepage.png)
+![message](./message.gif)
 
+### Write a log message to the console
 
+SAPUI5 provides [lifecycle hooks](https://sapui5.hana.ondemand.com/sdk/#/topic/121b8e6337d147af9819129e428f1f75.html) to execute logic at certain points in the lifecycle of the app. For example, the `onBeforeRendering` hook can be used to do clean-up tasks each time before the view is being rendered (and the HTML is placed in the DOM). For the purpose of practice however, you will simply log an error to the browser console.
 
-### Write a log message to the console
+Paste the following `onBeforeRendering` hook into the file `myui5app/webapp/controller/MainView.controller.js`, right after the existing `onInit` hook:
 
-Add this `onBeforeRendering` hook to the file `webapp/controller/MainView.controller.js` (before the `onInit` hook). This error function allows you to write error messages to the console. Error messages also write the stack trace to the console, which can be used to trace the message back to the line of invocation.
 ```JavaScript
+,
 onBeforeRendering: function() {
-    jQuery.sap.log.error("A problem occurred!");
-},
+    console.error("A problem occurred!");
+}
 ```
 
 ![logger](./logger.png)
 
-
-> This `onBeforeRendering` method is called every time the View is rendered, before the Renderer is called and the HTML is placed in the DOM-Tree. It can be used to perform clean-up-tasks before re-rendering.
-
-
-
 ### Add a breakpoint
 
+Another lifecycle hook provided by SAPUI5 is the `onAfterRendering` hook, which gets executed - well - after rendering. Why don't we use it to practice setting a breakpoint and calling the debugger of the browser, so we can inspect the app at that specific moment of its lifecycle.
+
+Paste the following `onAfterRendering` hook into the file `myui5app/webapp/controller/MainView.controller.js`:
 
-Add this `onAfterRendering` hook to the same file to place a breakpoint in your code. A breakpoint will cause your app to stop when the execution thread reaches it. This gives you the chance to inspect the state of your app.
 ```JavaScript
 ,
-
 onAfterRendering: function() {
 	debugger
-},
+}
 ```
 
 ![debugger](./debugger.png)
 
+### Stop at the breakpoint
 
-> This `onAfterRendering` method is called every time the view is rendered, after the HTML is placed in the DOM-Tree. It can be used to apply additional changes to the DOM after the Renderer has finished.
-
-
+Test the changes by running the app on your local machine.
 
-### Stop at the breakpoint
+Execute the following command from the project root:
 
-Test the changes  on your local machine.
-```
-npm start
+```Bash
+npm run start:myui5app
 ```
-This command should start the app and open your browser automatically. Open the Chrome Dev Tools (or the [dev tools of your favorite browser](https://www.lifewire.com/web-browser-developer-tools-3988965)) by **clicking F12**. **Refresh the page** to run the script one more time.
 
-You should now see that the app reached the breakpoint (the dev tools automatically switched to the `Sources` tab).
+This command should start the app and open your browser automatically. Open the dev tools of your browser. You should now see that the app reached the breakpoint (the dev tools automatically switched to the `Sources` tab). With the execution of the script being stopped, you can hover over variables in the script to inspect them or even execute command using the "Console" tab. This is essential for debugging complex apps and understanding what's going on at certain points in the script.
 
 ![stopped](./stopped.png)
 
-
 ### See the error log message
 
-Click **F8** to jump over the breakpoint and **switch** to the `Console` tab.
-Now you should see your error message printed in red. Click on the small triangle on the left side to expand the error message.
-
-![testlog](./testlog.png)
-
-
+Click the blue arrow (in the yellow box) or press F8 to resume the script execution and then switch to the "Console" tab.
 
+Now you should see your error message printed in red. Click on the small triangle on the left side to expand the error message.
 
+![log](./log.png)
 
 
 ---
diff --git a/tutorials/cp-cf-sapui5-local-debug/debugger.png b/tutorials/cp-cf-sapui5-local-debug/debugger.png
diff --git a/tutorials/cp-cf-sapui5-local-debug/log.png b/tutorials/cp-cf-sapui5-local-debug/log.png
diff --git a/tutorials/cp-cf-sapui5-local-debug/logger.png b/tutorials/cp-cf-sapui5-local-debug/logger.png
diff --git a/tutorials/cp-cf-sapui5-local-debug/message.gif b/tutorials/cp-cf-sapui5-local-debug/message.gif
diff --git a/tutorials/cp-cf-sapui5-local-debug/stopped.png b/tutorials/cp-cf-sapui5-local-debug/stopped.png
diff --git a/tutorials/cp-cf-sapui5-local-setup/cp-cf-sapui5-local-setup.md b/tutorials/cp-cf-sapui5-local-setup/cp-cf-sapui5-local-setup.md
@@ -16,9 +16,9 @@ author_profile: https://github.com/nicoschoenteich
  - [[Only for Windows users] Install Chocolatey](https://chocolatey.org/)
 
 ## You will learn
-  - How to install the Yeoman scaffolding tool
-  - How to install the easy-ui5 generator plugin for Yeoman
-  - How to install the Multi-Target Application (MTA) build tool for Cloud Foundry
+  - How to install the Yeoman scaffolding tool.
+  - How to install the easy-ui5 generator plugin for Yeoman.
+  - How to install the Multi-Target Application (MTA) build tool for Cloud Foundry.
 
 
 ---

diff --git a/tutorials/cp-cf-sapui5-local-setup/verify.png b/tutorials/cp-cf-sapui5-local-setup/verify.png
diff --git a/tutorials/cp-cf-sapui5-local/cp-cf-sapui5-local.md b/tutorials/cp-cf-sapui5-local/cp-cf-sapui5-local.md
@@ -1,7 +1,7 @@
 ---
 parser: v2
 auto_validation: true
-time: 20
+time: 15
 tags: [ tutorial>beginner, programming-tool>html5, topic>cloud, programming-tool>javascript, software-product>sap-business-technology-platform, tutorial>free-tier]
 primary_tag: programming-tool>sapui5
 author_name: Nico Schoenteich
@@ -15,10 +15,10 @@ author_profile: https://github.com/nicoschoenteich
  - Install at least version 3.0.0 of the [easy-ui5 generator](cp-cf-sapui5-local-setup)
 
 ## You will learn
-  - How to scaffold an SAPUI5 project
-  - How to leverage the UI5 Tooling to test the app locally
-  - How to build a multi-target application archive
-  - How to deploy a SAPUI5 app to SAP BTP, Cloud Foundry environment
+  - How to scaffold an SAPUI5 project.
+  - How to leverage the UI5 Tooling to test the app locally.
+  - How to build a multi-target application archive.
+  - How to deploy a SAPUI5 app to SAP BTP, Cloud Foundry environment.
 
 ---
 
@@ -35,16 +35,17 @@ Choose the following responses for the prompts:
 | Parameter     | Value
 | :------------- | :-------------
 | What do you want to do? | **`project [project]`**
-| Which namespace do you want to use? | **`com.myorg`**
+| Which namespace do you want to use? | **`tutorial`**
 | How do you want to name this project? | **`myui5project`**
 | How do you want to name the first uimodule within your project? | **`myui5app`**
 | Do you want to enable the SAP Fiori elements flexible programming model? | **`No`**
-| On which platform would you like to host the application | **`Application Router`**
-| Where should your UI5 libs be served from? | **`Content delivery network (SAPUI5)`**
+| On which platform would you like to host the application | **`SAP Build Work Zone, standard edition`**
+| What name should be displayed on the Fiori Launchpad tile? | **`My UI5 Application`**
+| Where should your UI5 libs be served from? | **`Local resources (SAPUI5)`**
 | Would you like to create a new directory for the project? | **`Yes`**
 | Would you like to initialize a local git repository for the project? | **`Yes`**
 
-![yeomangen](./yo.png)
+![yo](./yo.png)
 
 The following installation of the project's dependencies might take a while.
 
@@ -73,51 +74,19 @@ npm run start:myui5app
 
 ![local](./local.png)
 
-### Package the MTA archive
+### Test the app locally with a Fiori launchpad
 
-Before the project can be deployed, the source code has to be minified and packed into an MTA (multi-target application) archive. Also, the code for the SAPUI5 app has to be moved to the `approuter/` directory. All of this can be achieved by running the following command:
+Because we selected "SAP Build Work Zone, standard edition" as our deployment target during project generation, the generator added a Fiori launchpad sandbox to the `myui5app` application. It did so using the `preview-middleware` as part of the `ui5.yaml`.
 
-```Bash
-npm run build
-```
-
-This build step essentially executes the instructions configured in the `mta.yaml` file and creates the MTA archive from it.
-
-### Deploy the MTA archive
-
-Next, the generated archive can be deployed to SAP BTP, Cloud Foundry environment. Trigger the deployment and track the deployment progress in the terminal with the following command:
-
-```Bash
-npm run deploy
-```
-
-### Check the status of your app
-
-You can check the status of all running apps in Cloud Foundry with the following command:
+You can start a local web server and directly open the Fiori launchpad sandbox using the following command from the project root:
 
 ```Bash
-cf apps
+cd myui5app/
+npm run start-flp
 ```
 
-Or you can check the status of the freshly deployed app with this more specific command:
-
-```Bash
-cf app com.myorg.myui5project-approuter
-```
-
-![cfapp](./cfapp.png)
-
-The `requested state` of your application should read `started`.
-
-> You can also check out the logs of your app via `cf logs <app name>`
-
-### See the app running in the cloud
-
-You can see the URL of your application in the output of the previously executed `cf apps` command. This URL points to the approuter, which allows to configure multiple routes. The route to get to the generated SAPUI5 app is `/myui5app/index.html`.
-
-Open the URL in the browser (don't forget to attach `/myui5app/index.html`) to see your app in action:
-![inaction](./cloud.png)
+![flp](./flp.png)
 
-Congrats, you just deployed your first SAPUI5 app from the command line!
+Congrats, you created your first SAPUI5 app form the command line!
 
 ---
diff --git a/tutorials/cp-cf-sapui5-local/flp.png b/tutorials/cp-cf-sapui5-local/flp.png
diff --git a/tutorials/cp-cf-sapui5-local/local.png b/tutorials/cp-cf-sapui5-local/local.png
diff --git a/tutorials/cp-cf-sapui5-local/neovim.png b/tutorials/cp-cf-sapui5-local/neovim.png
diff --git a/tutorials/cp-cf-sapui5-local/yo.png b/tutorials/cp-cf-sapui5-local/yo.png
diff --git a/tutorials/sapui5-fiori-cf-data-visualization/manifest.png b/tutorials/sapui5-fiori-cf-data-visualization/manifest.png
diff --git a/tutorials/sapui5-fiori-cf-data-visualization/popover.png b/tutorials/sapui5-fiori-cf-data-visualization/popover.png
diff --git a/tutorials/sapui5-fiori-cf-data-visualization/salesview.png b/tutorials/sapui5-fiori-cf-data-visualization/salesview.png