We will see how to configure the Search widget within the Navbar. We will create a list using the Employee data from sample hrdb and provide search functionality on the Employee's first name.
- Create a page with and ‘blank’ template and ‘One column layout with top navbar’.
- Select mobile navbar and set the ‘Show Search button’ from the Properties Panel.
- Database Integration - add the sample HRDB into your project.
- Create a Database CRUD Variable with
readOperation. (name it say,
- From the Data tab of the above Variable, bind the
firstnameFilter Field to query option under the
- Drag and drop a List Widget. Use Existing
employeeListvariable as the source of data.
- Pick a template, pagination type and configure the respective data fields and click Done. We have used
Action Listas the template and
Pageras the pagination.
- Select Mobile navbar, and set ‘On search’ Event to invoke
- Preview the project and on the employee list page, click the search button.
- Now, filter employee ‘Chris’ by typing ‘chris’ in search text box. That’s how search widget on mobile navbar can be used.