cancel
Showing results for 
Search instead for 
Did you mean: 

Simple OData Binding with SAPUI5

Former Member
0 Kudos

Hi SAPUI5-experts,

I'm just going to learn the basics of OData & SAPUI5. I currently stand at a very simple problem, because i am only able to find OData SAPUI5 examples with charts or tables.

I want to code an simple OData HTML file. I want to load an OData Sservice (var oModel = new oModel .... ("http:// ....")) and then show the individual values of the Service ​​without a table or chart. For example, the OData Channel "ItemID" and contains "sales", this I would now like to show individually in HTML or saved into variables.

I have been trying to come up with "oModel.getProperty", but it doesnt work for me - if i am using code example with table and replacing the URL with my OData Service, it works, but i don't know how to show the values of the Service individually.

Its a very simple problem, but i hope you can help me! A small example of code would be the best way.

Accepted Solutions (1)

Accepted Solutions (1)

former_member293602
Active Participant
0 Kudos

Hi Andreas,

as you "requested" a very simple code example:

var oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc");

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

var oText = new sap.ui.commons.TextView("l1", {text: "{CompanyName}"});

oText.bindElement("/Customers('ALFKI')");

oText.placeAt("content");

If you switch to the dev-tools an type in your console the following:

sap.ui.getCore().getModel().getProperty("/Customers('ALFKI')/ContactTitle")

You should be able to see how the "getProperty()" function works.

I hope this helps.

More information on data binding can be found here:

https://sapui5.hana.ondemand.com/sdk/#docs/guide/Introduction.1.html

and here:

https://sapui5.hana.ondemand.com/sdk/#docs/guide/DataBinding.html

Regards, Frank

Former Member
0 Kudos

Thank you Frank,

it worked. I am trying to use an Hana-OData xsodata now like this:

  var oModel = new sap.ui.model.odata.ODataModel("xsodata/date.xsodata");  

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

  var oText = new sap.ui.commons.TextView("l1", {text: "{CALHOUR}"});  

  oText.bindElement("/DATESParameters(IID='500005',DAT='20130121')"); 

  oText.placeAt("content");

That doenst work. You have a tip here? If i am using the http://.../xsodata/date.xsodata/DATESParameters(IID='500005',DAT='20130121') its working.

former_member293602
Active Participant
0 Kudos

Hi Andreas,

I don't have experience working with SAPUI5 on HANA XS. So the only tip I have here is to switch to the developer tools of your browser (if you use chrome, just hit F12). Then take a look at the "Network" tab to see if the complete URL to request the data from the back end is okay. It you don't see any entry there, you might need to refresh the page.

Regards, Frank

Former Member
0 Kudos

Hi Frank,

thank you for your help!

Former Member
0 Kudos

Probably someone can help me with that Problem? I tried a OData XSO Service without Parameters

var oModel = new sap.ui.model.odata.ODataModel("xsodata/bcg.xsodata/");  

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

  var oText = new sap.ui.commons.TextView("l1", {text: "{AVGBP}"});  

  oText.bindElement("/BCG"); 

  oText.placeAt("content"); 

/BCG = Name of Collection, like Customers

AVGBP = Name of Element in the Service.

The service is working!

Former Member
0 Kudos

bump

Former Member
0 Kudos

Hi all, I am new to odata serivices and I am using Hana-OData xsodata

i have an issue when i try to insert values into a table Customer(collection name) using the service "https://iot01iot.neo.ondemand.com/c5184380/services/customer.xsodata/");

this is the code i am using to perform the task,

save : function(oEvent) {

    var oModel = new sap.ui.model.odata.ODataModel("https://iot01iot.neo.ondemand.com/c5184380/services/customer.xsodata/");

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

    var customerId = sap.ui.getCore().byId('customerId').getValue();

    var customerName = sap.ui.getCore().byId('customerName').getValue();

    var customerExternalId = sap.ui.getCore().byId('customerExternalId').getValue();

    var oEntry = {};

    oEntry.id = parseInt(customerId);

    oEntry.name = customerName;

    oEntry.externalID = customerExternalId;

    oModel.create('/Customer', oEntry, null, function(){

            alert("Create successful");

        },function(){

            alert("Create failed");});

    },

But this is not working,the alert "Create failed" is popping up,Can anybody tell me what is the mistake in this code please ?

Thank you.....

Former Member
0 Kudos

Hi frank,
Can u plzz  post simple sap ui5 application with odata service linked(full code).

former_member293602
Active Participant
0 Kudos

Hi Meera,

here: http://scn.sap.com/message/14281224#14281224 you can find a simple but complete example.

Regards, Frank

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi Frank,

     I am learning oDataModel. your code is very helpful. can you explain these two lines

  1. var oText = new sap.ui.commons.TextView("l1", {text: "{CompanyName}"});  
  2. oText.bindElement("/Customers('ALFKI')"); 

     What is companyName? and

     what is Customers('ALFKI')

Former Member
0 Kudos

Hi Jagadish,

                  {CompanyName} means your binding your model to the control i.e. TextView

                  Customers('ALFKI') means your Entity name or Table name in your oDataModel.

          Please refer this link for Data Binding.

Regards

Moulika

Former Member
0 Kudos

Hi Moulika,

     Thanks for your information. How could we create Table(Customers('ALFKI'))?

Former Member
0 Kudos

Hi Jagadish,

                    No we cannot create a table. Generally webservices developers or ABAP developers do that and you can use them. Please contact your ABAP team for services.

Regards

Moulika

Former Member
0 Kudos

Hi Moulika,

               Thank for your info. Is it possible to update the info? if so, Please explain for this code

  1. var oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc");  
  2. sap.ui.getCore().setModel(oModel); 
  3. var oText = new sap.ui.commons.TextView("l1", {text: "{CompanyName}"});  
  4. oText.bindElement("/Customers('ALFKI')"); 
  5. oText.placeAt("content"); 
former_member293602
Active Participant
0 Kudos

Hi,

are you looking for an example for aggregation binding? If so, here you can find one that displays an oData collection as list:

(including the selection of a list item with details).

Regards, Frank

Former Member
0 Kudos

Hi jagadish,

  1. var oModel = newsap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc")
  2. sap.ui.getCore().setModel(oModel);

According to the above code your getting data from service url into a Model and setting that model as global model.


From that model ur getting the data CompanyName from Customers('ALFKI') table, into a control ie TextView. In this text view u will be able to see the Company Name.


To see ur Company Name in textView we have bind from where to get that property(Comapny name) i.e table name


Later place that text view in your Application. I hope u understood my explanation.


Regards

moulika

Former Member
0 Kudos

Hi Moulika,

     Thank you. I have understood the code by your previous reply.my question is it possible to modify the table data?

Former Member
0 Kudos

Hi Jagadish,

                    Yes we can please refer this link and relative data in this link Demokit.

Regards

moulika