Skip to Content

Introduction to ODATA

OData services are web services that expose some resources. You
can access these resources via URL. OData protocol specifies how you can access
data via HTTP queries. The basic idea is that you can open some URL with
parameters that will execute queries against the resources.

Similar to REST OData builds on core protocols like HTTP and
commonly accepted methodologies

Now getting on with building a sample project using ODATA model.
Here in this article I would even address the issues creeping up while building
an SAPUI5 project consuming an ODATA service so that you have a Demo project,
the issues and their corresponding work around, all under one roof.

Here I would use the following odata service:

http://services.odata.org/OData/OData.svc

You would find an xml
file showing the entities.

First test the service
by pasting the url in the browser.

  If so then this
service is ready for its use in a Simple Odata model in SAPUI5 project.

Now Lets Create a
sample project to test this:

  1. Open Eclipse(Juno/Kepler/Luna). Goto File-  New-Other…
  2. Select SAPUI5 Application Development-Application Project

  3. Give a suitable name

   4.Check the Desktop radio Button.

   5.Select Javascrpit as the Development Paradigm

   6.Click finish.

   7.Since we need a table on the UI. So the bootstrap needs to be changed a bit.

In the
index.html file of the project replace the your bootstrap with the following
code.

<script src=“resources/sap-ui-core.js” id=“sap-ui-bootstrap”

       data-sap-ui-libs=“sap.ui.commons,sap.ui.ux3,sap.ui.table”

       data-sap-ui-theme=“sap_bluecrystal”>

</script>

    8. Since using MVC architecture in SAPUI5 is greatly appreciated, We will be using the same. So now we will define the view.
For that paste the following code within the createContent :
function(oController) of your view .js page.

                // Create an instance of the table control

                        var oTable2 = new sap.ui.table.Table({

                                    id: “Products”,

                                    title: “Table with fixed columns Example”,

                                    visibleRowCount: 7,

                                    firstVisibleRow: 3,

                                    selectionMode: sap.ui.table.SelectionMode.Single,

                                    navigationMode: sap.ui.table.NavigationMode.Paginator,

                                    fixedColumnCount: 7,

                                    toolbar: new sap.ui.commons.Toolbar({

                                                items: [

                                                new sap.ui.commons.Button({

                                                            text: “Create”,

                                                          press: function() {

                                                                        oController.Create();

                                                            }

                                                }),

                                                new ap.ui.commons.Button({

                                                            text: “Update”,

                                                            press: function() {

                                                                        oController.Update();

                                                            }

                                                }),

                                                new ap.ui.commons.Button({

                                                            text : “Delete”,

                                                         press: function() {

                                                                        oController.Delete();

                                                            }

                                                }),

                                                ]

                                    })

                        });

                        // Define the
columns and the control templates to be used

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new sap.ui.commons.Label({

                                                text: “ID”

                                    }),

                                    template: new ap.ui.commons.TextField().bindProperty(“value”,ID”),

                                    sortProperty: “ID”

                        }));

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new ap.ui.commons.Label({

                                                text: “Name”

                                    }),

                                    template: new ap.ui.commons.TextField().bindProperty(“value”, “Name”),

                                    sortProperty: “Name”

                        }));

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new ap.ui.commons.Label({

                                                text: “Description”

                                    }),

                                    template: new sap.ui.commons.TextField().bindProperty(“value”,  “Description”),

                                    sortProperty: “Description”

                        }));

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new ap.ui.commons.Label({

                                                text: “ReleaseDate”

                                    }),

                                    template: new sap.ui.commons.TextField().bindProperty(“value”,  “ReleaseDate”),

                                    sortProperty: “ReleaseDate”

                        }));

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new ap.ui.commons.Label({

                                                text: “DiscontinuedDate”

                                    }),

                                    template: new sap.ui.commons.TextField().bindProperty(“value”,  “DiscontinuedDate”),

                                    sortProperty: “DiscontinuedDate”

                        }));

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new ap.ui.commons.Label({

                                                text: “Rating”

                                    }),

                                    template: new sap.ui.commons.TextField().bindProperty(“value”,  “Rating”),

                                    sortProperty: “Rating”

                        }));

                        oTable2.addColumn(new sap.ui.table.Column({

                                    label: new ap.ui.commons.Label({

                                                text
:
“Price”

                                    }),

                                    template: new ap.ui.commons.TextField().bindProperty(“value”,  “Price”),

                                    sortProperty: “Price”

                        }));

                        return oTable2;

  9. Now  lets move to the controller part. In the
controller.js page define the following the following:

In the onInit:function() paste the following Code:

