Hoe maak je in enkele minuten een zoekfunctie voor native mobile

Lennart Spaans, Mendix-developer bij Ordina, legt in deze blog uit hoe je heel eenvoudig je eigen aangepaste zoekfunctionaliteit kunt bouwen met alleen standaard Mendix-componenten.

De kans is groot dat je gebruikers op een bepaald moment een optie uit een lijst willen selecteren, maar wat als die lijst erg lang is? Eindeloos scrollen heeft dan geen zin, omdat het een slechte gebruikerservaring oplevert en gebruikers mogelijk wegjaagt van je app. Filters kunnen een oplossing bieden voor het tonen van kleinere lijsten, maar hoe zit het met zoeken?

Op dit moment is er geen standaard UI-component voor het doorzoeken van een lijst in een Mendix Native Mobile App, in tegenstelling tot de zoekfunctionaliteit die je kunt vinden in de listviews of datagrids van Mendix browser applicaties. Gelukkig is het heel eenvoudig om je eigen aangepaste zoekfunctionaliteit te bouwen, met alleen standaard Mendix-componenten.

Native Android- en iOS-apps gebruiken een SQLite-database, wat een relationele database is die volledige offline mogelijkheden biedt en al gebruikt wordt sinds het begin van smartphones. Dit is de database die we nodig hebben om onze zoekopdracht op uit te voeren en we kunnen dit doen met behulp van X-Path.

Stel je voor dat je een lijst van wereldsteden hebt en je gebruiker wil er een selecteren om er meer over te weten te komen. Je zal een zoekvak moeten hebben waar de gebruiker de naam van de stad kan intypen die hij zoekt, en het resultaat verschijnt. Ik zal je een eenvoudige maar effectieve manier laten zien om dit te bereiken.

Begin met je domeinmodel. Je zal natuurlijk een City entiteit hebben, die de naam van de stad bevat. Deze kun je gebruiken voor je zoekopdracht.

Voeg een tweede entiteit toe. Deze kan persistent of non-persistent zijn, afhankelijk van je behoeften. Ik zal het nu ‘SearchHelper’ noemen. Het moet de attributen bevatten die nodig zijn voor je zoekopdracht; in dit geval een string ‘SearchString’.

Creëer de pagina waarop de gebruiker zijn zoekopdracht zal uitvoeren. Gebruik een SearchHelper-object voor de paginaparameter. Als de pagina wordt aangeroepen vanuit het navigatiemenu, gebruik dan een datasource flow om hem aan te maken. Als hij wordt aangeroepen vanuit een nanoflow, kun je het object daar aanmaken en doorgeven als parameter in de show page actie.

Voeg een tekstvak toe met de SearchString als attribuut.

Voeg een On-Change nanoflow toe die de paginaparameter ververst wanneer de gebruiker nieuwe invoer in het zoekvak invoert. Je kunt het SearchHelper-object opslaan of de Refresh Object-actie uit de nanoflow commons module.

In het tabblad ‘events’ van het zoekvak stel je de nieuw aangemaakte nanoflow in op de event van je keuze. In dit geval heb ik het On-Change event gekozen met de optie ‘While user is entering data’ geselecteerd.

Nu we onze pagina hebben opgezet, kunnen we beginnen met het daadwerkelijk ophalen van de lijst op basis van de invoer van de gebruiker. Voeg een listview toe aan de dataview van de SearchHelper en selecteer ‘Nanoflow’ als de datasource.

Maak voor de datasource nanoflow een nieuwe nanoflow met de SearchHelper-entiteit als parameter. Gebruik een split om te controleren of de SearchString input bevat (Tip: gebruik trim($SearchHelper/SearchString) != ”), en voeg een retrieve from database activiteit toe. Als de SearchHelper geen input bevat, geef leeg terug.

Gebruik voor de retrieve actie een X-path query gebaseerd op de invoer van de gebruiker. Je hebt verschillende opties, zoals contains(), starts-with() of equals. Voor dit voorbeeld heb ik gekozen voor contains(), maar als je zoveel data hebt dat je gebruik wilt maken van een index, zal je een andere optie moeten kiezen.

Dat is alles, laten we het uitproberen.

Je hebt zojuist een aangepaste zoekfunctionaliteit gemaakt die uitstekende prestaties heeft, en online en offline werkt, met alleen native Mendix-functionaliteit!