Category: SAP Deployment

How to create and deploy UI5 App based upon CAPM using BAS
Preface – This post is part of the SAP CAPM series.

Introduction

SAP CAPM is the new and most efficient way to develop SAP Cloud Applications. SAP Business Application Studio is the appropriate IDE that should be used for CAP Application creation. In this article we will explore SAP BAS, CAP Development and CAP Deployment over SAP BTP. Let us explore how to create and deploy UI5 App based upon CAPM using BAS.

Steps to get started with BAS

Step 01: The very first step is to visit Business Application Studio using SAP BTP.

Step 02: Create a Dev Space by clicking the button as shown below:

Step 03: Give a suitable name for your space and choose Full Stack Cloud Application

A CAPM space will be created as shown below. Click it.

It will open the Business Application Studio Editor (BAS).

Steps to create a CAPM Project
1. Click “Start from template” in welcome screen
2. Select CAP Project and click Start
3. Provide a name of the project and choose the one shown below:
4. Click Finish. This will generate a project and will open up the same.
5. In case you get a popover to install recommended extension, click install.
Steps to add Approuter in your CAPM

The very next thing after CAPM App creation is to add an approuter. You can read more about it here. Follow below steps to create an App Router. You can create both standalone app router as well as SAP Managed App Router (needs additional subscription).

How to add Standalone Approuter using BAS?

To add a standalone approuter using BAS, follow the given steps:

Step 01: Create a MTA or CAPM Application such that your project has a MTA.yaml file (We did this above).

Step 02: Right click on the MTA file and click “Create MTA Module from Template”

Step 03: Click “Approuter configuration” from the wizard

Step 04: Enter the details as shown below:

That’s it, an approuter will be added in your project with configuration in MTA file.

How to add Managed Approuter using BAS?

The creation of SAP Managed approuter is almost similar to Standalone approuter until step 03.
In step 04, you need to choose “Managed Approuter” from the drop down, followed by a unique name for the approuter. That’s it, an approuter will be added in your project with configuration in MTA file. Read more about it here.

Once deployed, you can visit HTML5 Applications under your subaccount. In case you see the given screen:

In this case you need to subscribe any of the above, then you will be able to see your Applications as shown below:

How to add a UI5 project in CAPM

Once you have a CAPM project with basic module, you will have a folder called app. This folder is meant for UI5 applications. In this use case it is empty. Now we will add MTA modules to create UI5 App.

Step 01: Create a MTA or CAPM Application such that your project has a MTA.yaml file (We did this above).

Step 02: Right click on the MTA file and click “Create MTA Module from Template”

Step 03: Click “SAP Fiori application” from the wizard

Step 04: Now, click the filter to choose “SAPUI5 freestyle” (In case you want a Fiori Elements based app, you can keep the first one)

Then choose “SAPUI5 Application”:

Step05: Now in next section, either choose your data source if you have or select “None” as below:

Step 06: Now enter the name of the initial view (It can be changed later too):

Step 07: This is an important step, choose the folder “app” via project folder path and mark Yes against “Add deployment configuration to MTA project”. This will add all required deployment related configurations in MTA file.

That’s it. Once clicked on Finish will add a UI5 application within app folder.

Steps to test and deploy whole CAPM project on SAP Cloud foundry (or SAP BTP)
1. Open Terminal from the menu bar
2. To test the App locally, write cds watch. You will see a pop up, press “Expose and Open”. You will see a new tab:
3. Click on Web Applications link. It will open a blank UI5 App as shown below:
  
  This confirms that the UI5 app is working fine.
  If you click the services endpoints link, then you will see an OData as shown below:
  
  This confirms even our services are working fine. This is a green signal for deployment.
4. Now open a new terminal and write mbt build. This will generate a new folder “mta_archives” with a mtar file
  The above step will also generate new folders
5. Before we deploy to SAP Cloud foundry, we have to login in our environment. In terminal write cf login
  Enter API endpoint: https://api.cf.eu10.hana.ondemand.com/ (or whatever it is for you)
  followed by your login email and password
  You will be logged into your respective environment. In case you have multiple subaccount, then you might be asked to choose one of them (using a number)
