Cookies zijn vereist voor de werking van deze website. Schakel cookies in om deze website op de juiste manier te kunnen gebruiken. Lees meer hier.

Vue.js formulieren

Toegevoegd op 2020-12-16 15:24:00 UTC


Achtergrond

Een grote klant kwam met de opdracht om een abonnementen beheer systeem op te zetten, wat aansloot op hun eigen platform. Ze wilden graag dat wij geautomatiseerd verschillende feeds konden monitoren op nieuwe publicaties, om deze vervolgens als e-mail naar hun abonnees uit te sturen. Abonnees zouden dan de mogelijkheid moeten krijgen om zich voor verschillende nieuwsbrieven en onderwerpen in te schrijven en daarbij aan te geven op welke momenten ze deze willen ontvangen: direct, in een dagelijkse samenvatting of in een wekelijkse samenvatting. De abonnees en hun voorkeuren zouden dan door onze bestaande e-mail software producten gebruikt moeten worden om al deze mailings uit te sturen.

De klant had echter een groot aantal websites wat op hun platform was aangesloten en er zouden in de toekomst regelmatig meerdere websites bijkomen. Op al deze websites moest het mogelijk worden voor een abonnee om zijn of haar abonnementen te beheren voor die specifieke website. Vanwege de grote hoeveelheid websites wilden ze de beheerformulieren op een makkelijke manier kunnen integreren en omdat de data niet bij de klant moest worden opgeslagen maar in de databases van onze eigen producten, kwam de ontwikkeling van deze formulieren bij ons te liggen.

Oplossing

De gekozen oplossing was om een Javascript client te ontwikkelen die de klant gemakkelijk in hun websites kon integreren.

De client is gebouwd op het Vue.js framework en communiceert met een op maakt gemaakte ASP.NET Web API voor de afhandeling van de formulieren.

Gebruik

De klant initialiseert de client op een van de websites en geeft daarbij de context mee met bijbehorende parameters. De meegegeven context beïnvloedt welk formulier de gebruiker te zien krijgt. Zo zal bij een inschrijfpagina voor een nieuwsbrief de desbetreffende context worden meegestuurd met een extra parameter die aangeeft om welke nieuwsbrief het gaat. Maar de client biedt ook de mogelijkheid voor een abonnee om hun abonnementen voor de website te beheren.

Communicatie tussen client en API

De beschikbare formulieren en bijbehorende HTML zijn een onderdeel van de client zelf. De inhoud van deze formulieren, zoals de teksten, het overzicht van je abonnementen of de nieuwsbrief waarvoor je je inschrijft, wordt aangeleverd door de achterliggende API. De formulieren worden gegenereerd door de client en de validatie op invoervelden gebeurt zowel in de client als achterliggende API. De afhandeling van de formulieren wordt door de API gedaan. Deze vertelt de client ook wat de vervolgstappen zijn, bijvoorbeeld wanneer er een bevestigingspagina getoond moet worden of een ander formulier. De API controleert tevens ook of de client wel mag worden ingeladen op de website, door te kijken of deze website bekend is en een geldige configuratie heeft.

Meertaligheid

De client ondersteunt ook meerdere talen. De API voedt bij het initialiseren de client met de juiste vertaalbestanden voor dezelfde taal als de website waar de client op wordt geladen. De klant geeft echter wel een fallback taal mee, voor het geval er niet gecommuniceerd kan worden met de achterliggende API en er een nette foutmelding getoond moet worden.

Wesley Donker

Software Engineer

Nederland