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

Develop & Deploy SAPUI5/Fiori like app using SAP Business Application Studio (BAS) and Troubleshooting

Hi Techies,

 

This post may be absolute soon as the template which i have used is deprecated and soon will be removed from the platform also.

I will post new post to develop SAP Fiori/SAPUI5 app using Freestyle approach soon and provide link here.

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

New Updates: After receiving many requests for help/issues related to deployment process in my mail box, I have updated the content with latest deployment process. 

New updates are available now in Section 1 and 2.

In the last Post, we covered set up for connecting on-premise SAP ABAP system with SAP BTP via cloud connector:

https://blogs.sap.com/2020/10/28/setup-sap-business-aapplication-studio-bas-for-developing-sapui5-fiori-like-app-using-on-premise-sap-abap-system./

 

I have taken reference from Yuval Morad’s recent blog:

https://blogs.sap.com/2020/07/21/sap-fiori-development-with-sap-business-application-studio/

https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/340cf0109ec6451c88f7a0129990de59.html

 

In this Post we will cover:

  1. Development using on-prem OData service 
  2. Deployment of SAPUI5 application on SAP on-prem system
  3. Troubleshooting

Let’s see these activities step by step.

  1. Development using on-prem OData service:

Click on File->New Project from Template – this is the same option which we used to select while developing application from template in WebIDE.

OR

 

Select Fiori Application:

Select Application type: SAPUI5 freestyle for ui5 app

 

select data source/ system / Service as shown:

Select Entity and properties:

Project Attributes:

After creation of project, project structure will looks like:

 

You can run the application using two options:

A. Preview Application

B. Using Run configuration

A. Preview Application:

B. Run configuration:

Select Project Name and click on Run Configuration:

Click on + button to add configuration to run the app (this step is almost similar in WebIDE).

It will prompt project name which you wish to create run configuration for:

Select index file to run the app locally on browser:

 

Select the UI5 plugin version to run the app:

Finally select the project name which you wish to run:

Now you can see new configuration under Run Configuration section:

Now still we are not done, we need to connect our data source to this configuration by selecting Bind option on Data Source as shown in above image.

It will ask you to select which destination you wish to connect this run configuration to.

select the destination which we created on CF:

Now if you see data source turned into green on left side and with plugged icon on right side, which means our Run configuration is ready to test on app.

Now click on run icon on Run zprojBAS to launch the app:

It will process the app which can be seen in console.

It is asking to expose and open port 6004 for application usage, click on it:

It will ask you to set description for the above port configured:

It will launch the application on new tab on browser to test app locally:

OR you can right click on project and select option Preview Application:

You can now test the app which you build locally on browser before deploying the app to ABAP system.

 

 

      2. Deployment of SAPUI5 application on SAP on-prem system:

Before we deploy the app to ABAP system, let’s do a quick check on pre-requisites:

  • See the prerequisites listed in Developing an SAP Fiori Application Based on an SAP S/4HANA System.
  • Make sure that your WebIDEUsage includes dev_abap for deploying to the SAPUI5 ABAP Repository. (For example, your WebIDEUsage includes odata_abap,dev_abap).
  • Make sure to add the HTML5.Timeout= 60000 additional property to your destination.
  • For deploying to SAP S/4HANA on-premise, you need to set up an on-premise destination and the cloud connector. See Cloud Connector.
  • For deploying to SAP S/4HANA on-premise, you should add the sap-client additional property to your destination.
  • For deploying to SAP S/4HANA Cloud, you need to set up a destination to an S/4HANA Cloud system with SAML Bearer Assertion authentication. See Using SAML Bearer Assertion Authentication.
  • Target ABAP system must include the SAP_UI 753 SP00 or higher version of the software component.

Reference: https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/340cf0109ec6451c88f7a0129990de59.html

SAP recommends to use new deployment commands which is why i have removed old commands and updated the latest commands to deploy the app to on-premise SAP server.

Once all the pre-requisites are in place and the application is tested successfully, we are good to go for deployment of application to SAP on-prem system which we configured on cloud connector.

Select the project and click on Terminal and click New Terminal:

Now for the first time we need to run few command:

you may get below message in case your project is missing ui5-deploy.yaml file which contains deployment information like package, Transport etc:

So we need to run

npm run deploy-config

command to generate the ui5-deploy.yaml file:

you need to provide details as below:

 

You can deploy app using $TMP also in case you do not have package and TR.

Note: TR should be workbench request.

 

Now we are good to deploy the app using below command:

 

Once you execute this command, you need to confirm the use of existing ui5-deploy.yaml file to deploy the app–> type Y to proceed:

Now let’s test the application from SAP ABAP System where we just deployed the app.