6. Now right click on the mtar file generated and click “Deploy MTA Archive”
This will deploy the app in cloud foundry or SAP BTP. In the terminal you will get successful message that all the services were deployed.
1. To test the deployed UI5 App, go to SAP BTP and reach your respective subaccount -> space. Here list of applications will appear, search for your approuter.
  
  Open it. You will find a link. You can even find it within the terminal after deployment, e.g.:
2. Opening only App Router will give error “Not Found”. So, append your approuter as mentioned below:
  Extend the URL with the application ID “/<app ID>”:
  https://ps-scp-<space name>-mta-<app name>-approuter.cfapps.<region>.hana.ondemand.com/<app ID>Note! If the “<app ID>” contains dots e.g. “<app ID>” is “test2.test.1.test0”, dots should be ingnored and the URL should look as:https://ps-scp-<space name>-mta-<app name>-approuter.cfapps.<region>.hana.ondemand.com/test2test1test0
In our use case the url will be: <app router>/nscap-test/index.html
1. After login, you will see the below link:
Congratulations, you have successfully created your CAPM UI5 App and deployed the same. You can also check other ways to create a UI5 CAPM App.
October 9, 2021
AppRouter in SAP BTP
Preface – This post is part of the SAP Multi-Target Application (MTA) series.

Introduction

In the era of cloud applications, a single project has multiple UI5 applications and multiple microservices. In this use case either we can have individual urls to access these or a single url that can act as an entry point. An approuter helps developers to get a single url to access all their apps and microservices. In this article we will learn more about AppRouter in SAP.

What is App Router in SAP?

SAP Cloud Foundry provides a nodeJs library in the form of BTP instance that acts as a single point-of-entry for an application or microservice running in the Cloud Foundry. It is known as Application Router or App Router or AppRouter.

We can perform following operations using App Router:
- Serve static data: The index.html file within App Router can be used to display static content or welcome page of an application
- Authenticate users: A user can be authenticated at approuter level, even before accessing any application
- Rewrite URLs: It can be used to integrate destination, integrate business services and even perform logout for an application
- Request to other microservices within same project
Types of App Router in SAP

SAP provides two types of approuter, they are:

1. Standalone Approuter

A standalone approuter is a custom approuter that is created and maintained by developer. A developer has to update the xs-app.json and MTA.yaml files according to the project needs.

2. SAP Managed Approuter

A SAP Managed Approuter enables a developer to execute HTML5 applications in SAP Cloud Platform. It is completely managed by SAP, hence you are not required to update any details further, once created.
To use managed application router, SAP provides three options:
- SAP Work Zone
- SAP Launchpad service
- SAP Cloud Portal
Once the application is deployed, the apps are available under the tab HTML5Repository within sub-account.

How to add Standalone Approuter using BAS?

To add a standalone approuter using BAS, follow the given steps:

Step 01: Create a MTA or CAPM Application such that your project has a MTA.yaml file.

Step 02: Right click on the MTA file and click “Open MTA Module from Template”

Step 03: Click “Approuter configuration” from the wizard

Step 04: Enter the details as shown below:

That’s it, an approuter will be added in your project with configuration in MTA file. Read more about it here.

How to add Managed Approuter using BAS?

The creation of SAP Managed approuter is almost similar to Standalone approuter until step 03.
In step 04, you need to choose “Managed Approuter” from the drop down, followed by a unique name for the approuter. That’s it, an approuter will be added in your project with configuration in MTA file. Read more about it here.

Once deployed, you can visit HTML5 Applications under your subaccount. In case you see the given screen:

In this case you need to subscribe any of the above, then you will be able to see your Applications as shown below:
October 8, 2021
How to create and deploy CAPM using BAS Extensions
Preface – This post is part of the SAP CAPM series.

Introduction

SAP CAPM is the new and most efficient way to develop SAP Cloud Applications. SAP Business Application Studio is the appropriate IDE that should be used for CAP Application creation. In this article we will explore SAP BAS, CAP Development and CAP Deployment over SAP BTP. Let us explore how to create and deploy CAPM using BAS Extensions.

Steps to get started with BAS

Step 01: The very first step is to visit Business Application Studio using SAP BTP.

Step 02: Create a Dev Space by clicking the button as shown below:

