Overzicht beschikbare componenten

Adres

Gebruik de adrescomponent om de adresgegevens van de gebruiker te vragen. Deze component is gelinkt met het CRAB (Centraal Referentieadressenbestand) van Vlaanderen.

• Bevat de volgende velden

  • Postcode

  • Gemeente

  • Straat

  • Huisnummer

  • Bus

• Per adres wordt voor elk element (postcode, gemeente, …) een aparte component toegevoegd. Al deze elementen zijn grotendeels voorgeconfigureerd.

• Per adrescomponent kunt u zelf bijv. Naam en Titel aanpassen. Per element kunt u zelf bijv. ook Naam en Titel aanpassen. U kunt bovendien meegeven welk veld verplicht is.

• De lijsten zijn dynamisch: wanneer de gebruiker start met typen, verschijnen er suggesties die de lijst beperken.
  

  

• De lijst met postcodes bevat alle postcodes. De postcode stelt de gemeente(n) voor.

• De lijst met gemeente(n) bevat alle gemeenten. De gemeente stelt de postcode(s) voor.

• De lijst met straten wordt automatisch beperkt tot de straten in de gemeente. De naam van de straat beginnen te typen zorgt ervoor dat de lijst met straten verder beperkt wordt.
  

  

  
  

  

• De lijst met huisnummers wordt automatisch beperkt tot de huisnummers in de straat.

• De lijst met busnummers wordt automatisch beperkt tot de busnummers van het huisnummer.

Optioneel:

• Het is mogelijk de lijst van postcodes te beperken tot een gewenste lijst.

• Dit kan door een rule als: limitPostcodesString(postcode ,"3600,3500,3000");

  • “postcode” is de naam van het postcode veld op uw formulier

  • 3600, 3500, 3000 zijn de gewenste postcodes.

  • Deze rule moet worden toegevoegd op het Root Panel, bij event “Initialise” - zie voor meer details het hoofdstuk over het toevoegen van rules aan een formulier

Afbeelding

Ellen Vanherstraeten

Belgisch IBAN-nummer

Gebruik de Belgisch IBAN-nummercomponent om een IBAN-nummer op te vragen. Deze component is gelijkaardig aan de Tekstveld-component, maar voegt validatie van het IBAN-nummer toe. Bij deze component wordt automatisch een help-icoon voorzien met helptekst over het IBAN-formaat.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Tijdelijke Tekst

• Verplicht Veld

• De Helptekst: pas hiervoor de Lange beschrijving aan.
  

  

Wanneer een gebruiker het IBAN-nummer verkeerd ingeeft (fout formaat of fout in het controlegetal) verschijnt de volgende foutboodschap:

Betaling

Ellen Vanherstraeten

Captcha

Ellen Vanherstraeten

Datum

Gebruik deze component als alternatief voor de Datumkiezer. Het verschil is dat u de datum in 3 aparte velden (dag, maand, jaar) laat ingeven.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel; bijv. “Geef hier de datum van de opleiding in”

• Verplicht veld

Soms is het interessant om de datum standaard in te stellen op de huidige datum. Selecteer daarvoor in het Eigenschappen-paneel de Standaardwaarde: Zet huidige datum als standaardwaarde.

Datumkiezer

Gebruik de Datumkiezer om een datum te laten kiezen in een kalender pop-up. U kunt ook gewoon de datum laten ingeven in een datumveld.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Verplicht veld

Soms is het interessant om de datum standaard in te stellen op de huidige datum. Selecteer daarvoor in het Eigenschappen-paneel de Standaardwaarde: Zet huidige datum als standaardwaarde.

E-mailadres

Gebruik de e-mailadrescomponent om een e-mailadres op te vragen. Deze component is gelijkaardig aan de Tekstveld-component maar voegt een validatie op het e-mailadres toe.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Tijdelijke tekst - zoals die wordt getoond in het formulier
  

  

• Verplicht veld