Login to SAP system to test the app.

Open t.code SICF and search for the project name which we use while deployment zprojbas in service name and execute (F8):

 

Right click on service and click Test:

 

It will open the application on browser and will ask for your SAP credentials:

 

You can now configure the application to Fiori Launchpad.

 

 

      3. Troubleshooting

Now let’s see few troubleshooting which may occurs in deployment of app.

  • Deployment of application fails with 403 error: Failed to deploy Application: <Request failed with status code 403>

Check error on GW server using t.code: /n/iwfnd/error_log:

    1. No service found for namespace ‘/UI5/’, name ‘ABAP_REPOSITORY_SRV’, version ‘0001’
    2. No service found for namespace ‘/BSNAGT/’, name ‘FIORI_MONI_SRV’, version ‘0001’

Maintain above oData services on GW server and error will be resolved.

 

  • Wizard keeps asking for SAP backend credentials While setting OData service from Destination while creation of application:

Check your cloud connector has same CF account active and in running state,it  is not in running state, please connect and try again.

 

After going through this post you should be able to develop and deploy SAPUI5/Fiori like application by utilizing OData service from on-premise SAP system using SAP Business Application Studio (BAS) which is next generation of WebIDE.

I hope this post will help you to deploy the ui5/fiori like application to your on-premise SAP system.

 

Regards

Saket Amraotkar

 

