Skip to Content
Technical Articles

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

Hi Techies,

This post, I will cover to set up connection between on-premise SAP (ABAP) system with SAP Cloud Platform 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:

  • Environment Pre-requisites:
    • SAP ABAP/HANA/GW etc system
    • SAP Cloud Platform – Cloud Foundry
    • SAP Cloud Connector

 

  • System Readiness:
    1. Creation of Cloud Foundry Account on SAP Cloud Platform
    2. Installation of cloud connector – https://developers.sap.com/tutorials/cp-connectivity-install-cloud-connector.html
    3. Configuration of Cloud Foundry account on cloud connector
    4. Configuration of on-prem SAP System
    5. Assign your CF user to a developer role
    6. Creation of Destination for on-prem SAP system on Cloud Foundry
    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 Cloud Platform – Cloud Foundry (CF): 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 CF and on-premises SAP system.

 

  • System Readiness:
  1. Create trial account for Cloud Foundry on SAP Cloud Platform – 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 cloud foundry 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

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

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

  1. Configure Cloud Foundry account on cloud connector:

 

Click on Add Subaccount and provide details as below:

After adding subaccount cloud connector will looks like:

 

  1. 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:

  1. Provide mandatory roles to CF user:

 

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

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

And add below role by clicking on Assign Role Collection:

 

  1. Creation of Destination on CF:

On cloud Foundry 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.

If you test the destination connection by clicking on Check Connection:

It will give above error.

Do not Panic, this is known issue of destination on CF so please ignore this error as of now, SAP development team is working on this issue.

 

  1. Setting up BAS for UI5 development:

On CF click on subscription:

And subscribe for SAP Business Studio (BAS):

After successfully subscription, click on Go to Application:

Click OK

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 Cloud Foundry space using SAP Business Application Studio (BAS) by utilizing on-premise SAP (ABAP) system via cloud connector.

 

Next post, i will explain how to develop & build SAPUI5/Fiori like app using BAS, along with few troubleshootings.

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

Your comments are welcome.

 

Regards

Saket Amraotkar

14 Comments
You must be Logged on to comment or reply to a post.