Skip to Content
Technical Articles
Author's profile photo Prakash Waddar

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 View => Find Command from the menu bar and select  SAP Business Application Studio:Welcome Page.

 

 

 

Create SAP UI5 App  project by selecting   New project from template..

 

Select  SAP Fiori free style Project Generator and click on Next Button

 

 

 

Select Cloud foundry environment from drop down and select  SAP UI5 Application , click  on Next Button

 

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.

 

 Add SAP UI5 table control code  in  Main.view.xml or We  can add the table control to ui5 application using SAP UI5 Visual Editor Tool.

 

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.

 

 

 

Finally we can see the  Sales Order Application preview. in the browser.

 

 

 

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

Assigned Tags

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

      When i click to run i received this message ... Attribute 'program' does not exist ('{path}'). How to proceed?

      Author's profile photo Yuval Morad
      Yuval Morad

      Please perform npm install, issue will be fixed next release

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      Hi  Paulo,

      Please attach error  screenshot  and which step this error is showing  in the console ?

      Regards

      Prakash

      Author's profile photo Paulo Castro
      Paulo Castro

      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)

       

       

       

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

      Author's profile photo Paulo Castro
      Paulo Castro

      Dont%20works

      Dont works

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

      Author's profile photo Paulo Castro
      Paulo Castro

      Yes...its OK.... the app run ...thanks for your attention

      Author's profile photo Soham Shah
      Soham Shah

      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?

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

       

      Author's profile photo Karthikeyan Sathyanarayanamurthy
      Karthikeyan Sathyanarayanamurthy

      Hi Prakash,

      How do we configure the Token URL for the APIs and consume it in SAP UI5?

      Regards,

      Karthik

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

       

       

      Author's profile photo SAPUI5 SAPFIORI
      SAPUI5 SAPFIORI

      we can unable to connect BAS with our SAP System, can u please provide some lime light on that ??

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

      Author's profile photo Sagar Salyan
      Sagar Salyan

      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?

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

      Author's profile photo Taran kaur
      Taran kaur

      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.

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

      Author's profile photo Taran kaur
      Taran kaur

      Thanks Prakash !

      Author's profile photo gopi vadde
      gopi vadde

      The link which You provided did not solved issue ? is there any alternative

      Author's profile photo Vikas Sreedharan
      Vikas Sreedharan

      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

      1. npm init // to generate the project.json
      2. ui5 init // will generate UI5.yml file to use tooling
      3. npm install //to just add modules needed

       

      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

      {
        "welcomeFile": "/index.html",
        "authenticationMethod": "none",
        "logout": {
          "logoutEndpoint": "/do/logout"
        },
        "routes": [
          {
            "authenticationType": "none",
            "csrfProtection": false,
            "source": "^/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
            "destination": "ES5"
          },
          {
            "source": "^(.*)$",
            "target": "$1",
            "service": "html5-apps-repo-rt",
            "authenticationType": "xsuaa"
          }
        ]
      }
      
      
      
      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      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

      Author's profile photo vishal agrawal
      vishal agrawal

      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

      Author's profile photo Prakash Waddar
      Prakash Waddar
      Blog Post Author

      Hi Vishal,

      May be your missing some  ES5  system configuration while creating your destination in cloud foundry, Please check step2

       

      Regards

      Prakash

      Author's profile photo Pranav Kumar
      Pranav Kumar

      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.

      Please let me know how can i consume the service and build fiori app.

       

      Thanks

      Divya

      Author's profile photo Yuval Morad
      Yuval Morad

      Please share the destination from the cockpit information including the additional attributes.

       

      Author's profile photo Pranav Kumar
      Pranav Kumar

      Hi Yuval Morad

      Below is the destination details.

      Destination%20Details

      Destination Details

      Thanks

      Divya

      Author's profile photo Yuval Morad
      Yuval Morad

      Please have one value in WebideUsage:

      1. odata_gen - for service url destination
      2. odata_abap - for abap service catalog

      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

      Author's profile photo Jose Barajas
      Jose Barajas

      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

      Author's profile photo Yuval Morad
      Yuval Morad

      yes

      https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio

      Author's profile photo Jose Barajas
      Jose Barajas
      Thanks Yuval.
      
      
      And do you recommend it (SAP BAS) to develop on a client launchpad?
      Author's profile photo Kumar kumar
      Kumar kumar

      Hii Prakash,

      Is there any blog for creating Overview Page in BAS?

      Author's profile photo Yuval Morad
      Yuval Morad

      Supported Floorplans - SAP Help Portal

      Author's profile photo . Retail Team
      . Retail Team

      How do i start the UI5 visual editor for my UI5 project in the BAS?

      Author's profile photo Anton Pierhagen
      Anton Pierhagen

      The question above was from me, sorry

      Author's profile photo Prasanna m
      Prasanna m

      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

      Author's profile photo sopiken sopiken
      sopiken sopiken

      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.

      Author's profile photo Madhulatha Pelluri
      Madhulatha Pelluri

      Hi,

      Great useful Information.

      Thanks alot.

      Thanks,

      Madhulatha Pelluri

       

       

       

       

      Author's profile photo Natalia Farina
      Natalia Farina

      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