Reintroduce appstudio-sapui5-create + tutorial updates

tutorials/appstudio-sapui5-create/appstudio-sapui5-create.md

@@ -0,0 +1,133 @@
+---
+parser: v2
+auto_validation: true
+time: 25
+tags: [ tutorial>beginner, programming-tool>javascript, programming-tool>sapui5, programming-tool>html5, software-product>sap-business-technology-platform, software-product>sap-business-application-studio]
+primary_tag: software-product>sap-btp--cloud-foundry-environment
+author_name: Conrad Bernal
+author_profile: https://github.com/cjbernal
+---
+
+# Deploy Your First SAPUI5 App
+<!-- description --> Create, build, and deploy an MTA project with an integrated SAPUI5 module to SAP BTP, Cloud Foundry environment
+
+## You will learn
+  - How to create an SAPUI5 project
+  - How to build a project for Cloud Foundry
+  - How to deploy a project to Cloud Foundry
+
+---
+
+### Open the Fiori dev space
+
+
+**Start** a dev space of kind *SAP Fiori* and **open** it by clicking its name.
+
+<!-- border -->![selectDevSpace](./selectDevSpace.png)
+
+> Have a look at [this tutorial](appstudio-devspace-fiori-create) if you are unsure how to get here or how to create a dev space.
+
+### Connect to a Cloud Foundry endpoint
+
+Make sure you are connected to a Cloud Foundry endpoint to which you will deploy the SAPUI5 application later.
+
+1. Enter the Cloud Foundry endpoint you want to use. If your environment runs in the EU10-region, this is `https://api.cf.eu10.hana.ondemand.com`. To do so, use the `CF: Login to Cloud Foundry` command. From the menu, select **View** and then **Find Command**. Type `CF: Login` and then select `CF: Login to Cloud Foundry`. Select your endpoint or enter the value for your region and then enter your email and password to proceed.
+
+    <!-- border -->![selectEndpoint](./selectEndpoint.png)
+
+2. Next, you need to select the Cloud Foundry Organization and space you want use. You will see that you are connected to the endpoint once these prompts have been answered.
+
+    <!-- border -->![connectedEndpoint](./connectedEndpoint.png)
+
+
+### Create a new single-module-project
+This step will guide you through the needed actions to create a project that contains a **single** SAPUI5 application. In case you want to create a project that contains multiple UI modules, please do not follow these instructions and rather create an empty MTA project to which you then add multiple UI modules.
+
+
+1. Click on the link **Start from template** on the *Welcome* screen.
+
+    <!-- border -->![newproject](./newproject.png)
+
+2. Select **SAP Fiori freestyle SAPUI5 application** as the template category you want to use and click **Start**.
+
+    <!-- border -->![fioriTemplate](./fioriTemplate.png)
+
+3. Specify the application type **SAPUI5 freestyle** and the floor plan **SAPUI5 Application** and go to the **Next** screen.
+
+    <!-- border -->![sapui5Template](./sapui5app.png)
+
+4. Now you have the option to connect your SAPUI5 application to a data source. As we won't need a data source in this tutorial, select **None** and click **Next**.
+
+    <!-- border -->![nodata](./nodata.png)
+
+4. Keep the default view name and click **Next** .
+
+    <!-- border -->![viewname](./viewname.png)
+
+4.   Name of the module **`sapui5`**, use the application title  **`Tutorial`**, define the namespace **`sap.btp`**, and **Add deployment configuration**. Keep the default values for the other parameters and select **Next** to go to the next step.
+
+    <!-- border -->![projectdetails](./projectdetails.png)
+
+4.  Choose **Cloud Foundry** as the target runtime and select **None** for the destination and make sure that **Add application to managed application router** is selected. Then, press **Finish** to create the new project.
+
+    <!-- border -->![finishProject](./finishProject.png)
+
+
+4. Once you see the success message, click **File | Open Workspace...** to open a new dialog.
+
+    <!-- border -->![openws](./openWs1.png)
+
+    In there, select the generated folder **sapui5** and hit **open** to see the new project.
+
+    <!-- border -->![openws](./openWs2.png)
+
+
+### Build the application
+
+Build (aka package) the project to a `mtar` archive to deploy it to Cloud Foundry.  
+
+1. Right-click on the `mta.yaml` file and select **Build MTA** to trigger this process.
+
+    <!-- border -->![build](./build.png)
+
+3. Once the build is complete, you can see a message in the log. You can now find the generated `mtar` archive in the project tree under `mta_archives`.
+
+    <!-- border -->![state](./buildsuccess.png)
+
+
+### Deploy the archive to Cloud Foundry
+
+Now that you created a `mtar` archive, you are all set to deploy the application.
+
+1. Right-click on the `mtar` file and select **Deploy** and **Deploy MTA Archive**.
+
+    <!-- border -->![deploy](./deploy.png)
+
+2. Check the console output to make sure the process started.
+
+3. You will see a success message and the URL of the app in the log once the deployment finished.
+
+    <!-- border -->![success](./deploysuccess.png)
+
+4.   You can see the URL of the deployed app when running `cf html5-list -di sap-btp-sapui5-dest-srv -u --runtime launchpad` in a new terminal session.
+
+    <!-- border -->![cfapps](./cfhtml5.png)
+
+    > Use the following command in case you use the Portal service
+    >
+    >  `cf html5-list -di sap-btp-sapui5-destination-service -u  --runtime cpp`
+
+
+### Test to the application
+
+1. **Open** the application in your browser. You might need to log in with your SAP ID (the same credentials you use for the SAP BTP Cockpit).
+>There is temporarily a need to update the given URL to view the application. When pasting the URL into your browser, remove `cpp` from your URL and replace it with `launchpad`.
+
+
+2. See that the sample application consists of a header and an empty page. So you should see something like this:
+
+<!-- border -->![app](./app.png)
+
+
+Enter the URL of your running application:
+

