Sample ODATA model in SAPUI5 and issues faced

[ranjit_rao]

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.