Step 03: Give a suitable name for your space and choose Full Stack Cloud Application

A CAPM space will be created as shown below. Click it.

It will open the Business Application Studio Editor (BAS).

Extensions in BAS

In this article we will learn how to use Extensions in BAS for application creation.
1. Click on View -> Find command
2. Search “Generators” and click on “Explore and Install Generators”
3. From the search shortcut, filter SAP UI5 and install “generator-sap-ui5-app”, “generator-easy-ui5” and “generator-ui5_to_mta” and other UI5/Fiori extensions.
The above will be helpful in creating UI5 projects and auto generate codes for us.

Steps to create a CAPM Project
1. Click “Start from template” in welcome screen
2. Select CAP Project and click Start
3. Provide a name of the project and choose the one shown below:
4. Click Finish. This will generate a project and will open up the same.
5. In case you get a popover to install recommended extension, click install.
How to add a UI5 project in CAPM using Extension

The newly created CAP project will have empty app folder as shown below:
1. Open View-> Find command (or ctrl+shift+P)
2. Find “Run Generator”
3. Now find “fiori-module:app”. This will only appear if you install all the extensions that we have mentioned above.
4. This will open a wizard. Choose the App folder and click Next
5. Enter Module name, it will be the name of your UI5 App, and click Next
6. Choose SAPUI5 Application and click Next
7. Choose the App Router
8. Choose Authentication option.
9. Choose View name
10. Now, you will see both UI5 and App router is generated
Even in MTA you can see these added:
cap-test-approuter
cap-test_html_repo_runtime
cap-test_ui_deployer
ui5-test

With all other important files that are mandatory for UI5 module deployment over BTP. Now we are ready to test it locally and deploy it over BTP.

Steps to test and deploy whole CAPM project on SAP Cloud foundry (or SAP BTP)
1. Open Terminal from the menu bar
2. To test the App locally, write cds watch. You will see a pop up, press “Expose and Open”. You will see a new tab:
3. Click on Web Applications link. It will open a blank UI5 App as shown below:
  
  This confirms that the UI5 app is working fine.
  If you click the services endpoints link, then you will see an OData as shown below:
  
  This confirms even our services are working fine. This is a green signal for deployment.
4. Now open a new terminal and write mbt build. This will generate a new folder “mta_archives” with a mtar file
  The above step will also generate new folders
1. Before we deploy to SAP Cloud foundry, we have to login in our environment. In terminal write cf login
  Enter API endpoint: https://api.cf.eu10.hana.ondemand.com/ (or whatever it is for you)
  followed by your login email and password
  You will be logged into your respective environment. In case you have multiple subaccount, then you might be asked to choose one of them (using a number)
2. Now right click on the mtar file generated and click “Deploy MTA Archive”
This will deploy the app in cloud foundry or SAP BTP. In the terminal you will get successful message that all the services were deployed.
1. To test the deployed UI5 App, go to SAP BTP and reach your respective subaccount -> space. Here list of applications will appear, search for your approuter.Open it. You will find a link. You can even find it within the terminal after deployment, e.g.:
2. Opening only App Router will give error “Not Found”. So, append your approuter as mentioned below:
  Extend the URL with the application ID “/<app ID>”:
  https://ps-scp-<space name>-mta-<app name>-approuter.cfapps.<region>.hana.ondemand.com/<app ID>Note! If the “<app ID>” contains dots e.g. “<app ID>” is “test2.test.1.test0”, dots should be ingnored and the URL should look as:https://ps-scp-<space name>-mta-<app name>-approuter.cfapps.<region>.hana.ondemand.com/test2test1test0
In our use case the url will be: <app router>/nscap-test/index.html
1. After login, you will see the below link:
Congratulations, you have successfully created your CAPM UI5 App and deployed the same. You can also check other ways to create a UI5 CAPM App.
October 8, 2021
How to Deploy BSP Application on the Fiori Launchpad
Introduction

In this article we will discuss how to deploy BSP Application on the Fiori Launchpad. If you are looking to deploy your UI5 Application directly on the Fiori Launchpad to the Neo Environment, then click here and if to the Cloud Foundry Environment, then click here.