Wanneer een gebruiker het e-mailadres verkeerd ingeeft (fout formaat) verschijnt de volgende foutboodschap:

Extra Tussenruimte

Gebruik deze component om de leesbaarheid van een formulier beter te maken door extra ruimte te creëren tussen de componenten. Hiervoor kunt u deze component combineren met de Scheidingslijn-component.

U kunt zelf de grootte van de tussenruimte instellen (in pixels). De standaardwaarde is 8.

In het onderstaande voorbeeld werd de Extra Tussenruimte gebruikt bij de vraag om de algemene voorwaarden te bevestigen. De grootte van de tussenruimte staat op 24 pixels.

Filter Tekst

Ellen Vanherstraeten

Gebruikers Login Info en Metadata

Gebruik deze technische componenten om:

• extra informatie toe te voegen aan de verzendinformatie

• in uw formulier toegang te krijgen tot informatie over een ingelogde gebruiker (zie “Secured Formulieren en Login”)

Gebruikers Login Info

Gebruik deze component om toegang tot uw formulier alleen mogelijk te maken na login (zie “Secured Formulieren en Login”).

U kunt de informatie over de ingelogde gebruiker via regels (rules) gebruiken om:

• velden uit het formulier vooringevuld aan te bieden

• bepaalde logica in het formulier te baseren op de beschikbare gebruikersinformatie

Binnen de de ACM/IDM-context is de volgende informatie beschikbaar over de ingelogde gebruiker:

In het voorbeeld van een formulier voor burgers die een klacht willen neerleggen, kunt u van de burger die inlogt onmiddellijk het rijksregisternummer, voornaam en naam voorinvullen. U kunt bovendien deze info niet aanpasbaar maken en meesturen wanneer het formulier wordt ingediend.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Verplicht veld

• Selecteer Schakel Object uit om ervoor te zorgen dat bijv. de naam van de gebruiker niet kan aangepast worden.

• Selecteer Verberg Object om bepaalde velden niet niet te tonen aan de gebruiker
  

  

• Om aan te geven dat de familienaam van de ingelogde gebruiker verplicht moet ingevuld worden, ga naar Eigenschappen > Gebruiker informatie > Gebruiker header en vul OIDC_CLAIM_family_name in.
  
  Zo kunt u ook andere Gebruiker Login Info-velden verplicht maken. Vul in de Gebruiker Header OIDC_CLAIM_ gevolgd door vo_orgcode, vo_orgnaam, vo_family_name, vo_given_name, vo_email,  rrn, VO_DOELGROEP_CODE, wv_orgcode, dv_formulieren_rol_3d.

Metadata

Gebruik deze component om de informatie uit de gebruikerssessie op te nemen in de informatie die verzonden wordt. Het grootste verschil met de Gebruikers Login Info is dat de Metadata niet zichtbaar is in het formulier. De Metadata wordt pas bij het eigenlijke verzenden (op de server) toegevoegd. Dit kan voorkomen dat de informatie binnen het formulier wordt aangepast. 

U kunt verder nog de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Verberg Object staat hier standaard aangevinkt om bepaalde velden niet te tonen aan de gebruiker

Dit zijn de beschikbare metadata:

• Gebruikersmetadata (alleen zinvol bij ingelogde gebruikers via een beveiligd formulier)

  • Rijksregisternummer

  • Voornaam

  • Naam

• Metadata over de sessie

  • TransactionID (uniek ID gekoppeld aan de inzending)

  • Datum en tijdstip van inzending

• Metadata over de betaling (zie “Betalingen koppelen aan formulier”)

  • PspPaymentID (unieke ID gekoppeld aan de betaling)

  • Betaallink

  • Gestructureerde mededeling

Helptekst

Gebruik de Helptekst-component om de gebruiker extra informatie te geven over hoe de gevraagde informatie in te vullen. De Helptekst kan een korte of lange omschrijving meegeven:

