Developing SAP UI5 App using SAP Business Application Studio

Introduction:

SAP provides new development tool(IDE) called “SAP Business Application Studio” to the customers for developing SAP UI5 Applications in Cloud Foundry environment.

Read More: SAP Fiori Application Developer Certification Preparation Guide

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.