A BSP Application stands for Business Server Page Application is a Web Application created using UI5/Fiori and executed in a web browser. It is an on premise UI5 Application. In this article we will not focus upon the creation and processing of BSP Application rather focus on its deployment over the Launchpad.

Prerequisite

Following are the prerequisite of the BSP App Deployment:
- You need to have a UI5 Application already in place and ready for deployment
- The UI5 App should have a unique App id maintained in manifest.json
- The WebIDE should be connected to the respective SAPUI5 ABAP Repository System
- The UI5 App should be error free and no duplicate ID’s should be used throughout the App
- You should have a package and transport requests (both workbench and customizing request) in place
Steps to Deploy BSP Application on the Fiori Launchpad

1.      Upload the SAP UI5 Application as a BSP Application to the Gateway Server

2.      Create a Launchpad Role in LPD_CUST Transaction

3.      Create a Semantic Object in /UI2/SEMOBJ Transaction

4.      Create a Catalog, Target Mapping and Static Tile

5.      Create a Group and Add the Catalog

6.      Create a PFCG Role for the Catalog and Group

7.      Test your App on Fiori Launchpad

Errors Faced During Deployment

While deploying a UI5 Application as a BSP application, you might face given errors:
- You don’t have the needed Authorizations to deploy
- Authorization error when connecting to Gateway from WebIDE
- You get an error when your system is selected in the first step of the wizard
- WebIDE deploy error ,Not able to access Gateway system from WEB IDE
- CSRF token validation failed while deploying extended fiori application to ABAP Repository
- Cannot select the system. Check the configuration for ABAP Development Tools
- Error Connecting to ABAP Repository from webIDE.
- CSRF token validation failed” error when trying to reach /sap/bc/adt/cts/transportchecks service
- Cannot deploy application XYZ: Remote creation in customer namespace not possible
- Cannot deploy application XYZ: SAP object YYY cannot be assigned to package ZZZ
- No development license for user XYZ
- Object X is already locked in request Y of user Z
- Cannot deploy the application. Virus scan server error. No virus scan profile is selected as the default
- Cannot deploy the application: Request XYZ is not a local request
- Cannot deploy application <app name>: HTTP Status 504 – An internal application error occurred
- Cannot deploy application <app name>: Resource XYZ does already exist
- File <namespace/<app name>/index.html NOT found!
If you face any of the error mentioned above, follow the given steps to trace the error root cause:
1. Run ST22 transaction to check any dump raised in backend
2. Run /IWFND/ERROR_LOG transaction to check Gateway error log
3. Run your Inspect Element in browser (Ctrl + Shift + I) and read the error and the solution mentioned there
4. Check the error resolution mentioned here
5. Check SAP Notes for your error here
May 10, 2020
SAP Fiori Launchpad Tiles Setup
Introduction

SAP Fiori Launchpad is one stop to access all the SAP Fiori Applications. To make your Fiori Application visible on SAP Fiori Launchpad, you need to do Tiles setup. You need to create a tile and a catalogue and configure both of them with your application. In upcoming section we will teach you to do so step by step.

Steps to do SAP Fiori Launchpad Tiles Setup
1. Go to Given transaction in your backend system to open Fiori Launchpad: /n/ui2/flp – fiori launchpad. To Open Designer Link: /n/ui2/flpd_cust – designer. It will open a link on your browser. [Raise, if you don’t have]
2. Go to settings and select customizing TR.
3. Go to Catalogs, Click the button below:
- Enter Name [App Name]
- ID [ZC_*].
1. Click on tiles, Create tile -> Click on Static Tile
- Enter Title [App Name], Semantic Object [no special/ space character ( . and _ allowed) à Unique Name], Action[manage] and click on Save
1. Click on Target Mapping à Create Target Mapping
  1. Enter Same Semantic Object, Action and Title
  2. Application Type à SAPUI5 FIORI APP
  3. ID à Component ID [ID in Manifest.json]
2. Click Group, create group the way catalogue was created
  1. Name à same as catalogue / App Name/ etc [Visible on FLP]
  2. ID à ZG_*
3. Click on + button, Give your catalogue name, your tiles under that catalogue will be visible.
4. Click on + button under that tile, to add it in the group.
June 7, 2019