Skip to Content
avatar image
Former Member

SAPUI5 - Consume oData Services with Server side paging

Hi,

I have recently started with SAPUI5,and am trying to consume the northwind oData services.

I am using the customer entity set within a list. I have observed that this uses server side paging and therefore I get only a few entries.

How do I get the next load of entries? Adding separate models for each load does not seem to be a logical solution.

Model within manifest.json

	"models": {
		"i18n": {
			"type": "sap.ui.model.resource.ResourceModel",
			"settings": {
				"bundleName": "sapui5.app54.i18n.i18n"
			}
		},
		"nwCustomer": {
			"type": "sap.ui.model.json.JSONModel",
			"uri": "http://services.odata.org/V4/Northwind/Northwind.svc/Customers"
		}
	},

List implementation within view

sap.ui.jsview("sapui5.app54.view.zjsv_detail_54_01", {
	getControllerName : function() {
		return "sapui5.app54.controller.zjsv_detail_54_01";
	},

	createContent : function(oController) {
		var oList = new sap.m.List("idListCust",{
			items : {
				path : "nwCustomer>/value",
				template : new sap.m.ObjectListItem("idObjectList", {
					title : "{nwCustomer>CustomerID}",
					type : "Active",
					press: [oController.onSelectCust],
					attributes : [ 
					               { 	"text" : "{nwCustomer>ContactName}" },
					               {	"text" : "{nwCustomer>CompanyName}" 		} ],
				}),
			},
		});
						
 		return new sap.m.Page({
			title: "Title",
			content: [	oList	]
		});
	}


});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Feb 19 at 08:25 PM

    Hi Former Member!

    Your ODATA service must support the URL attributes as below:

    http://services.odata.org/V4/Northwind/Northwind.svc/Customers?$top=2&$skip=0

    This means that we are going to get only 2 entries from the Customers entity set, starting from the first. When you go to the "second page", it must perform as follows:

    http://services.odata.org/V4/Northwind/Northwind.svc/Customers?$top=2&$skip=2

    Got it?

    So you need to setup these properties in your sap.m.List. Try using the following properties:

    growing="true"
    
    growingThreshold="4"
    
    growingScrollToLoad="false"

    This demo uses it as well.

    Hope it helps,

    Bruno

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Bruno Lucattelli

      Hi Bruno Lucattelli,

      Thanks a lot for pointing out the mistake. This is working fine now.

      However, I have a few followup queries regarding maintaining destinations while developing apps in Eclipse and have raised a separate question. Please help me with these.

      "Also, your binding for sap.m.List is wrong.
      You should fix the service definition in manifest.json and then use the binding items="{/Customers}"."

      I have multiple models defined in the manifest.json, and therefore to uniquely identify the required model, I have used "nwCustomer>/value" for binding, where 'nwCustomer' is the model name defined in manifest.json and '/value' is the entity name in Model.

  • avatar image
    Former Member
    Feb 19 at 03:10 PM

    So, I guess You may use property "Growing" of List control.

    take a look https://sapui5.hana.ondemand.com/sdk/#/sample/sap.m.sample.ListGrowing/preview and https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.ListBase.

    sap.m.List has extend sap.m.ListBase

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Andrij,

      Thanks for a response.

      I had checked the growing property of the sap.m.List control as demonstrated in the sample in SAPUI5 sdk, however it does not work for me. Moreover, the sample demonstrates client site paging, i.e. the JSON file contains all the records, and the count of records to be displayed is controlled from within the sap.m.List control.

      Please let me know if I am missing out on something or doing something wrong.

      My List control is currently as below:

      		var oNWMasterList = new sap.m.List( "idNWCustomer", {
      			growing : true,
      			growingScrollToLoad : true,
      			items : {
      				path : "nwCustomer>/value",
      				template : new sap.m.ObjectListItem("idNWCustList", {
      					title : "{nwCustomer>ContactName}",
      					type : "Active",
      					press: [oController.onSelectCust],
      					intro : "{nwCustomer>CustomerID}",
      					
      					attributes : [ 
      					               { 	"text" : "{nwCustomer>ContactTitle}" },
      					               {	"text" : "{nwCustomer>Country}" 		} ]
      					
      				}),
      			},
      		});