Assigned Tags

      48 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Paulo Castro
      Paulo Castro

      Great... very good ... i will try to deploy an application to Success Factors.

      Author's profile photo Prasun Jha
      Prasun Jha

      thank you Saket for sharing..

      Author's profile photo vijay yadav
      vijay yadav

      Hii Saket,

      I have migrated my application from WEBIDE to BAS.

      When I am deploying the application from BAS, it is getting deployed in Create mode and is giving an error as:

      Failed to deploy Application: <SAPUI5 ABAP Repository with name “X” already exists SAPUI5 ABAP Repository with name “X” already exists>

      Deploy%20error

      Deploy error

      Can you please help me on this. Thanks.

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

      Hi Vijay,

       

      Did you provide package and TR while deployment or you are using $TMP?

      Did you added HTML5.Timeout = 60000 additional parameter in your destination on CF?

      It is quite possible that your application might not got have deployed propely at first attempt.

      Are you able to deploy new application which is created in BAS?

       

      Regards

      Saket Amraotkar

      Author's profile photo vijay yadav
      vijay yadav

      Hi Saket,

      Thank you for your reply.

      I provided the correct package and TR, in which the application is stored.

      Yes the additional parameter is updated along with HTML5.Timeout = 60000.

      It's a live application which was created on WEBIDE.

      I have migrated my application from WEBIDE to BAS, after adding the required files, I ran it, it ran properly, but while deploying it on ABAP repository, it always gets deployed in Create mode, ideally, it should be deployed "update" as the application is already there in my system.

      When I deploy the application with another name and $TMP, it gets deployed .

      But I have to update an existing application . Kindly let me know, if you can suggest something.

      Thanks Again.

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

      Hi Vijay,

       

      1. When you deployed the app from WebIDE, the TR which was used is released or it still modifiable? if it is modifiable you need to re-use the same TR.
      2. Could you please deploy the app with abap-deploy --log-level=error? and check for log file.
      3. Please post the screen shot of your Project in BAS

      Regards

      Saket Amraotkar

       

      Author's profile photo Paulo Castro
      Paulo Castro

      Hy Saket, i´m trying to connect the VStudio with the Sap SF Demo. From the Sap BAS works well because use the Destination connector. But how to do with the VStudio Code?

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

      Hi Paulo,

       

      Great to know that you have resolved the issue on your own.

      It would be great,  if you could share resolution for your issue, it would be reference for others who possibly could face same issue.

       

      Regards

      Saket Amraotkar

      Author's profile photo Sonu Mandal
      Sonu Mandal

      Hi Saket,

       

      Getting error "bash: abap-deploy: command not found". Could you please help.

       

      Thanks!

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

      Hi Sonu,

       

      Please post screen shot of error.

       

      Regards

      Saket Amraotkar

      Author's profile photo Sonu Mandal
      Sonu Mandal

      Thanks for quick response Saket. Please find the error screen shot below:

      Deploy%20Error

      Deploy Error

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

      Hi Sonu,

       

      Please make sure you are in the project directory,I can see you are in bash directory, is that your project folder?

       

      Also try to execute with log to captures errors.

       

      Regards

      Saket Amraotkar

      Author's profile photo Sonu Mandal
      Sonu Mandal

      I am trying from project directory only Saket. "Case" is my Project. error is coming from bash directory.

       

      Thanks!

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

      Hi Sonu,

       

      Please provide me your email address, I will connect you on this.

       

      Regards

      Saket

      Author's profile photo Sonu Mandal
      Sonu Mandal

      Hi Saket,

       

      Its sonumndl@gmail.com

       

      Thanks!

      Author's profile photo Priyanka Kes
      Priyanka Kes

      Hi,

      abap-deploy command is deprecated now from SAP Business Application Studio.

      Below are the new commands:

      Generation of Deployment Configurations
      npx fiori add deploy-config

      Deploy to ABAP system
      npm run deploy

      link for Reference:

      https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/1b7a3be8d99c45aead90528ef472af37.html

      Thanks,

      Priyanka

      Author's profile photo Harish Munigala
      Harish Munigala

      Hi Saket,

      Thanks for very good blog with clear steps to follow. I am almost end of the process, but got stuck while deploying the app to the SAP system.

      I am at a step where I specify "./dist" and enter. After that I get the response with ">sap2cf(…:100)". At this point nothing happens, I tried using arrow keys but no response at the console, finally when I hit on enter key. Gives me error "Missing <dist/manifest.json>".

      Any suggestion how to fix the issue?

      Regards,

      Harish

       

       

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

      Hi Harish,

       

      Hope your destination in Cloud Foundry is in place and cloud connector is configured with same cloud account and configured sap system as shown in my blog.

      Can you pls paste the content from log file?

       

      Regards

      Saket

      Author's profile photo Harish Munigala
      Harish Munigala

      Thanks Saket for the quick response. I did configured Cloud Foundry as per the blog steps and connector is configured with the same account. I am able to see the report output with data from SAP system.

      I didn't see any records in "abap-deploy.log" file. Can you direct me where I can see the logs?

      Thanks,
      Harish

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

      Hi Harish,

       

      Please provide your email address, will connect for screen sharing session to look into this issue.

       

      Regards

      Saket Amraotkar

      Author's profile photo Harish Munigala
      Harish Munigala

      Sure. Here is my email HARISH.MUNGALA@GMAIL.COM

      Regards,

      Harish

      Author's profile photo Harish Munigala
      Harish Munigala

      Hi Saket,

      I am sorry that I misspelled my email id earlier. Here is the correct email address: "HARISH.MUNIGALA@GMAIL.COM" . Looking forward to hearing from you.

       

      Thanks,

      Harish

       

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

      Hi Harish,

       

      I hope we identify the issue in last screen sharing session, please let me know if you are able to deploy the app after getting missing authorizations for your user.

       

      Regards

      Saket Amraotkar

      Author's profile photo Huang Joseph
      Huang Joseph

      Hi Saket,

          I have same deploy error , could you please help ? abap-deploy%20command%20not%20found

      regards,

      Joseph

      abap-deploy command not found

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

      Hi Joseph,

       

      Please let me know your email, so that we we can have screen sharing session to resolve this issue.

       

      Regards

      Saket Amraotkar

      Author's profile photo Cesar Gutierrez
      Cesar Gutierrez

      Hi Saket, great blog.

      I have a question, I deployed an application in "update" mode over an on-premise system, but I don't see those changes reflected over my app. I only see the first deploy

      Regards!

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

      Hi Cesar,

       

      I would suggest to capture logs while deploying the app.

      If it did not help, let me know we would set up screen sharing session to look into this issue.

       

      Regards

      Saket Amraotkar

      Author's profile photo Cesar Gutierrez
      Cesar Gutierrez

      Saket, thanks for you replies.

      I found that webbrowser didn't refresh the new version that I deployed.
      when I opened the app in a new "incognito" window, the app reflected the changes that I had made.

      the solution was delete history navigation data from the browser options. Is this normal step after deploy a new app version from BAS?

      Regards!

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

      Hi Cesar,

       

      Please share your email id, i will send invite for screen sharing session in order to undertand your concern.

       

      Regards

      Saket Amraotkar

      Author's profile photo Party Tecnico
      Party Tecnico

      Hi Saket

       

      I have a doubt with an deploy of an application.

       

      My mail es is wsantiagoe at gmail.com

       

      I will send the screen, What is Your mail?

       

       

       

      Author's profile photo Boonsom La-orrattanasak
      Boonsom La-orrattanasak

      Hello Saket,

      i struck on this screen.

      i put my on-premise s4 user and pw but it has been deined.

      any hints please?

      (Soved myself: i  forget to add resource in cloud connector)

      regards,

      Boonsom

       

      Author's profile photo Gabriel Pill-Kahan
      Gabriel Pill-Kahan

      According to KBA 3080040, the abap-deploy command is deprecated. Instead we need to use the "npm run deploy" tool to deploy Fiori applications to ABAP. There's also a reference to help file, https://help.sap.com/viewer/17d50220bcd848aa854c9c182d65b699/Latest/en-US/1b7a3be8d99c45aead90528ef472af37.html

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

      Hi Gabriel,

       

      SAP keeps introducing new tooling for deployment as and when they got something to improve the process.

       

      Regards

      Saket Amraotkar

      Author's profile photo Rakesh Gowdru
      Rakesh Gowdru

      Hi Saket,

       

      Thanks for blog, i am facing below error, when trying to create New Project From Template, Kindly need your help.

      Regards,

      Rakesh G N.

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

      Hi Rakesh,

       

      This usually happens when your backend system (mentioned in destination) is not reachable.

      Please check the connection between your SAP BTP and SAP system.

       

      Regards

      Saket Amraotkar

      Author's profile photo Bala Karthik
      Bala Karthik

      We have a Hub deployment in our landscape. Even though we tried selecting the frontend system while deployment, the application is getting deployed in the backend system. Any suggestions will be helpful.

       

      Thanks,

      Bala Karthik R

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

      Hi Bala,

       

      Usually this would happened due to wrong configuration in destination or wrong server details provided while deploying the app.

       

      Regards

      Saket Amraotkar

      Author's profile photo Manjunath Mn
      Manjunath Mn

      Hi Bala,

      Even I faced similar issue, I taught it would help other community members how I resolved it. While I checked the ui5-deploy.yaml file to verify the target url and client, everything was pointing to FES. The problem is with the service /UI5/ABAP_REPOSITORY_SRV registration which is necessary to be activated to be able to deploy the apps to abap repo. I had registered the service with alias to backend, however the service needs to be registered in FES with LOCAL alias. After I deleted the service registration and re-registered with LOCAL alias, everything worked fine 🙂   

      Author's profile photo Jan Revyn
      Jan Revyn

      Hi,

      In the SAP webide there was the possibility to import an existing sapui5 appl (BSP) from SAP on-premise.

      Now in SAP BAS I can't find a way to import an existing appl.

      I did find some info concerning on-premise upload/download program /UI5/UI5_REPOSITORY_LOAD. Is this how we should load a (.zip) file in SAP BAS ?

      Help would be appreciated.

      Tx

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

      Hi Jan,

       

      The new tool BAS does not allow to (download) import sapui5 app from SAP system as it was available in WebIDE.

      The main reason to remove this feature was, you can actually download (import) and modify the standard ui5 app which should not be the case.

      Hence, if you wan to extend your sapui5 application, you go for adaptation project option.

       

      Regards

      Saket Amraotkar

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      In the ui5-deploy.yaml file you can configure the destination for the deployment.

      Is it possible to place 2 destinations in there, in case an application needs to be deployed on 2 different systems?

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

      Hi Jeroen,

       

      I really doubt to place 2 destinations details in ui5-deploy.yaml file, but you can always change the details in this file to point to different destination (system) at any point of time to deploy to different systems when you want to deploy.

      Let me know if this helps you.

       

      Regards

      Saket Amraotkar

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      well currently, we have a setup where we execute 2 deploys in one npm command in package.json. in those commands we refer to 2 different ui5-deploy.yaml files - each one with a different destination. but in this case the developer needs to remember to include 2 specific deploy.yaml files in the project.

      Therefore, I was just wondering whether is was possible to configure 2 destinations in 1 deploy.yaml file. The latter would be even simpler.

      Author's profile photo Hitesh Nuli
      Hitesh Nuli

      Hi Saket

       

      Just today I have observed that abap-deploy command is not working and need to work through npm run deploy only. But when I am trying through that I am getting error as Request failed with status 502.

      Can you please guide me.

      Regards

      Hitesh

      nulihiteshguptha@gmail.com

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

      Hi Hitesh,

       

      Can you collect logs by running below command:

       

      abap-deploy --log-level=error.

       

      Drop me note on my email address: Saket.amraotkar@gmail.com

      Regards

      Saket Amraotkar

      Author's profile photo Michael Boguth
      Michael Boguth

      Hello Saket,

      same problem here. ABAP-deploy does not work anymore. No log created, nothing happend after entering in the command prompt. How to solve this?

      Regards Michael

       

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

      Hi Michael,

       

      Please drop note for screen sharing session at saket.amraotkar@gmail.com.

       

      Regards

      Saket

      Author's profile photo Mantri Shekar
      Mantri Shekar

      Hi Michael,

      Now abap-deploy command is deprecated. Now we need to use the below commands to deploy Application

      npx fiori add deploy-config

      npx fiori add flp-config

      npm run deploy

       

      Regards,

      Shekar.