tutorials/fiori-tools-cap-create-application/fiori-tools-cap-create-application.md

@@ -2,40 +2,40 @@
 parser: v2
 auto_validation: true
 time: 15
-tags: [ software-product>sap-fiori-elements, software-product>sap-fiori-tools, tutorial>beginner, software-product>sap-fiori, software-product>sap-business-application-studio, software-product-function>sap-cloud-application-programming-model, software-product>sap-business-technology-platform]
+tags: [ software-product>sap-fiori, software-product>sap-fiori-tools, tutorial>beginner, software-product>sap-fiori, software-product>sap-business-application-studio, software-product-function>sap-cloud-application-programming-model, software-product>sap-business-technology-platform]
 primary_tag: software-product>sap-fiori
 ---
 
 # Create an SAP Fiori Elements Application
 <!-- description --> Create an SAP Fiori elements application of type List Report Object Page based on the SAP Cloud Application Programming Model.
 
 ## You will learn
-- How to create an SAP Fiori application of type List Report Object Page
+- How to create an SAP Fiori application of type List Report application
 - How to use an SAP Fiori elements template with a service in the SAP Business Application Studio
 
 ---
 
 ### Create new SAP Fiori elements application
 
-1. SAP Fiori tools includes an Application Generator that provides a wizard-style approach for creating applications based on SAP Fiori elements page types. You are going to use it to create your List Report Object Page app.
+1. SAP Fiori tools includes an Application Generator that provides a wizard-style approach for creating applications based on SAP Fiori elements page types. You are going to use it to create your List Report Page app.
 
-    From the toolbar menu, open **View** > **Find Command...**, type **`Application Generator`**, and select **Fiori: Open Application Generator**.
+    From the hamburger menu, open **View->Command Palette...**, type **`Application Generator`**, and select **Fiori: Open Application Generator**.
 
-2. Select the tile **List Report Object Page** and click **Next**.
+2. Select the tile **List Report Page** and click **Next**.
 
-    <!-- border -->![Choose tile "List Report Object Page"](choose-tile-list-report.png)
+    <!-- border -->![Choose tile "List Report Page"](choose-tile-list-report-new.png)
 
 3. Now you connect the application template with your OData service. The OData service you use for this example was already prepared during the previous tutorial:  [Prepare Your Development Environment](fiori-tools-cap-prepare-dev-env)
 
     Select the data source for the project. Since you use the locally installed service, choose **Use a local CAP Project** from the dropdown field **Data source**.
 
