Skip to Content
0

SAPUI5 - Consume oData Services with Server side paging

Feb 19 at 02:49 PM

123

avatar image
Former Member

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


});
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Bruno Lucattelli
Feb 19 at 08:25 PM
1

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

Show 9 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Bruno Lucattelli,

The oData service supports the $skip, $top, $skiptoken and other options.

When I call the oData service, it returns only 20 initial lines, even when called through the browser. On a browser I have to make another call using the addition $skip or $skiptoken to get the next lines. The JSON response from the oData contains a line at the bottom for "@odata.nextLink".

@odata.nextLink: "Customers?$skiptoken='ERNSH'"

Within my SAPUI5 application, if I keep the "growingThreshold" property as less than 20, I get the option to load more records, and once 20 records are loaded the "More" option is not available. But I want the view to fetch further records returned by the oData service in the next load. Probably I might have to provide some properties for this while defining the models in the manifest.json

Regards,

Chetan Mishra

The JSON for the oData Service:

0

You don't need to change anything in manifest.json. If your entityset works with $top and $skip, it should work with List.

The only property you must set (as I said before) is in the sap.m.List control.

I tried here and it works. Check it out:

Thats how my sap.m.List control looks like. I just copied from the demo I recommended you.

Also keep in mind that whenever you entityset reaches its maximum entries, the "Click here to see more" disapears. Since youre using Northwind public service, please check it out for $count before.

Hope it helps

Bruno

scroll01.png (58.8 kB)
scroll02.png (66.4 kB)
0
Former Member

Hi Bruno Lucattelli,

Thanks again for responding and supporting me.

I did the $count for the oData Service and there are 91 entries.

I tried copying the code from the demo that you suggested, into a new XML view to rule any errors in implementation in JS view, however I still get only 20 entries in my view.

If I try to query the oData service with $top=30 addition, it still returns 20 records with an @odata.nextLink property.

@odata.nextLink: "Customers?$top=10&$skiptoken='ERNSH'"

What am I missing out..


odata-count.jpg (22.8 kB)
xml-view.jpg (89.0 kB)
0

Can you please show me your app's ODATA calls in your network tab?

The @odata.nextLink only appears when not using $top and $skip.

Here's $top2 being used. Note that no nextLink is shown.

top2.png (30.7 kB)
0
Former Member

Hi Bruno Lucattelli,

I really appreciate your support for this issue.

I get the @odata.nextLink if I query the oData with $top as more than 20, for $top upto 20, there is no @odata.nextLink.

The oData calls from network tab is provided below, it contains 20 records.

0

Your ODATA call isn't using $top. Please share the Headers tab so we can see what URL is being passed for this call.

0
Former Member

Hi Bruno Lucattelli,

The Headers Tab is as attached below, I am not using any parameters with the oData url while declaring the model in manifest.json. Should I add these explicitly or that would be done implicitly.

"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"
				 }	
		},

0

You're using JSONModel, thats why! You should be using ODataModel.

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}".

Bruno

odata.png (10.5 kB)
0
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.

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

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

Show 1 Share
10 |10000 characters needed characters left 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}" 		} ]
					
				}),
			},
		});

0