• De korte omschrijving wordt direct getoond onder de titel van de component
  

  

• De lange omschrijving is de tekst in de tooltip achter het i-icoon (informatie)
  

  

Vul onder Eigenschappen de korte of de lange beschrijving aan:

Naast de Helptekst zijn er ook nog andere manieren om de gebruiker te ondersteunen bij het invullen van een formulier met:

• een tijdelijke tekst die verschijnt vóór het invullen van een veld

• een relevante tijdelijke tekst bij een keuzelijst, bijv. “Kies een activiteit”

• een specifieke melding over waarom een veld verplicht is, bijv. “Vul de schoenmaat; wij zorgen dat veiligheidsschoenen in jouw maat klaarstaan”.

• een heldere titel bij het veld

• één of meerdere infotegels voor complexe velden of formulier(secties)

Infotegel

Gebruik deze component om informatie in een formulier extra in de verf te zetten. Een infotegel bestaat uit vaste tekst in een kadertje met titel en tekst. U kunt ook een icoon toevoegen.

U kunt de volgende Eigenschappen aanpassen:

• Titel voor het kadertje

• Subtitel (indien relevant)

• Icoon (geen, alert, vraagteken, info, …)

• Tekst

Loader

Ellen Vanherstraeten

Notificatie

Gebruik de Notificatie-component om de gebruiker van het formulier een mail te sturen die de ontvangst van het formulier bevestigt.

Om te Notificatie-component te gebruiken, moet u voor uw formulier eerst een Notificatie-afhandeling maken.

Zie ook Een notificatie (o.a. ontvangstbevestiging) sturen

U kunt de volgende Eigenschappen aanpassen:

• Titel: de tekst die in het vet staat

• Boodschap: de tekst die naast de checkbox staat

• Tijdelijke (placeholder) tekst: de tekst die als suggestie in het e-mailadres-veld staat

Ellen Vanherstraeten (TODO: uitleg secured formulieren)

Nummerveld

Gebruik deze component om alleen getallen te laten invoeren (geen letters).

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Verplicht veld

Ondernemingsnummer

Gebruik deze component om het ondernemingsnummer - dat is het uniek identificatienummer voor ondernemingen die ingeschreven zijn bij de Kruispuntbank van Ondernemingen - op te vragen. Na ingave wordt dit nummer via een vast patroon getoond.

Deze component is gelijkaardig aan de Tekstveld-component, maar voegt validatie van het ondernemingsnummer toe. Er wordt gecontroleerd op de lengte (9 cijfers) en het controlegetal (de laatste 3 cijfers) van het ondernemingsnummer.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Tijdelijke tekst

• Verplicht veld

Om de tekst achter het (i)-icoon aan te passen, scroll in het Eigenschappen-paneel naar Helptekst.

Pas de Helptekst aan bij Lange beschrijving. 

Rijksregisternumer

Gebruik deze component om het rijksregisternummer op te vragen. Na ingave wordt dit nummer via een vast patroon getoond.

Deze component is gelijkaardig aan de Tekstveld-component, maar voegt validatie van het rijksregister toe. Er wordt gecontroleerd op de lengte (11 cijfers) en het controlegetal (de laatste 2 cijfers) van het ondernemingsnummer.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Tijdelijke tekst

• Verplicht veld

Om de tekst achter het (i)-icoon aan te passen, scroll in het Eigenschappen-paneel naar Helptekst.

Pas de Helptekst aan bij Lange beschrijving. 

Scheidingslijn

Gebruik deze component om tussen verschillende componenten of panelen een scheidingslijn te plaatsen. Dit kan de gevraagde informatie in het formulier beter opdelen en zo overzichtelijker maken, zoals in dit voorbeeld:

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Dikte (in pixels) - standaardwaarde = 1

Scribble-handtekening

Gebruik de Scribble-handtekening-component om de gebruiker een handtekening te laten toevoegen om bijv. te laten printen op een vergunning, lidkaart, enz.

