Skip to Content

Sample ODATA model in SAPUI5 and issues faced

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.


32 Comments
You must be Logged on to comment or reply to a post.
  • 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

  • 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

  • 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

    • 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

  • 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

    • 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

  • 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

  • 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 !!

  • 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);
        });