-    Navigate to and select the project folder location in the input field for your project folder path (as shown in the screenshot).
+    Select the CAP project **fiori-elements-incident-management** in the next input field (as shown in the screenshot).
 
     Choose the service name **`IncidentService (Node.js)`** from the dropdown field **OData service**.
 
     When finished, click **Next**.
 
-    <!-- border -->![Select service related parameters](enter-service-parameters1.png)
+    <!-- border -->![Select service related parameters](enter-service-parameters-new.png)
 
 4. For your application you need to choose the main entity set from the OData service. Objects of this type will be displayed in the list report.
 
@@ -54,8 +54,9 @@ primary_tag: software-product>sap-fiori
     After completion, click **Finish**. The new SAP Fiori elements application is now created from the template using the service and the configurations you provided in this step.
 
     You may see a popup asking whether you want to open the project in a new workspace. Simply close it by clicking the **X**.
+
 
-    After the project is generated, an Application Information page is shown giving you an overview of project details and tasks that you may perform on this project. It is recommended that you keep this page open as it will be used in other steps. You can open it any time using the menu item **View** > **Find Command...** and select **Fiori: Open Application Info**
+    After the project is generated, an Application Information page will be displayed. This page gives you an overview of project details and tasks that you can perform on the project. It is recommended that you keep this page open as it will be used in other steps. You can open it any time from the hamburger menu, open **View->Command Palette...**, and type/select **Fiori: Open Application Info**
 
      <!-- border -->![Application Information page](application-info-page.png)
 

tutorials/fiori-tools-cap-prepare-dev-env/fiori-tools-cap-prepare-dev-env.md

@@ -2,7 +2,7 @@
 parser: v2
 auto_validation: true
 time: 20 minutes
-tags: [software-product>sap-fiori-elements, software-product>sap-fiori-tools, tutorial>beginner, software-product>sap-fiori, software-product>sap-business-application-studio, software-product-function>sap-cloud-application-programming-model, software-product>sap-business-technology-platform]
+tags: [software-product>sap-fiori, software-product>sap-fiori-tools, tutorial>beginner, software-product>sap-fiori, software-product>sap-business-application-studio, software-product-function>sap-cloud-application-programming-model, software-product>sap-business-technology-platform]
 primary_tag: software-product>sap-fiori
 ---
 # Prepare Your Development Environment for SAP Fiori Elements
@@ -54,27 +54,29 @@ Once you are in the development space, you will see a **Welcome** page from whic
 
 2. Click the link **Clone from Git**.
 
-    <!-- border -->![Click on link "Clone from Git"](click-clone-from-git.png)
+    <!-- border -->![Click on link "Clone from Git"](click-clone-from-git-new.png)
 
     Paste the repository link into the input field and press **Enter**.
 
-    <!-- border -->![Enter the github repository URL](enter-github-repository.png)
+    <!-- border -->![Enter the github repository URL](enter-github-repository-new.png)
 
 3. Wait until the cloning has finished. When you see a toast message in the lower right corner, click **Open** to open the project.
 
     You see your project in the explorer panel as shown in the image below:
 
-    <!-- border -->![Explorer service structure](explorer-project-tree.png)
+    <!-- border -->![Explorer service structure](explorer-project-tree-new.png)
 
 
 ### Complete the service
 
 
 1. From the menu **Terminal**, select **New Terminal**
 
+    !![Open_terminal](open-terminal-new.png)
+
     Ensure that your terminal prompt shows **fiori-elements-incident-management**. At the terminal prompt, enter **`npm install `** and press **Enter**. This command will download and install all necessary modules from the npm package repository required to run the SAP Fiori elements application.
 
-    <!-- border -->![Enter npm install](enter-npm-install.png)
+    <!-- border -->![Enter npm install](enter-npm-instal-new.png)
 
 2. After the installation is complete, enter **`npm i @sap/cds-dk -g`** at the terminal prompt.