// Create a model and bind the table
rows to this model

          var oModel = new sap.ui.model.odata.ODataModel(http://services.odata.org/OData/OData.svc, false);

             var oTable =sap.ui.getCore().byId(“Products”);

      oTable.setModel(oModel);

  oTable.bindRows(“/Products”);

  10. Save and run.

Note:
The Create, Update and Delete buttons on the top are not functional as we have not defined their functionality.

Issues:

  • The most commonly faced error is “No DATA ” in the binded table on the UI.

Try testing in Chrome and press F12 so that you could see the Console log.

If the error is as follows:

Failed to load resource: the server responded with a status
of 501 (Not Implemented) http://services.odata.org/OData/OData.svc/$metadata

XMLHttpRequest cannot load
http://services.odata.org/OData/OData.svc/$metadata. Invalid HTTP status code
501

Then, go to the controller.js page, in the section where we have created a model we have used the url

http://services.odata.org/OData/OData.svc

Replace it with the following:

“proxy/http/services.odata.org/OData/OData.svc”

If the error is as follows:

The following problem occurred: HTTP request failed400,Bad
Request,<?xml version=”1.0″
encoding=”utf-8″?><m:error
xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata“><m:code
/><m:message xml:lang=”en-US”>

The
MaxDataServiceVersion ‘2.0’ is too low for the response. The lowest supported
version is ‘3.0’.

</m:message></m:error>

Then you should go for V2<Version 2> service of ODATA.

For that, go to the controller.js page, in the section where we have created a model we have used the url:

http://services.odata.org/OData/OData.svc

Replace it with the following:

“proxy/http/services.odata.org/V2/OData/OData.svc”

Now test it again, and it would work.


To report this post you need to login first.

32 Comments

You must be Logged on to comment or reply to a post.

  1. surya narayana

    HI Ranjit Its very helpful to us.

    I have a problem that when i use the above link  my app is working properly. But when i use the internal url iam getting the below error. Could you please solve my problem. Do i need any netweaver gateway plugin to install in eclipse. If yes could you please provide the download link.

    Error is:

    No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin

    The response had HTTP status code 404.o.defaultHttpClient.request @ resources/sap/ui/thirdparty/datajs.js:17

    sap-ui-core.js:80 2015-05-05 17:10:29 The following problem occurred: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load

    thanks in advance

    (0) 
      1. surya narayana

        when iam working with open url i got the output. but when i using my internal gateway service, iam facing the problem. You can go through my controller code below. Could you please help me in this issue.

        var oModel = new sap.ui.model.odata.ODataModel(“http://server:port/sap/opu/odata/sap/ZFIO_EMPID_SRV/EMPIDSet“, false);

          var oTable =sap.ui.getCore().byId(“EMPIDSet”);

              oTable.setModel(oModel);

          oTable.bindRows(“/EMPID”);

        (0) 
                1. surya narayana

                  Thanks for your help. Thank u so much.

                  i need one more help bro. Could you please explain how to populate the data into combobox from database

                  (0) 
                    1. surya narayana

                      Hi Ranjit.

                      I have a issue. I created a service with entity set consists two values. I want to pass one value as input and fetch the other values as output and display as output in text field. My sample code is here:

                      could you please solve this issue.

                      oninit function in controller:

                      oEntry1.ImUname     =     sapuser;

                      var model1 = new sap.ui.model.odata.ODataModel(“proxy/http/server:port/sap/opu/odata/sap/ZFIO_EMPID_SRV/EMPDETSet(‘”+ oEntry1.ImUname +”‘)”, true);

                      var oJsonModel = new sap.ui.model.json.JSONModel();

                      oModel1.read(“/EMPDETSet?”,null,null,true,function(oData,repsonse){

                      oJsonModel.setData(oData);

                      });  

                      sap.ui.getCore().setModel(oJsonModel);

                      in view:

                      oText = new sap.ui.commons.TextField({id:”firstname”,required:true,text: “{EpEmpname}”})
                      (0) 
      2. Anand Patil

        Hello Ranjit,

        I am very new to SAPUI5. I have copied standard application “SD_SO_MON” (sales order track) from my SAP system to Eclipse. i referred use case document to test this application locally. (I have not made any changes in application, it is just a standard copy into eclipse).

        Setting done to test it locally:

        I have created a project called “SD_SO_MON” in eclipse.

        1. Added below text to the web.xml file.

          <context-param>

            <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>

            <param-value>http://<server_name>:<Port></param-value>

            </context-param>

        2. changed service url in component.js –(SD_SO_MON is name of my project)

        serviceUrl : URI(“/SD_SO_MON/proxy/sap/opu/odata/sap/ZSRA018_SO_TRACKING_SRV/”)

        3. Created dynamic web project “appconfig” with file called fioriSandboxConfig.json

        this file contains below code

        {“applications” : {

             

               “SD_SO_MON-track” : {

                “additionalInformation” : “SAPUI5.Component=zcus.sd.salesorder.monitor”,

                “applicationType” : “URL”,

                “url” : “/SD_SO_MON”,

                “description” :”Sales Order Track”

                }

                }

        }

        4. then i deploy both projects SD_SO_MON and appconfig on tomcat server.

        5. used below url for local fiori launchpad

        http://localhost:8080/SD_SO_MON/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html?sap-uipreload=%20#Shell-home

        6. but when i open my application i am getting error as below:

        Cannot call service with URL: /sap/opu/odata/sap/SRA018_SO_TRACKING_SRV

        Please help me to setup the local testing environment so that i can test application using OData services from SAP server.

        Thank in advance.

        Anand

        (0) 
          1. Anand Patil

            Thank you.

            I have added server name and port in web.xml.

            but still i am not able to access it locally for testing.

            Can any body help me with document how to test application locally using ABAP server.

            Regards

            Anand

            (0) 
  2. surya narayana

    Hi Ranjit,

    I have a issue when binding the data to textfield. I have entityset with two fields like username and employee name. I pass the username as input and fetch the employee name and pass it as value of text field.

    i mentioned the sample code here. Please forget the previous reply.

    in controller.

    var omodel1 = new sap.ui.model.odata.ODataModel(“proxy/http/server:port/sap/opu/odata/sap/ZHRF_ADV_EMPDET_SRV”, true);

    var oJsonModel = new sap.ui.model.json.JSONModel();

    omodel1.read(“/EMPDETSet?$filter=ImUname eq ‘sapuser'”,null,null,true,function(oData,repsonse){

    oJsonModel.setData(oData);

    });  

    sap.ui.getCore().setModel(oJsonModel);

    in view:

    oText = new sap.ui.commons.TextField({id:”firstname” , value: “{EmpName}”});

    In Entity set i have two fields – ImUname and EmpName.

    Please solve this issue.

    Regards

    Surya

    (0) 
  3. surya narayana

    Hi ranjit,

    I got an issue while creating a new record. after successful created in database also iam getting a error messae like creation failed.

    Could you please resolve this issue

    (0) 
    1. Michael Appleby

      Please create a new Discussion for your question.  See the Getting Started link at the top right for more information.

      Regards, Mike (Moderator)

      SAP Technology RIG

      (0) 
  4. Bharath Kumar

    Hi guys,

    i am getting error while using DATE column in odata filter url,

    here is my sample code below,

    Untitled.png

    Am getting error like this

    Untitled1.png

    Can anyone help me to solve this error,

    Thanks & Regards,

    Bharath

    (0) 
    1. Michael Appleby

      Please create a new Discussion for your question.  See the Getting Started link at the top right for more information.

      Regards, Mike (Moderator)

      SAP Technology RIG

      (0) 
  5. durga prasad prasad

    Hi Ranjit,

    Thanks for your detailed blog.  I have couple of questions.

    1) how do you test this oData service,  we only get xml format if we give it in the browser.

        Is there any tool?

    2) My doubt is you build the view with ID, Name, Descritpion…..  and its under Products node.  If I would like to expand ProductDetails how to fetch the column details.

    Thanks

    Prasad

    (0) 
  6. Asif Hirani

    I was facing similar issue – MaxDataServiceVersion ‘2.0’ is too low for the response. The lowest supported  version is ‘3.0’.

    and your post helped me resolve that issue. Thanks for sharing !!

    (0) 
    1. Jagadeesh Biyyapu

      Hi Srinivas,

      Actually for crud operations some code suppose to implement in back end in abap.So u cant use every rest service .U can try this service to perform crud operations.

      northwind/V2/(S(lebb5euydx3m3xt5r2rqmou4))/odata/odata.svc/

      (0) 
      1. Srinivasan S

        Hi Jagadeesh,

        Thank you for your reply. I am using the standard oData Service URL provided by C4C.

        And on checking the metadata I could confirm that the Entity Set I use is creatable, editable and deletable.

        Regards,

        Srinivasan

        (0) 
  7. Nitin Singh

    Hi Ranjit,

    I am very new to SAPUI5. I have a question regarding OData setting in manifest.json file. What is the purpose of this

    "dataSources": {
     "productRemote": {
     "uri": "/destinations/northwind/V2/Northwind/Northwind.svc/",
     "type": "OData",
     "settings": {
     "odataVersion": "2.0"
     }
     }
    }
    
    And also I have seen example creating Odata model and reading in js files
    var oModel = new sap.ui.model.odata.ODataModel("/", true);
    var inputModel = new JSONModel("../model/inputs.json");
    var productsModel = new JSONModel();
    
    oModel.read("/Products",
        null,
        null,
        false,
        function _OnSuccess(oData, response) {
            console.log(oData);
            console.log(response);
            var data = {"ProductCollection" : oData.results};
            productsModel.setData(data);
    
        },
        function _OnError(error) {
            console.log(error);
        });
    
    
    

     

    (0) 

Leave a Reply