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