Skip to main content
Skip table of contents

Formulierveld visualisaties

Vooraf

Visualisaties kan je instellen binnen de formulierveld eigenschappen. Afhankelijk van het veldtype of elementtype zijn er één of meerdere visualisaties beschikbaar. Op deze pagina vind je een overzicht van de mogelijkheden.

Naast onderstaande out-of-the-box beschikbare visualisaties is het ook mogelijk om je eigen applicatie-specifieke visualisaties uit te werken. Selecteer dan ‘andere’ en geef de key op van je customizatie. Klik hier voor meer info omtrent extensies & customizaties.

De look & feel is telkens lichtjes anders in de frontoffice dan wel in de backoffice. Bovendien zijn er ook verschillen naargelang de styling (neutraal, Vlaamse Overheid, enzovoort). Je kan steeds testen in de preview omgeving van je applicatie.

Basisvelden

Bedrag

Vóór het formulierveld wordt een '€'-teken gevisualiseerd.

image-20250828-150614.png
image-20250828-150659.png

Validatie bij invoeren van bedrag.

image-20250828-150739.png

Bijlage

Backoffice

image-20250314-154813.png
image-20250314-160519.png

Frontoffice Vlaamse Overheid

image-20250124-103614.png
image-20250314-160431.png

Bijlage lijst

Box (of niet gespecificeerd)

Backoffice

image-20250314-140424.png

Frontoffice Vlaamse Overheid

image-20250314-160158.png

Compact

Backoffice

image-20250314-140726.png

Frontoffice Vlaamse Overheid

image-20250314-155901.png

Datum

Backoffice met date picker

image-20250314-150025.png

Frontoffice Vlaamse Overheid

image-20250124-103349.png

Informatie

Niet gespecificeerd

Neutrale platte tekst

Overige visualisaties

Backoffice

image-20250317-104159.png

Frontoffice Vlaamse Overheid

image-20250317-104254.png

Ja/nee

Niet gespecificeerd of radio

Backoffice

image-20250314-152708.png

Frontoffice Vlaamse Overheid

image-20250314-152600.png

Checkbox

Backoffice

image-20250314-153205.png

Frontoffice Vlaamse Overheid

image-20250314-153027.png

Compact

Backoffice

image-20250314-153440.png

Frontoffice Vlaamse Overheid

image-20250314-153517.png

Kaart

Visualisatie gelijklopend in backoffice en frontoffice. We maken gebruik van de Mapbox component.

Sinds platform-versie 29.1.X is het mogelijk om de huidige locatie van het toestel te gebruiken als input. De gebruiker krijgt dan in je browser een pop-up waarbij hij of zij toestemming moet geven.

Gebruik huidige locatie icoon

image-20251215-151754.png

Pop-up

image-20251215-151646.png

Screenshot

Screenshot met gebruik huidige locatie icoon aangeduid (zie rode pijl).

Keuze

Expanded (of niet gespecificeerd)

Backoffice

image-20250314-125641.png

Frontoffice Vlaamse overheid

image-20250124-103145.png

Dropdown

Backoffice

image-20250314-125837.png

Frontoffice Vlaamse overheid

image-20250314-150420.png

Meerkeuze

Expanded (of niet gespecificeerd)

Backoffice

image-20250314-124718.png

Frontoffice Vlaamse Overheid

image-20250124-104639.png

Dropdown

Backoffice

image-20250314-125040.png

Frontoffice Vlaamse Overheid

image-20250314-150952.png

Rekeningnummer, telefoonnummer

Deze veldtypes hebben een gelijklopende visualisatie in frontoffice als in backoffice.

Bijzonderheden

Een telefoonnumer kan een vast of mobiel nummer zijn.

image-20250317-083744.png
image-20250317-083349.png

De landcode (prefix) wijzigt wanneer je de vlag switcht.

image-20250317-083622.png
image-20250317-083920.png

De prefix wordt achterliggend ook opgeslagen.

Rijksregisternummer

Punten en liggende strepen helpen bij het invullen, maar worden achterliggend niet opgeslagen.

image-20250317-084021.png

Tekst, getal, e-mail, tekstvak

Deze veldtypes hebben een gelijklopende visualisatie visualisatie in frontoffice als backoffice.

image-20250317-082011.png

Bijzonderheden

E-mailadres bevat een ingebouwde validatie.

image-20250317-081748.png
image-20250317-081846.png

Tekstveld wordt ingevuld door middel van een referentielijst.

Klik het veld of het vergrootglas aan.

image-20260320-162438.png

Selecteer een boek.

image-20260320-162401.png

Getal bevat een increment & decrement functie (frontoffice Vlaamse Overheid stijl).

image-20250317-082142.png

Tekstvlak laat meerdere regels toe.

image-20250317-082621.png

In de backoffice is een HTML-editor mogelijk (mits configuratie, zie eigenschappen voor dit elementtype).

image-20250317-082820.png

Layout

Groep

Box (of niet gespecificeerd)

Backoffice

image-20250314-134427.png

Frontoffice Vlaamse Overheid

image-20250314-155208.png

Lijst

Box (of niet gespecificeerd)

De default visualisatie voor een lijst zijn boxes die open of dicht kunnen klappen. Elke box is een item en bevat een aantal eigenschappen.

Backoffice

image-20250314-135948.png

Frontoffice Vlaamse Overheid

image-20250314-155450.png

Compact

Compacte weergave met directe gegevensinvoer in een lijst. Ideaal wanneer elk item een beperkt aantal eigenschappen bevat.

Backoffice

image-20250314-135800.png

Frontoffice Vlaamse Overheid

image-20250314-154501.png

Modal

Gegevensinvoer per item verloopt via een modal of pop-up. Alle ingevoerde items worden vervolgens weergegeven in een lijst. Geselecteerde eigenschappen kunnen via de eigenschap “containedInSummary”: true als kolom weergegeven worden in het overzicht.

Backoffice

Modal visualisatie is niet beschikbaar in de backoffice. Je valt terug op de default (box).

Frontoffice Vlaamse Overheid

image-20260327-083627.png

Als je klikt op + Toevoegen dan opent zich een modal waarin je een nieuwe entry kunt maken.

image-20260327-083850.png

Subdocs

Deze weergave kan je niet selecteren in Studio UI, maar kan je wel instellen via de JSON.

Subdocs is een specifieke weergave van een lijst waarbij het invullen van alle subvelden (vragen of eigenschappen) voor elk item op een afzonderlijke subpagina van het formulier gebeurt. In het formulier zelf komt enkel een overzicht (weergave) van de aangemaakte items met de mogelijkheid om bestaande items te schrappen of nieuwe aan te maken. Meer uitleg hierover bij de eigenschappen van lijsten.

2025.03.17_Subdocs.gif

Let op de extra knoppen onderaan om te switchen tussen lijstitems of om naar het overzicht terug te keren.

Sectie

Backoffice

image-20241217-092114.png

Frontoffice

image-20241217-095024.png

Integraties

Spotbooking

Neutrale frontoffice (of eGovFlow toepassing)

Startknop widget

SpotbookingWidget1.png

Gegevens invullen

SpotbookingWidget2.png

Inname definiëren

SpotbookingWidget3.png

Na afsluiten widget

SpotbookingWidget0.png

Backoffice

De knop opent Spotbooking in een nieuw browsertabblad. Na aanmaak van een nieuwe inname in Spotbooking kopieer je de ID vanuit Spotbooking in het formulierveld.

SpotbookingBO.png

Na invullen ID

SpotbookingWidget.png

Subsidy calculation result

Custom implementatie (niet out-of-the-box beschikbaar).

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close