Skip to Content
Technical Articles
Author's profile photo Saket Amraotkar

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

  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 SAP BTP 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 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:

 

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

 

  1. 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-studio-bas-and-troubleshooting/

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

Assigned tags

      22 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      Hi Saket,

      Thanks for sharing details.

      Regards,

      Dibyajyoti Nanda

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Thanks Dibya.

      Author's profile photo Paulo Castro
      Paulo Castro

      Yes…it is the way i´m looking for. i will get a onpremise SAP to test the BAS app on it.

      Very good paper informations.

      One question: How the End User access the Fiori application? Where the App is registered and how it is deployed? The image dont show.

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Hi Paulo,

       

      Thanks for your comments, you can visit my next blog where i have explained about, How to develop and deploy fiori application to on-prem SAP system.

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

      I hope this will help you out.

       

      Regards

      Saket Amraotkar

      Author's profile photo Nivardo Edwin Tahua Quijano
      Nivardo Edwin Tahua Quijano

      Very useful,

      Thanks for sharing!!!

       

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Thanks Nivardo.

      Author's profile photo Prasun Jha
      Prasun Jha

      really helpful, specially ignoring the error part

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Thanks Prasun

      Author's profile photo Felipe Araujo de Carvalho
      Felipe Araujo de Carvalho

      Excellent!
      Thanks for sharing!

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Thanks Felipe.

      Author's profile photo jhansi rani jeganesh
      jhansi rani jeganesh

      Very Helpful! Thanks for sharing

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Thanks Jhansi rani.

      Author's profile photo dylan drummond
      dylan drummond

      Thanks Saket, very helpful blogs, this one especially the Destination properties and ignoring the Check Connection result, and the subsequent one explaining that we need to add a Role Collection.

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Thanks Dylan.

      Author's profile photo dylan drummond
      dylan drummond

      I referenced your blogs in my latest blog, hopefully that is ok with you:

      https://blogs.sap.com/2020/12/02/connecting-sap-business-application-studio-to-an-on-prem-python-http-server-and-to-a-sicf-ping-service/

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Sure Dylan, as long as it helps other people to get more knowledge.

      Author's profile photo Charles Richir
      Charles Richir

      Exactly what I was looking for. I could make it work thanks to you

      Author's profile photo Party Tecnico
      Party Tecnico

      Hi Saket Amraotkar

      I have installed the version SAP ABAP Platform 1909 developer edition, and SAP Cloud Conector.
      This version is ready to work on a Docker
      I have configured a destination that is pointing to this On-premise system.

      IN SAP Cloud Connector have this:

       

       

      However in The BAS no appear information in the catalogs in the BAS-->Service Center

       

      How can solve this issue?

       

      Regards

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Hi Party,

       

      Try adding resources in Cloud connector as /sap/

      And make sure required services are active.

       

      Regards

      Saket Amraotkar

      Author's profile photo Party Tecnico
      Party Tecnico

      Hi Saket Amraotkar

      With you suggestion the issue was solved and work fine. Howeve now when I Chech the connection in BTP, the system generate this message of error.

       

      Failure reason: "Resource is not accessible in Cloud connector or backend is not reachable"

       

      I have checked this note:

      2719609 - SAP Cloud Platform HTTP destination check fails - Resource is not accessible in Cloud connector or backend is not reachable | SAP Knowledge Base Article

       

      However the issue follow:

       

      I found this:

      https://answers.sap.com/questions/12619024/the-cloud-connector-not-connect-to-back-end.html

      And added:

      /sap/bc/

      And how work fine.

      I have a doubt, What is the reason What the system not can avoid this error?

       

       

      Thank you!

      Author's profile photo Saket Amraotkar
      Saket Amraotkar
      Blog Post Author

      Check If the services at mentioned path are active or not of not you may need to activate.

      Author's profile photo Thulani Ngwenya
      Thulani Ngwenya

      This is very helpful. Thank you very much.