Skip to Content

How to filter a list via controller in sapui5

Apr 13 at 05:14 PM


avatar image

Hey there, I am pretty new to SAPUI5 and have a little problem with my App. I set up a Master-Detail Application which shows a list of Customers in the Master View.

My goal is to filter this list to any property of my oData Service (I am using the Northwind Webservice).

Here you can see a snippet with the list of my view (MasterView.xml):

					path: '/Customers',
					sorter: {
						path: 'CompanyName',
						descending: false
					groupHeaderFactory: '.createGroupHeader'
				mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}"
							text="{masterView>/filterBarLabel}" />
						type="{= ${device>/system/phone} ? 'Active' : 'Inactive'}"

And here is what I have done in my controller (Master.controller.js):
Please not that I only inserted the code inbetween the comments between //Tryout Filter and //End Tryout.

When i want to run my application, debugger says: "Cannot read property 'filter' of undefined" because oBinding is undefined. I hope any of you can help me. I am only want to apply the filter when the app is loaded to users screen.

Thanks a lot and best regards

onInit : function () {
				// Control state model
				var oList = this.byId("list"),
					oViewModel = this._createViewModel(),
					// Put down master list's original value for busy indicator delay,
					// so it can be restored later on. Busy handling on the master list is
					// taken care of by the master list itself.
					iOriginalBusyDelay = oList.getBusyIndicatorDelay();
				// Tryout Filter
				var equals = FilterOperator.EQ;
				var aFilterFoo = [];
				aFilterFoo.push(new Filter("Country", equals, "Germany"));
				var oBinding = oList.getBinding("items");
				// End tryout Filter
				this._oList = oList;
				// keeps the filter and search state
				this._oListFilterState = {
					aFilter : [],
					aSearch : []
				this.setModel(oViewModel, "masterView");
				// Make sure, busy indication is showing immediately so there is no
				// break after the busy indication for loading the view's meta data is
				// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
				oList.attachEventOnce("updateFinished", function(){
					// Restore original busy indicator delay for the list
					oViewModel.setProperty("/delay", iOriginalBusyDelay);
					onBeforeFirstShow: function () {

				this.getRouter().getRoute("master").attachPatternMatched(this._onMasterMatched, this);
				this.getRouter().attachBypassed(this.onBypassed, this);
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Sharath M G Apr 14 at 03:39 PM

don’t filter on init. Secondly, use the filters array to add multiple properties as filter

Show 3 Share
10 |10000 characters needed characters left characters exceeded

Hey Sharat,

thanks for answering. Is it even possible to filter on init? Or is there a possibility to filter the list when user opens the application?


Hi Timur,

You can run the code on init.

For ex:

In the below filter code, you can try to Filter code. In this the whole list ios filtered and only relevant items are bound to the view list.

Advantage: You can remove items which you wish to hide from users in the init itself.

Disadvantage: You don't have the option of getting the complete list as its already filtered.

// add filter for search
var aFilters = [];
var sQuery = 'Basic';
if (sQuery && sQuery.length > 0) {
	var filter = new Filter("Name", sap.ui.model.FilterOperator.Contains, sQuery);

// update list binding
var list = this.getView().byId("idList");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");


why not filter at init? what's the problem?

Jun Wu Apr 16 at 01:25 PM

on init, there is no binding at that time, if I am not wrong.

var oBinding = oList.getBinding("items"); //this line code give you nothing, that's why you failed.

I think you can remove the binding in xml view. and do the binding in init using bindaggregation

the filter you prepared in the init can be used in that api.

10 |10000 characters needed characters left characters exceeded
Nicholas Owen O’Malley Apr 16 at 07:59 AM

You can solve this with $.grep

NewODAta = $.grep(AllTheData, function(obj) {
//here you can check on all keys if you want. Do logic here. return obj.dataKey.indexOf(UserInput) !== -1; }); this.getVeiw().getModel("SomeModel").setProperty("/", new JSONModel(NewData))
10 |10000 characters needed characters left characters exceeded