Hello Readers,

Hope everyone is doing well!

It’s been a long that I haven’t developed any blog post recently,

Hope you very well know the BAS(Business Application Studio) the new development toolkit provided by SAP.

Introduction:

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

without wasting more time let us all process the learning part,

If you haven’t activated the BAS don’t worry SAP provided the necessary Articles for this

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. Steps: create a destination in the cloud cockpit.

login into your SAP BTP and extend your trial account,

you will see the above screen then–> Enter to Your Trial Account

Global Trial Account

Then you need to enter your trial home of the sap BTP.

Cloud Connectivity

if you came to this screen then you very well know about to add the destinations of your systems.

3. Create a destination in cloud foundry for consuming any demo oData service. 

Create a destination in cloud foundry for accessing OData service from  ECC.

To create a destination, click on the New destination Button in the cloud foundry

all the details will be the same as you are creating any destinations for the WEB-IDE, like Additional Property and necessary stuff.

Destination Configuration

after adding all the details in the destination make sure you check your connection and it should be established and a green popup will execute.

4.Create SAP UI5 App using SAP Business Application Studio.

Open sap business application studio by clicking on SAP Business Application Studio.

SAP BTP Cockpit

after that, you will be redirected to the new screen with your SAP BAS with DEV Spaces.

SAP BAS Dev Spaces

from this there are multiple things that you are aware of.

1. if you are new to this then and you don’t have any spaces just create one, for that, you need to click on Create Dev Space button on the Top Right you can see, after that, you have to write your DEV Space name, and some minor details.
2. if you have created your space then click on the Play Icon as you see on this screen then only your space will start run as you start your car after seating in.
3. after this, your space will come in Starting then to Running Status from red to green color(if you are first time to this it will take time to start).
4. Then you have to click on space on the name you have created, after this you good to go.

SAP BAS welcome screen

after that Create your SAP UI5 project by selecting   New Project from the template.

Select SAP Fiori Application and then click on the Start Button

App Generator

After that, you will see the below screen, then from the dropdown select SAPUI5 freestyle App Type and select  SAP UI5 Application, then click  on Next Button.

App Template

after that, you will be redirected to theData Source and Service Selection screen step.

Data Source and Service Selection

there are multiple options for us to connect with a sap system from the drop-down we have to select the Connect to an SAP System option from the dropdown, there are many other ways also to connect with an OData service but that we will use in our next blog post,

After that one new option, you will see on your screen named System with your ABAP system that you have configured in our earlier steps. in that select your ABAP system.

Service Details

from the above screen after selecting your ABAP system you have to fill your SAP ECC Credentials in the following manner and then click on the icon next to the Password field.

after that, there will be the list of oData service which are in your ABAP system in the dropdown, then select your desired service for which data you need to fetch.

after that give your view name and project name all the necessary kinds of stuff,

that you will see on your left there your project gets created and the main folders go to the web app folder that opens the view and your view.xml and take any ui5 control in which you wanted to fetch your data, here I have taken the simple m.table

 <Table id="getData" items="{/POHeaderSet}" growing="true">
                            <columns>
                                <Column >
                                    <Text text="Number"></Text>
                                </Column>
                                <Column>
                                    <Text text="Status"></Text>
                                </Column>
                                <Column>
                                    <Text text="PO Num"></Text>
                                </Column>
                            </columns>
                            <items>
                                <ColumnListItem>
                                    <cells>
                                        <Text text="{Ebeln}"></Text>
                                        <Text text="{Statu}"></Text>
                                        <Text text="{Bukrs}"></Text>
                                    </cells>
                                </ColumnListItem>

                            </items>
                        </Table>

please note that I have only done code in the XML file you did not want to do any extra code in your controller,

so now that’s it run your project for that also in BAS we have to follow certain steps,

Click on the Run Configuration button from the left.

Run Configuration

Click on the Plus button to create an application configuration.

Select your HTML Application(UI5 App) –(name of  the ui5 application)

then it will see a drill-down on the right side of the panel,

then follow the below steps to run the application

=>  Select Index.html file

    => UI5 library version

=> Run  html5 module.

after that, you will see the below screen,

Run Configuration

once you are done with this then the destination button status turns from grey color to green color.

After you view this type of in your left panel then just click on this Play button, after some time your project will be run ASAP.

Note: make sure in your browser pop-up a window is enabled.

Open App In New Tab

after that Open Application Preview on New Tab.

Finally, we can see the  Application preview. in the browser.

after all this work we see it finally, once you habituate to these steps it won’t be feeling lengthy as quickly as you create and bind oData in web-ide.

Final Application

Conclusion

Take advantage of this new tool for developing SAP UI5 Apps, FIORI Element Apps, CAP, Mobile application development.

so I hope every one of you has learned that how to bind an ABAP OData in the project.

if you face any kind of issues executing these steps kindly comment it down here,

I am always ready to help!!

Thanks for reading, Have fun! with safety!!!

Harshil Patel

SAP UI5/Fiori Consultant