How to create Search Functionality for Native Mobile in minutes!
Chances are that at some point your users will want to select an option from a list, but what if that list is really long? Scrolling endlessly would make no sense since it would offer a bad user experience, potentially turning your users away from your app. Filters can provide an answer for showing smaller lists, but what about searching?
At this time, there is no default UI component for searching a list in a Mendix Native Mobile App, unlike the search functionality you can find in the listviews or datagrids of Mendix browser applications. Luckily enough, it’s really easy to build your own custom search functionality, using only default Mendix components.
Native Android and iOS apps use an SQLite database, which is a relational database that offers full offline capability and has been used since the beginning of smartphones. This is the database that we will need to perform our search on and we can do it using X-Path.
Imagine you have a list of world cities and your user wants to select one to learn more about it. You will need to have a search box where the user can type in the name of the city he is looking for, and the result shows up. I will show you a simple but effective way to achieve just this.
- Start with your domain model. You will of course have a City entity, containing the name of the city. You can use this for your search.
- Add a second entity. It can either be persistant or non-persistant, depending on your needs. I will call it ‘SearchHelper’ for now. It should contain the attributes needed for your search; in this case a string ‘SearchString’.
3. Create the page whereon the user will conduct their search. Use a SearchHelper object for the page parameter. If the page is called from the navigation menu, use a datasource flow to create it, if it is called from a nanoflow, you can create the object there and pass it as a parameter in the show page action.
4. Add a textbox with the SearchString as attribute.
5. Add an On-Change nanoflow that refreshes the page parameter when the user enters new input into the search box. You can either commit the SearchHelper object, or use the Refresh Object action from the nanoflow commons module.
6. In the ‘events’ tab of the search box, set the newly created nanoflow on the event of your choosing. In this case I have chosen the On-Change event with the ‘While user is entering data’ option selected.
7. Now that we have set up our page, we can start actually retrieving the list based on the user’s input. Add a listview to the SearchHelper’s dataview and select ‘Nanoflow’ as the datasource.
8. For the datasource nanoflow, create a new nanoflow with the SearchHelper entity as a parameter. Use a split to check if the SearchString contains input (Tip: use trim($SearchHelper/SearchString) != ‘’), and add a retrieve from database activity. If the SearchHelper contains no input, return empty.
9. For the retrieve action, use an X-path query based on the user’s input. You have several options such as, contains(), starts-with() or equals. For this example I have chosen contains(), but if you have so much data that you’d like to make use of an index, you will need to choose a different option.
That’s all, let’s test it out
Finally, we can try it out! You have just created a custom search functionality that has excellent performance, and works online and offline, using only native Mendix functionality!
From the Publisher -
If you enjoyed this article you can find more like it at our Medium page or at our own Community blog site.
For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.
Interested in getting more involved with our community? You can join us in our Slack community channel or for those who want to be more involved, look into joining one of our Meet ups.
