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..
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 d
estination 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