Setup SAP Business Application Studio (BAS) for developing SAPUI5/Fiori like app using on-premise SAP ABAP System.

[saketamraotkar]

Hi Techies,

This post, I will cover to set up connection between on-premise SAP (ABAP) system with SAP BTP with the help of cloud connector.

Also we will see how to setup SAP Business Application Studio which is next generation of WebIDE for development of SAPUI5/Fiori like app by utilizing the above setup.

The landscape would be like below image:

 

Note: SAP Cloud Platform (Cloud Foundry) is now known as SAP Business Technology Platform (BTP).

• Environment Pre-requisites:
  
  
  
  • SAP ABAP/HANA/GW etc system
  
  
  • SAP BTP
  
  
  • SAP Cloud Connector
  
  
  
  

 

• System Readiness:

1. 
   
   
   
   1. Creation of SAP BTP Account
   
   
   2. Installation of cloud connector - https://developers.sap.com/tutorials/cp-connectivity-install-cloud-connector.html
   
   
   3. Configuration of SAP BTP account on cloud connector
   
   
   4. Configuration of on-prem SAP System
   
   
   5. Assign developer role to your SAP BTP user
   
   
   6. Creation of Destination for on-prem SAP system on SAP BTP
   
   
   7. Setting up BAS for UI5 development
   
   
   
   

 

Let's see these activities step by step:

• Environment Pre-requisites:
  
  
  
  • SAP S/4 HANA/ABAP/Gateway System – You can have embedded or Central hub approach in your system landscape. Here I am using embedded system.
  
  
  
  

 

• 
  
  
  
  • SAP BTP: to use BAS application which will be used to develop and deploy the UI5/Fiori like application to SAP system
  
  
  
  

 

• 
  
  
  
  • SAP Cloud Connector: is used to make secure connection between SAP BTP and     on-premises SAP system.
  
  
  
  

 

• System Readiness:

1. Create trial SAP BTP account – follow below URL:

https://developers.sap.com/tutorials/hcp-create-trial-account.html

After creation of trial account my account looks like:

Click on Trial as highlighted in above snapshot:

 

 

Please note, ID shown in above snapshot will be used to set up SAP BTP account on top of cloud connector where we are going to set up configuration for on-prem SAP system.

By default, dev space will be created and provided by platform

2. Install SAP Cloud Connector – please follow below link to install cloud connector:

https://developers.sap.com/tutorials/cp-connectivity-install-cloud-connector.html

3. Configure SAP BTP account on cloud connector:

 

Click on Add Subaccount and provide details as below:

After adding subaccount cloud connector will looks like:

 

4. Configure on-prem SAP system:

Click on Add as shown in below image on cloud connector under cloud to on-Premises section:

It will start wizard to add SAP system as shown in below steps:

 

Select protocol as per requirement, here I am choosing HTTP, if you wish you can choose HTTPS or any available port.

 

Provide actual SAP IP address or hostname and port

Here we can identify the HTTP/HTTPS port on SAP system by t.code SMICM and follow the path Goto->Services

 

In this step we will provide dummy host name and port for this SAP address which we will use to configure Destination on SAP Cloud Platform (CF).

 

 

Click Finish.

 

We can see in above image that SAP system is reachable to cloud connector.

Now we need to add resources to this system to access it from SCP (CF):

click on Add

If you do not wish to provide /SAP/ as default path which will cover all paths, you can use below mandatory paths:

• /sap/opu/odata


• /sap/bc/adt


• /sap/bc/ui5_ui5


• /sap/bc/bsp

After adding resources, it should look like:

5. Provide mandatory roles to SAP BTP user:

 

Click on Security->Trust Configuration->sap.default

Provide your email id associated with SAP BTP account and click on show assignments:

And add below role by clicking on Assign Role Collection:

 

6. Creation of Destination on SAP BTP:

On SAP BTP account, please click on Destinations under connectivity:

 

Add new destination for sap system which we added in cloud connector:

Provide above details which we configured in cloud connector and add properties on this destination as below:

• HTML5.DynamicDestination


• HTML5.Timeout

These two properties need to add which were not part of destination creation in NEO.

Update: WebIDESystem: sap2cf is not mandatory, you can delete/ignore this entry in additional properties.

Update: Error while testing the destination has been fixed now in 25-Apr-2021 bug fixes by SAP.

Now you can test the destination connection by clicking on Check Connection:

 

 

Also can check now cloud connector status in STP:

 

7. Setting up BAS for UI5 development:

Update: Now subscription has been migrated to Instances and Subscription, and you can activate new services from Service Marketplace:

Search and Create Instance SAP BAS:

Now click on 3 dots as shown in above image and click on create:

Click on View Subscription once its created:

Now click on Go To Application:

 

Click OK to navigate to Dev Space.

Click on Create Dev Space for BAS:

Select the Application type and provide name for Space and click on create Dev Space.

 

 

The dev space for BAS will be created which can be stop/start/delete/download/edit.

To launch BAS platform, click on dev Space name, in my case it is sapFioriDev.

 

 

The Business Application Studio is ready for development of SAPUI5 app.

 

After going through this post, You will be able to setup the development environment for SAPUI5/Fiori like application on SAP BTP space using SAP Business Application Studio (BAS) by utilizing on-premise SAP (ABAP) system via cloud connector.

 

Note: The template which was used in the below post is now deprecated and very soon SAP will be removing it from template section, as this post was created in 2020.

https://blogs.sap.com/2020/10/29/develop-deploy-sapui5-fiori-like-app-using-sap-business-application...

I will update here my new post with new template and tooling to develop Fiori/SAPUI5 app using FreeStyle approach.

Your comments are welcome.

 

Regards

Saket Amraotkar