De Scribble-handtekening is – net als de “Ondertekend voor Akkoord” bij de Voorwaarden-component – geen gekwalificeerde handtekening, maar dit soort handtekening is vaak voldoende bevestiging/goedkeuring/akkoord te vragen.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Verplicht veld

• De aspect ratio (verhouding tussen breedte en hoogte) - standaardwaarde = 6,8888 pixels

• Helptekst (korte omschrijving)

Het eindresultaat is dan als volgt:

Hoe de handtekening wordt meegestuurd hangt af van de aflevermethode:

• naar een rest endpoint: de afbeelding van de handtekening wordt base64 encoded meegestuurd in de json

• via email: de afbeelding van de handtekening wordt als attachment meegestuurd

• datahub: de afbeelding van de handtekening is zichtbaar in datahub

Tabel

Gebruik de Tabel-component om informatie op te vragen in tabelvorm.

U kunt de labels aanpassen bij de Headers en de Tekst in de rijen

U kunt via het Eigenschappen-paneel de namen van alle tabel-items aanpassen:

De cellen in de tabel zijn standaard tekstvelden. Deze kunt u Vervangen door andere componenten.

Om de rijen te bewerken, klik op de tabelrij en gebruik de opties in de toolbar om een rij toe te voegen, te verwijderen, te verplaatsen of de naam aan te passen.

Om de kolommen te bewerken, klik op de header en gebruik de opties in de toolbar om een kolom toe te voegen, te verwijderen, te verplaatsen of de naam aan te passen.

Tekstveld

Gebruik de Tekstveld-component om informatie op te vragen waarvoor geen specifieke andere component geschikt is. Zo bestaat er bijv. voor e-mailadressen een aparte component, maar niet voor voornamen.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Tijdelijke tekst

• Verplicht veld

Het Voornaam-veld ziet er als volgt uit:

Telefoonnummer

Gebruik deze component om een telefoonnummer te vragen. Deze component is gelijkaardig aan de Tekstveld-component, maar voegt validatie van het telefoonnummer toe.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Tijdelijke tekst

• Verplicht veld

Bij een fout in het formaat van het telefoonnummer, wordt een foutboodschap getoond.

Tijdelijk Opslaan

Er zijn 3 componenten die te maken hebben met het tijdelijk opslaan van gegevens:

• De knop om de gebruiker zijn wijzigingen/gegevens te laten opslaan

• Een bericht om aan de gebruiker te tonen dat zijn gegevens correct zijn bewaard

Bij gebruik in het formulier zien die er als volgt uit:

Voorts is er een lijst met tijdelijke versies die een gebruiker heeft bewaard:

Hoe deze componenten juist gebruikt moeten worden om “Tijdelijk opslaan” goed te laten werken voor een formulier leest u hier: De data in een formulier tijdelijk opslaan

Voorwaarden

Gebruik deze component om bijv. algemene voorwaarden of privacybeleid te aanvaarden. Deze component bevat een checkbox en een extra tekstveld om de voorwaarden te omschrijven of naar externe pagina’s door te verwijzen.

Een voorbeeld:

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Titel

• Verplicht veld

• Consent-tekst, bijv. “Ik ga akkoord met de Algemene Voorwaarden”

• Beschrijving van wat er goedgekeurd wordt

Om een link naar een website te leggen, klik op het Maximaliseren-symbool.

Selecteer de tekst waarop de link moet gelegd worden, vul de URL in en geef aan dat die link moet openen in een New Tab. Hieronder ziet u het resultaat van deze configuratie:

Een voorbeeld:

Waarschuwing

Gebruik deze component om een foutmelding extra in de verf te zetten. Deze component bestaat uit een titel en een tekst. Afhankelijk van het type fout kiest u een andere achtergrondkleur.

U kunt de volgende Eigenschappen aanpassen:

• Naam

• Hoofdtekst

• Achtergrondkleur

Dit is het resultaat: