Skip to Content

SAPUI5 - Add a search field

By Jonathan Baker

Add a search using the SearchField element

You will learn

You will add a <SearchField> control to the initial page of the application. We’ll add it as a child within the pages subHeader aggregation which expects a <Bar> control.


To handle the search, we’ll specify a handler for the search field’s ‘search’ event. This handler handleSearch is defined in the view’s controller, and the search effect is achieved by adding a ‘contains string’ filter to the binding of the List control’s items aggregation.

Web IDE If you don’t have the Web IDE open, follow these steps: Enable and open the HANA Cloud Platform Web IDE

  1. Open the webapp/view/View1.view.xml file, and add the following code to the <Page> element:

     			<SearchField search="handleSearch" />

    Adding a subHeader element

    You will also need to add an ID field to the <List> element, directly below. Add this to the <List> element:


    Adding an id tag to the List element

  2. Open the webapp/view/View1.controller.js file, and update the Controller with the following new functionality:

    Note Be careful with the exact placement of this code. The code should go after a single closed braces }, on line 14.

    	handleSearch : function (evt) {
    		// create model filter
    		var filters = [];
    		var query = evt.getParameter("query");
    		if (query && query.length > 0) {
    			var filter = new sap.ui.model.Filter("ProductName", sap.ui.model.FilterOperator.Contains, query);
    		// update list binding
    		var list = this.getView().byId("List");
    		var binding = list.getBinding("items");

    Add the handleSearch method to the controller

  3. Run your application. You should see the search box at the top of the list, right below the words Product Overview.

    NOTE: If the search does not work, check the View1.view.xml file, and make sure the <List> element has an id parameter.

    Search field is displayed

Next Steps

Additional Information

Updated 09/15/2016

Time to Complete

10 Minutes.




Next Steps

Back to top