SAP UI5 is a Java script based open-source web framework developed by SAP. It allows developers to create user interfaces using HTML5, CSS and JavaScript. It is used for building responsive, cross-platform which supports various UI controls and data binding. It also provides effortless support in various data models and views in desktop and mobile applications.
Introduction to OData:
OData (Open Data Protocol) is a standardized protocol used to expose and consume data over the web. It is based on REST (Representational State Transfer) principles. OData simplifies data access and makes it easier for different applications and platforms. It is generally used in web and mobile applications where there is a need to interact with datasource .
Response of OData:
To test any API or OData, Postman is the best platform to see the response. Paste the URL, set the Method as GET and provide necessary details like Parameter,Authorization,Headers, Body if needed and send the request.
Now after successfully sending the request, the response will come like Image1. So, the OData response is working fine in Postman.
Image1
Connection to SAP BTP Cockpit:
Till now the OData response is getting fetched through Postman. But here the main goal is to integrate this response into the SAPUI5 webpage. Now it’s time to integrate this response in SAPUI5 application.
For that first step is to create the destination of that particular OData in BTP Cockpit.For that there are Destinations in the SAP BTP Cockpit. Next Click on the New Destination and configure the details like Image2.
Image2
To check whether this destination is valid click on Check Connection. It should return” OK” status.
Dev Space Creation:
Now it’s the time to move to Business Application Studio and create a project then integrate the response of OData into it.For creating an application, first step is to create a dev space with the following path:
Instances and Subscriptions->SAP Business Application Studio->Create Dev Space. Please fill in the required details and create the dev space like Image3.
Image3
Project Structure:
Now go to the Projects folder and create a project with the Image4 structure. This project contains all the necessary files which are required to build the webpage, defining destination path, routing and all other functionalities.
Image4
Destination Path Details:
In order to make a successful OData call, providing the source, destination and target details are very important in the xs-app.json file. In this case I have used V2 version of northwind OData.
Image5
To successfully read the response, defining the datasource is needed. Now the next step is to define the datasource and specific model in the manifest.json file to build the proper path of the OData call.
Image6
To read the OData response a model is required like hana which consists of type,settings,datasource and to store the OData response in an object a json model is needed. So, in the manifest.json file which exists in the webapp folder, create a local json model along with the hana in the model section.
Image7
As mentioned in the uri in the manifest.json file, create a file called Data.json with the following path : webapp -> model -> Data.json.
Structure to represent OData response:
So, it’s the correct time to call the OData and represent it through a table. In Image8 a table is created with the object name listOfOrders where PersonID,Age and Phone are tagged to the columns.To represent the data to a table,the most important parts are it’s structure and path details.
Image8
The structure of the table has been completed. But as of now there is no data as the path does not exist. To create the object in the controller file, I have just called the OData through the press function of the button present in the view page. So, it is basically reading the Orders and then storing the response in hana model first and then inside the object called listOfOrders which is binded to the table in the view page.
Image9
Response in Web Page:
Now to see the response on the webpage, first build the project and then deploy it to SAP Hana Cloud. So, to build the project click on the mta.yaml file and choose “Build MTA Project” and then go to the already builded mta_archives folder and click on Deploy MTA Archive after selecting the .mtar file.
So, now the project has already been deployed, and the deployed link is present in the terminal itself. Copy and paste the link in a new Tab.Now press the Show Data button and the response from OData will be fetched into hana model and then it will be stored to listOfOrders object, and the data will be displayed through the Table like Image10. In this case, I have showed only CustomerID,EmployeeID and OrderID of each Order.
Image10
In conclusion today’s world OData plays a major role in order to perform different operations. So, successfully calling OData is very important as a basic step towards defining logical service. I believe this blog will be very helpful to add a new dimension to the SAP BTP UI5 capabilities within very less time.
Thanks and Regards,
Debashis Ganguly
- SAP Managed Tags:
1 Comment
