Skip to Content

How to filter a list via controller in sapui5

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):

<List
				id="list"
				items="{
					path: '/Customers',
					sorter: {
						path: 'CompanyName',
						descending: false
					},
					groupHeaderFactory: '.createGroupHeader'
				}"
				busyIndicatorDelay="{masterView>/delay}"
				noDataText="{masterView>/noDataText}"
				mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}"
				growing="true"
				growingScrollToLoad="true"
				updateFinished="onUpdateFinished"
				selectionChange="onSelectionChange">
				<infoToolbar>
					<Toolbar
						active="true"
						id="filterBar"
						visible="{masterView>/isFilterBarVisible}"
						press="onOpenViewSettings">
						<Title
							id="filterBarLabel"
							text="{masterView>/filterBarLabel}" />
					</Toolbar>
				</infoToolbar>
				<items>
					<ObjectListItem
						type="{= ${device>/system/phone} ? 'Active' : 'Inactive'}"
						press="onSelectionChange"
						title="{CompanyName}"
						numberUnit="{CustomerID}">
					</ObjectListItem>
				</items>
			</List>

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");
				oBinding.filter(aFilterFoo); 
				// 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);
				});
				
				this.getView().addEventDelegate({
					onBeforeFirstShow: function () {
						this.getOwnerComponent().oListSelector.setBoundMasterList(oList);
					}.bind(this)
				});


				this.getRouter().getRoute("master").attachPatternMatched(this._onMasterMatched, this);
				this.getRouter().attachBypassed(this.onBypassed, this);
				
			},
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Apr 14 at 03:39 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • 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

    https://sapui5.hana.ondemand.com/#/api/sap.ui.base.ManagedObject/methods/bindAggregation

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

    Add comment
    10|10000 characters needed characters exceeded

  • 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))
    Add comment
    10|10000 characters needed characters exceeded