Skip to Content

SAPUI5 - Add a search field

0 %
SAPUI5 - Add a search field
// Explore More Tutorials

SAPUI5 - Add a search field


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 SAP 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

Next Steps


Back to top