Sinds mensenheugenis verzamelen mensen allerlei dingen: stripboeken, videospelletjes, postzegels, oud geld en zelfs mineralen. Maar... tijden veranderen en de meesten van ons zijn niet langer geïnteresseerd in het verzamelen van mineralen. In plaats daarvan verzamelen we persoonlijke informatie en meningen van anderen. Met de komst van Liferay 7.0 heeft Liferay ons gezegend met een tool om dit te doen. Deze blogpost schetst Liferay Forms en legt uit hoe je ze kunt aanpassen naar jouw smaak!

Enter Liferay Forms!

De genadige heren van Liferay hebben onze wens om gegevens te verzamelen erkend en hebben ons een handleiding gegeven over hoe we informatie van gebruikers moeten verzamelen. Onze datahongerige magen zijn echter niet snel tevreden als het gaat om het verzamelen van andermans informatie. Dus wat heeft Liferay Forms ons te bieden? Liferay Forms is een tool waarmee gebruikers dynamische en flexibele enquêtes of vragenlijsten kunnen maken. Standaard biedt Liferay Forms een breed scala aan veldtypen en instellingen. Laten we eens snel kijken!

Standaard veldtypen

Standaard veldtype instellingen

Daarnaast zijn er enkele algemene instellingen die voor elk formulier geconfigureerd kunnen worden, zoals:

• het inschakelen van een CAPTCHA,
• doorsturen naar een andere URL na het succesvol verzenden van een formulier,
• een e-mailbericht naar beheerders sturen als een formulier is verzonden,
• één of meerdere pagina's per formulier gebruiken,
• en nog veel meer!

Aanpasbare lay-out

Om de gebruiker ervan te overtuigen zijn kostbare persoonlijke gegevens vrijwillig af te staan, moeten formulieren er zo aantrekkelijk mogelijk uitzien. Daarom heeft Liferay een manier ontwikkeld om het uiterlijk van het formulier aan te passen, inclusief het lettertype en de kleur. De meest interessante functie is het gebruik van een aanpak met meerdere kolommen. Hiermee is het mogelijk om meerdere velden op een enkele rij te zetten en deze voor elke volgende rij aan te passen, zoals in de afbeelding hieronder.

Ben je niet vermaakt?

Om heel eerlijk te zijn, ik ook niet. Liferay Forms is zeker een upgrade ten opzichte van zijn voorganger in 6.2 en biedt een manier om snel een dynamische enquête te maken. De standaardinstellingen en veldtypen voelen echter nogal beperkt aan en laten te wensen over. Enkele dingen die ik persoonlijk miste

• er is geen manier om het formulier vooraf te vullen met gegevens die al in de database zijn opgeslagen,
• de externe dataproviders zijn beperkt tot het veld 'Selecteer uit lijst'.

Het gebruik van waardevolle gegevens die al in de database zijn opgeslagen, bespaart de gebruiker overbodig werk. Het confronteert hen ook met de gruwelijke waarheid dat we al zoveel over hen weten.

Aangepaste Liferay Forms velden maken

Op een dag benaderde een nogal grote oude(re) man met een grijze puntmuts me en vroeg me precies dat te doen: een veld automatisch vullen met gegevens die al in de database zijn opgeslagen. Ik accepteerde deze opdracht en zo begon mijn avontuur met aangepaste formuliervelden.

Waar te beginnen?

De genadige heren van Liferay hebben ons opnieuw gezegend met een geschenk, dit keer met het geschenk van documentatie. Om vertrouwd te raken met het concept van het maken van een aangepast formulierveld, dook ik meteen hun archieven in op zoek naar nuttige informatie. Als de aardige en vriendelijke ziel die ik ben, wil ik graag met jullie delen wat ik heb gevonden:

• Anatomie van een formulierveldmodule
• Een formulierveld maken
• Instellingen aan een formulierveld toevoegen

Het maken van een formulierveldmodule kan lastig en vermoeiend zijn. Gelukkig voor ons is er een Maven archetype beschikbaar om het werk voor ons te doen:

Dit archetype maakt een module met de juiste structuur zoals beschreven in de anatomie van een formulierveldmodule. Het bouwen en implementeren van deze module voegt het nieuw gemaakte veld toe aan Liferay Forms.

Opmerking: het bouwen van deze module zou het sjabloon beschreven in my-form-field.soy moeten compileren en een bestand genaamd 'my-form-field.soy.js' moeten genereren. Als dit niet het geval is, overweeg dan om het bestand handmatig te compileren en toe te voegen met een online compiler als tijdelijke workaround.

Nu we een werkende module hebben, kunnen we het sjabloon en de instellingen van ons veld naar eigen inzicht aanpassen.

Liferay formulieren vooraf vullen

Stel je voor dat je de trotse eigenaar bent van een mooi etablissement genaamd 'The Pizza Place' en je wilt je klantervaring verbeteren. Natuurlijk wilt u dat uw klanten online een pizza kunnen bestellen. Maar wat als we nog verder zouden kunnen gaan en hun bestelling gedeeltelijk voor hen zouden kunnen invullen? Laten we, voordat we onze kunsten vertonen, hun formulier volledig invullen en hun pizza voor hen kiezen, beginnen met iets basaals als hun naam.

