Hoe produceer je een custom auto-complete veld in Drupal 8?

08 aug 2017

Joris Snoek - Project lead
Vragen? Let me know!
020 - 261 14 99

Wij zijn momenteel bezig met het bouwen van een realtime chat platform, zie het als een WhatsApp for business. We zullen deze gaan vrijgeven als een Drupal distributie, als opvolger van het huidige OpenLucius. We hebben hierin Drupal gekoppeld aan NodeJS voor een blazing fast systeem, met realtime communicatie (chat / messaging).

Binnen dit systeem kunnen mensen samenwerken in besloten 'channels', vergelijkbaar met WhatApp groepen. Teamcommunicatie vindt vervolgens plaats in deze channels. Een channel werkt het beste als je het organiseert rond een onderwerp: bijvoorbeeld ‘sales’.

Zodra een nieuw channel wordt aanmaakt, kunnen bestaande teamleden toegevoegd worden op een zo makkelijk mogelijke manier: met behulp van een ‘auto-complete veld’: zodra je start met typen worden meteen suggesties gegeven, in dit geval namen van teamleden:

Dit auto-complete veld hebben we custom ontwikkeld, omdat onze Drupal installatie gebruik maakt van custom database tabellen die niet in de Drupal 8 core zitten. Hoe deden we dit:

1. Het form element

Om te beginnen hebben we het auto complete form element van Drupal nodig, zodat gebruikers in het frontend gewenste teamleden kunnen kiezen. Deze definiëren we als volgt:

Omdat we element #autocomplete_route_name gebruiken weet Drupal dat er zo’n form element gegenereerd moet worden in het frontend.

2. Custom route

Zoals je in het form element ziet wordt er verwezen naar een route, waaruit de data verkregen moet worden. Deze voegen we toe in de .routing.yml file:

Deze routing.yml file staat in de root van onze module.

3. Controller met custom query

In de zojuist aangemaakte route verwijzen we naar een custom controller AutocompleteController, method handleAutocomplete. Deze staat in de map moduleroot/src/Controller:

Deze method zorgt ervoor dat de juiste data opgehaald wordt uit de database en correct geformat terug wordt gegeven.

Wrap it up

Zoals je ziet, worden hier en daar suggesties gegeven voor correcties op de code. In een optimalisatie sprint zullen we hiermee aan de slag gaan. Maar voor nu komt de data in ieder geval goed door en kunnen we nieuwe channels met bestaande teamleden aanmaken middels een auto-complete veld.

Credits header foto: ricardo Gomez Angel

Nóg meer
kennis nodig?

Check ons ons blog archief.

Digitale strategie en realisatie

Bel ons op 020 - 261 14 99, mail op hallo@luciuswebsystems.nl, of stuur een bericht: