Skip to Content

Add a Search Field

test
0 %
Add a Search Field
Details
// Explore More Tutorials

Add a Search Field

04/15/2019

Add a search using the search field control.

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.


Step 1: Add the search field
  1. Open the mta_app/app/webapp/view/View1.view.xml file, and add the following code to the <Page> element:

    <subHeader>
    	<Bar>
    		<contentLeft>
    			<SearchField search="handleSearch"/>
    		</contentLeft>
    	</Bar>
    </subHeader>
    
  2. You will also need to add an ID field to the <List> element, directly below. Add this to the <List> element:

    id="List"
    
Adding an id tag to the List element
Log on to answer question
Step 2: Implement the search logic

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

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);
		filters.push(filter);
	}

	// update list binding
	var list = this.getView().byId("List");
	var binding = list.getBinding("items");
	binding.filter(filters);
},
Add the handleSearch method to the controller
Log on to answer question
Step 3: Test the search

Re-run your application. You should see the search box at the top of the list, right below the words Product Overview.

Try to search for a word.

Search field is displayed
Search for "Choco". How many search results do you get?
×

Additional Information

Next Steps

Back to top