De naamveldmodule doet precies dat. Hij gebruikt de naam van de ingelogde gebruiker en vult die automatisch in op het formulier. Dat gezegd hebbende, kan de gebruiker de naam nog steeds bewerken als dat nodig is. Om deze verbazingwekkende prestatie te kunnen leveren, moeten we enkele aanpassingen doen. Als je eerst naar de NameFieldRenderer kijkt, zie je de methode 'populateOptionalContext(... , ... , ...)' die we gebruiken om de gebruikersnaam door te geven aan de sjabloon. Door de DDMFormFieldRenderingContext te gebruiken, hebben we toegang tot de ThemeDisplay, die ons op zijn beurt toegang geeft tot de aangemelde gebruiker.

Vervolgens moeten we toegang krijgen tot de gebruikersnaam in onze sjabloon beschreven in name-field.soy. Voeg gewoon de 'gebruikersnaam' toe aan de lijst met parameters en geef het door aan het waarde attribuut van het invoerveld.

Opmerking: het name-attribuut van het invoerveld wordt samen met de waarde gebruikt om de waarde op te slaan en mag NIET worden verwijderd!

Makkelijk genoeg, toch?

Niet zo snel, je hebt Liferay's valkaart geactiveerd!

Om redenen die mijn huidige begrip te boven gaan, overschrijft Liferay de template met ons component beschreven in name-field component. Omdat we niet weten wat de gebruikersnaam aan de client-kant is, wordt onze gebruikersnaam die door de server is opgegeven, overschreven met wat wij als waarde in deze component definiëren. In dit geval hebben we de waarde niet gedefinieerd, dus wordt onze gebruikersnaam overschreven door een lege tekenreeks. Meer informatie over deze component kun je vinden in de documentatie van Liferay.

We kunnen echter toegang krijgen tot de waarde van het sjabloon voordat deze wordt overschreven door onze component via het instantie-object en deze zo doorgeven aan onze eigen component. De functie 'fetchUsername(instance)' doet precies dat. Er zijn echter extra controles nodig om ervoor te zorgen dat het sjabloon niet breekt wanneer je je formulier configureert in het configuratiescherm. Dit voelt op dit moment een beetje vreemd, maar tot nu toe heb ik nog geen andere manier gevonden om deze kleine ergernis te omzeilen.

Wat als mijn gegevens ergens anders zijn opgeslagen?

Laten we zeggen dat je gegevens van een externe provider wilt gebruiken, hoe pakken we dat aan? Zoals eerder gezegd, wordt de sjabloon die door de server wordt doorgegeven, overschreven door onze aangepaste component. Als we dit in ons voordeel gebruiken, kunnen we de gegevens ophalen bij de externe provider aan de clientside en ze doorgeven aan onze component, zoals wordt gedemonstreerd in de component e-mailveld.

Opmerking: Voor het doel van deze demonstratie heb ik een eindpunt voorzien in de custom-form-fields-endpoints, dat (gegeven een userId) het e-mailadres van de gebruiker ophaalt.

In dit scenario hoeven we ons niet bezig te houden met de EmailFieldRenderer en kunnen we gewoon een lege string doorgeven. Dat dient een doel: het zorgt ervoor dat het veld geen 'null' weergeeft voordat het wordt overschreven door onze component.

Opmerking: Als je de aanroep liever aan de serverkant doet, kun je nog steeds de waarde ervan doorgeven aan de sjabloon en de vorige aanpak gebruiken om het veld in te vullen.

Wat als de integriteit van de gegevens van de externe provider niet meer gegarandeerd kan worden?

Laten we zeggen dat de externe provider om de een of andere reden niet meer vertrouwd kan worden. In dat geval wil je stoppen met het automatisch vullen van dit veld. Dit kan worden bereikt met een enkele extra configureerbare instelling. In de EmailFieldTypeSettings moeten we een basisinstelling 'prefill' toevoegen aan de DDMFormLayout en deze definiëren als een boolean.

Dit voegt een selectievakje toe aan de veldconfiguratie.

Last but not least moeten we een extra controle toevoegen aan onze e-mailveldcomponent. Deze component bepaalt of gegevens moeten worden opgehaald bij de externe provider of niet.

Afhaalmaaltijd + afscheidscadeau

En zo is mijn korte avontuur in de wondere wereld van Liferay Forms tot een einde gekomen. Hoewel het soms omslachtig aanvoelde, mijn wenkbrauwen meer dan eens deed fronsen en me een aantal fundamentele levensvragen deed stellen, voelt het alsof Liferay Forms de potentie heeft om op een flexibele en uitbreidbare manier te doen waarvoor het ontworpen is: het verzamelen van informatie en feedback van mensen.

Als beloning voor het feit dat u zo ver bent gekomen in deze blogpost, heb ik een repository beschikbaar gesteld die u vrij mag gebruiken. Het bevat de velden en eindpunten die in deze blog worden besproken:

• het automatisch ingevulde naamveld,
• het automatisch ingevulde e-mailveld,
• een aangepast Liferay eindpunt.

Bedankt voor het lezen!