Technical Articles
Developing SAP UI5 App using SAP Business Application Studio
Hello All,
Introduction:
SAP provides new development tool(IDE) called “SAP Business Application Studio” to the customers for developing SAP UI5 Applications in Cloud Foundry environment.
It helps customers to develop UI5 Apps ,FIORI Element Apps,CAP(Cloud Application Programming Model) ,Mobile application development.
Steps :Developing SAP UI5 Application using SAP Business Application Studio.
1.Setup SAP Business Application Studio in Cloud Foundry environment.
2.Create destination in cloud foundry for consuming ES5 demo oData service.
3.Create SAP UI5 App using SAP Business Application Studio
1.Setup SAP Business Application Studio in Cloud Foundry environment.
Enable SAP Business Application Studio service subscription from Cloud Foundry environment.
https://developers.sap.com/tutorials/appstudio-onboarding.html
Create a Dev Space for SAP Fiori Apps.
https://developers.sap.com/tutorials/appstudio-devspace-fiori-create.html
2.Create destination in cloud foundry for consuming ES5 demo oData service.
Create destination in cloud foundry for accessing odata service from ES5 demo system
To create destination ,click on destination section in cloud foundry
HTML5.DynamicDestination=true
WebIDEEnabled=true
sap-client=002
WebIDESystem=gateway
WebIDEUsage=odata_abap,dev_abap
3.Create SAP UI5 App using SAP Business Application Studio.
Open sap business application studio by clicking on Go to Application.
Open Dev Space for BAS.
In case you could not able to find SAP BAS welcome page , select
from the menu bar and select SAP Business Application Studio:Welcome Page.
Create SAP UI5 App project by selecting New project from template..
Next step is to enter project name and select HTMl5 application as Standalone Approuter
Enter the HTML5 module name and select authentication steps as NO ,finally enter you application namespace , click on Next button
Enter name of the view and add odata service to application ,click on Next Button.
Select SAP system where we want to access odata service and Name of the the odata service.
click on Next button.
After completing all the steps, the tool is creating new workspace for sap ui5 project.
Open Project in new workspace.
I have added code snippet for UI5 table control.
<mvc:View controllerName="ns.HTML5Module.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<Table items="{/SalesOrderSet}">
<columns>
<Column>
<Text text="SalesOrderID"/>
</Column>
<Column>
<Text text="CustomerName"/>
</Column>
<Column>
<Text text="GrossAmount"/>
</Column>
<Column>
<Text text="CurrencyCode>"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{SalesOrderID}"/>
<Text text="{CustomerName}"/>
<Text text="{GrossAmount}"/>
<Text text="{CurrencyCode}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Create Application Configuration for running sap ui5 application
Click on Run configuration.
Click on Plus button to create application configuration.
Select your HTML Application(UI5 App) –Sales Order Application(name of the ui5 application)
Follow below steps to run application
=> Select Index.html file
=> UI5 library version
=> Run html5 module.
Bind oData service destination to the application
Bind ES5 destination to your application => Click on Green symbol button => Select ES5 destination from commond field.
once you bind ES5 destination then destination button status turns from grey color to green color.
Run your SAP UI5 application by clicking on RUN Button.
Open Application Preview on New Tab.
Conclusion – When to use What?
As per SAP, Web IDE Full stack will continue to be available and supported. SAP Cloud Platform, Neo customers can continue using SAP Web IDE as their recommended development environment.
Take advantage of new tool for developing SAP UI5 Apps ,FIORI Element Apps,CAP,Mobile application development.
Thanks
Prakash Waddar
When i click to run i received this message ... Attribute 'program' does not exist ('{path}'). How to proceed?
Please perform npm install, issue will be fixed next release
Hi Paulo,
Please attach error screenshot and which step this error is showing in the console ?
Regards
Prakash
Thanks for your attention…. after i click run… everythings is how you did…
Run your SAP UI5 application by clicking on RUN Button. (data source is green)
Hi Paulo,
Please follow the below blog for resolving error.
https://answers.sap.com/questions/13071171/starting-fiori-app-error-attribute-program-does-no.html
Regards
Prakash
Dont works
Hi Paulo,
Please follow the below blog for resolving error.
https://answers.sap.com/questions/13071171/starting-fiori-app-error-attribute-program-does-no.html
Right-click the folders salesorders.approuter and select "Open in Terminal". In the terminal, execute the command "npm install".
once you executed npm install command on the terminal then you would able to run app on the the browser.
Regards
Prakash Waddar
Yes...its OK.... the app run ...thanks for your attention
How to deploy the APP from SAP BAS to SCP - Cloud Foundry? Will it still need MTA build tool and MTA application to deploy it to SCP - CF?
Hi Soham,
Yes your correct ,we need to build the sapui5 project into a mtar archive file and deploy it to cloud foundry.
Follow the below link for deploying sap ui5 app into cloud cloud foundry.
https://developers.sap.com/tutorials/appstudio-sapui5-create.html
Regards
Prakash Waddar
Hi Prakash,
How do we configure the Token URL for the APIs and consume it in SAP UI5?
Regards,
Karthik
Hi Karthikeyan,
Please check the below link for Calling API Business Hub API from a SAPUI5 Application using business application studio
https://developers.sap.com/tutorials/hcp-abh-api-ui5-app.html
Regards
Prakash
we can unable to connect BAS with our SAP System, can u please provide some lime light on that ??
Hi,
Please check the blow link for connecting BAS to your On-Premise SAP System using Cloud Connector in Cloud Foundry.
https://blogs.sap.com/2020/09/19/how-to-connect-applications-to-on-premise-system-cloud-foundry-environment/
Regards
Prakash
How to create new View in SAP Business Application Studio. In web ide there was an option to create new View, so controller was automatically get created with code template. In SAP BAS how to do that?
Hi Sagar,
Please check the below link for creating new views and controller and routing configuration in BAS.
https://developers.sap.com/tutorials/sapui5-101-add-routing.html
Regards
Prakash
Hi Prakash Waddar ,
Really appreciate your post. It helped a lot. I am having an issue on running:
Error shows in console listen EADDRINUSE: address already in use :::6004 . on running thru the steps described by you. Please provide guidance. Thanks in advance.
P.S i deleted all other RUN configurations still same error.
Hi Taran,
Use below link for resolving your issue.
https://answers.sap.com/questions/13016130/sap-business-application-studio-stop-running-serve.html
Regards
Prakash
Thanks Prakash !
The link which You provided did not solved issue ? is there any alternative
Migrating from WebIDE to Business Application Studio
Hi Prakash,
I have downloaded the open sap course ui51 from
https://github.com/SAP/openSAP-ui5-course/tree/ui51 to DevSpace
Correponding to w2u6, I executed below commands from terminal under folder w2u6
Should we delete the w2u6/neo-app.json file ?
I have created a destination with name ES5 in Cloud Foundry.
When I right click, index.html file, in preview data from ES5 is fetched.
But while running App, data from ES5 is not fetched.
Is this due to any missing configuration in xs-app.json file?
The w2u6/xs-app.json file
Hello Vikas,
Kindly check the below blog for resolving your issue.
https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio/
Regards
Prakash
Hi Prakash,
In the consume service step am not getting the options. Like you have chosen Es5 but am not getting that. I have configured that in trial version as per your document.
Regards,
Vishal Agrawal
Hi Vishal,
May be your missing some ES5 system configuration while creating your destination in cloud foundry, Please check step2
Regards
Prakash
Hi Prakash Waddar
I have added the configuration similar way as mentioned in the blog while creating the destination in cloud foundry.
But still i am unable to consume the service. And i am getting the below error in SAP BAS. Once i select My SAP System and then i selected the destination i created. Next i didnt get the drop down for selecting the services.
Thanks
Divya
Please share the destination from the cockpit information including the additional attributes.
Hi Yuval Morad
Below is the destination details.
Destination Details
Thanks
Divya
Please have one value in WebideUsage:
In addition if the url value in the destination refers to the actual service and not to the host, please add WebIDEAdditionalData = full_url
I assume the service url is exposing OData
Hi Prakash,
You wrote that “SAP Business Application Studio” is a developer tool to the customers for developing SAP UI5 Applications in Cloud Foundry environment.
Do you know if I can use SAP Business Application Studio to deploy in my custom Gateway?, Can I replace SAP WebIDE by SAP Business Application Studio?
Thank you very much.
Regards,
Jose
yes
https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio
Hii Prakash,
Is there any blog for creating Overview Page in BAS?
Supported Floorplans - SAP Help Portal
How do i start the UI5 visual editor for my UI5 project in the BAS?
The question above was from me, sorry
Liked the simplicity of this blog.
Rookie question:
At the consume service dialog while creating the application, we selected the Destination and the service we want to use. Then what does the 'binding' step in 'run configuration' step do extra?
thanks
Hi Prakash Waddar ,
I check on creating mobile app using MDK project template, but i noticed that the project is not sapui5. Would you know how to create a sapui5 mobile app in bas? Thank you.
Hi,
Great useful Information.
Thanks alot.
Thanks,
Madhulatha Pelluri
Hi Prakash Waddar ,
thanks for the information. It was great. However, I am getting the next message while checking the connection with ES5.
Connection to "ES5" established. Response returned: "307: Temporary Redirect"
Any ideas how to solve this ?.
Thanks in advance,
Natalia