Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP UI5

Consuming publically available oData Service


This tutorial explains how to consume publically available oData services and display them in the UI using Table control.
For more information about oData services refer: http://www.odata.org/
In this tutorial I am going to use one of the services that are available in the oData.org:
Note: You should be connected to internet to use these service.

You can see the sample oData services available in the oData Services tab:
clip_image002[4]

I am going to use the oData service northwind in this tutorial. Click on the link for northwind to see the oData service.
This service provides data on different collections like orders, Customers, Products , Employees and so on. You can choose the entity on your own.
Add the name of the collection to the service URL to see the data in it.
Eg: For customer’s collection: clip_image004[4]

You can append the url ?format=json with the service to view the data in the JSON format or use any rest client plugins. I have installed  Advanced rest API plugin for the chrome browser.
This provides the data in the viewable format.
clip_image006[4]

Now lets create a Simple UI5 application that consume this service and display the data in the form of table control.
Procedure:
1. Construct a oData model with the service URL
2. Construct a Table UI Control
3. Construct a Array containing a list of columns(FieldCatalog)
4. Add columns to the table
5. Bind the model to the table


Step 1: Create an Application project with the name of your choice and with initial view.
clip_image007[4]

Enter the name of the view as Main and click on finish.
clip_image008[4]


Step 2: Add the Table library in the index.html file.
clip_image009[4]


In the createContent function of main view, construct a oData model for the northwind service.
clip_image010[4]

Step 3: Create an Instance of the Table UI control.
clip_image011[4]
Step 4: For creating each column in a table we need to pass at least two properties, one is label and other the property is template.
For label we construct a label UI and pass the text to it. Template can be anything, A link or Input field or so on. In this tutorial I am going to have all the columns to be Text. Hence it is sufficient that I pass text property.
Create an array and pass the value for the column properties.
clip_image012[4]


Now for each row in the Array, construct a column and add it to the table control.
clip_image014[4]

Step 5: Bind the model to the Table Control and return the Table
clip_image015[4]



Save and run the index.html file.

Output:

If you execute the application, you may not be able to view that data. If you see in the debugger you may notice a error has been triggered – 501 implementation error due to cross origin. This is because of the Web Security of the browser that does not allow data transfer between two hosts.
We need to disable the web security to test our application. In the run window, open the Chrome as below by disabling the Web Security.
clip_image016[4]

clip_image018[4]


In the next tutorial we will see how to process the lead selection.  For the selected customer, we will display the list of orders placed by that customer.



About Arun

1 Comments:

  1. HI could you please provide source code to access the Odata Servcices from SAPUI5

    ReplyDelete

Powered by Blogger.