My First Example Of Using OData V4 Model

With SAPUI5 version 1.37 the sap.ui.model.odata.v4.ODataModel finally got released. First of all please note that it’s still under construction, therefore you should definitely not use it for productive applications. Furthermore: The code I’m providing is just a quick example and sometimes kind of antipattern (e.g. there are only very few use cases where you should call sap.ui.getCore()).

I didn’t examine the source code yet and read just the API documentation from sap.ui.model.odata.v4.ODataModel. So please be welcomed to correct me if any of my statements or conclusions are wrong.

The first things I noticed are that there are much less constructor properties than in V2 and that many methods are marked as “not implemented yet”.

Furthermore I noticed that methods I often used in V2 don’t appear at all (create, update, read, remove, …). I guess those operations are triggered automatically by changing the binding (that’s at least the case for update in my example). I hope that the missing methods will be implemented within the next releases anyway, because I think the developers will need them. For example in case you need to create an entity which is not associated with a control.

You can find a working live example in my jsbin. Please note that you’ll have to turn off your browser web security to get it workable, because I’m using a public dummy OData service which doesn’t provide a valid https certificate. You also can download the attached files “ODATAV4-UI5-Sample.html.txt” and “ODATAV4-UI5-Sample.js.txt”, remove the .txt extension (damn SCN file type restrictions), put them in the same location and open “ODATAV4-UI5-Sample.html” in your browser. In that case you won’t have to turn off your browser security.

In my example I’ve created two models: One with activated batch mode and the other in direct mode. Next I’ve created two lists and two input fields which are bound to the models. If you select an item from the list the input field will show the property “Gender”. As soon as you change the value and leave the field a patch request will be triggered to update the backend service. Here’s what it looks like in all its ugly simpleness:

OK, hands on!

Let us have a deeper look at the constructor. Note: It seems not possible yet that you can change between batch and direct mode later. That’s why you’ll have to decide that at the beginning with the parameter “groupId”.

Anyway here’s an example for a new model in direct mode:

var oModel = new sap.ui.model.odata.v4.ODataModel({
    /* send requests directly. Use $auto for batch request wich will be send automatically on before rendering */
  groupId : "$direct",
    /* I'll just quote the API documentary:
  Controls synchronization between different bindings which refer to the same data for the case data changes in one binding.
  Must be set to 'None' which means bindings are not synchronized at all; all other values are not supported and lead to an error.
  */
  synchronizationMode : "None",
  /*
  Root URL of the service to request data from.
  */
    serviceUrl : "http://services.odata.org/TripPinRESTierService/",
  /*
  optional. Group ID that is used for update requests. If no update group ID is specified, mParameters.groupId is used.:
  updateGroupId : "$direct"
  */
  });

The next thing to do is to announce the model (~sure, otherwise the controls can’t find them 😉 ). In my example I’ve just put all my content in a sap.m.Panel, so I called:

var panel = new sap.m.Panel({ /* ... */});
panel.setModel(oModel, "oModel");

Afterwards I created a new List and declared a select function within its constructor (#antipattern):

var list2 = new sap.m.List({
  includeItemInSelection : true,
  mode : "SingleSelect",
  select : function(oEvent){
      var input = sap.ui.getCore().byId("changeGender2");
      var listBindingContext = oEvent.getParameter("listItem").getBindingContext("oModel");
      input.setBindingContext(listBindingContext, "oModel");
      input.bindValue({
          path : "oModel>Gender",
          type: new sap.ui.model.type.String()    
      });
  }
 });

Finally I setup the binding for the item aggregation with a sap.m.StandardListItem template which uses property binding for the properties title and description:

list2.bindItems({
    path : "oModel>/People",
    template : new sap.m.StandardListItem({
      title : "{oModel>FirstName} {oModel>LastName}",
      description : { path : "oModel>UserName" }
  })

That’s it. I hope it will help someone who struggles with OData V4 on SAPUI5, too.

Cheers