De widgets

Alles wat u op een scherm ziet is een widget. Het palet Widgets, links van het canvas, brengt 32 widgets van huis uit mee — van deze pagina vertrekt u met de wetenschap waar elk voor dient, en met de belangrijkste in detail uitgelegd. Heeft de app door u geprogrammeerde widgets, dan verschijnen die op hetzelfde palet, in de sectie Aangepast.

#De catalogus, per categorie

#Formuliervelden

Alle koppelen zij aan een veld van een record-datastore (sectie Gegevenskoppeling) en doen zij mee aan de validatie — zie de formulieren.

Widget	Waar het voor dient
Tekstvak	Tekst van één regel. Heeft een Masker, de modus Wachtwoord (tekst verbergen) en een placeholder.
Tekstgebied	Lange tekst over meerdere regels — notities, beschrijvingen.
Getal	Numerieke waarden.
Ja/Nee	Een booleaanse schakelaar.
Keuzelijst	Keuze uit opties: Vaste lijst, Enum uit het model of Datastore; met Doorzoekbaar, Multiselectie en de modus Boom (hiërarchisch).
Datum	Datum, Datum en tijd of alleen Tijd (het veld Type bepaalt het).
Kleur	De keuze van een kleur.
Bestand	Uploaden door slepen en/of met een knop, met voorbeeld, groottelimiet en de keuze van de opslag. De limiet komt nooit boven het Maximaal bestand (MB) in de platforminstellingen, tot 100 MB. Met In het veld zelf (base64) gaat het bestand mee in het verzoek en ligt de limiet rond 3 MB. Elk account verstuurt tot 300 bestanden en 3 GB per uur (en elk adres tot 20 GB); daarboven meldt de widget dat er te veel bestanden zijn verstuurd en vraagt het later opnieuw te proberen.

Elk veld met een waarde toont rechts een discrete × die het wist — in een Lijst die als filter dient is dat de manier om terug naar "alles" te gaan zonder iets te kiezen. De eenvoudige Lijst opent de opties onder het veld; met Doorzoekbaar opent ze een zoekvak en wordt de lijst korter bij het typen; met Meervoudige selectie gaat elke optie aan en uit met een vinkje.

De Keuzelijst toont 10 opties tegelijk. De eigenschap Zichtbare opties, onder Gedrag, wijzigt dat aantal (0 toont ze allemaal). Zijn er meer opties dan dat aantal, dan krijgt de lijst een zoekveld, ook zonder Doorzoekbaar, en een voettekst met het totaal, bijvoorbeeld "10 van 245 · typ om te zoeken". De zoekopdracht doorzoekt alle opties en negeert accenten en hoofdletters. Bij Multiselectie staan de al gekozen opties bovenaan de lijst, en het veld toont de eerste twee, gevolgd door "+N".

In de voettekst opent het vergrootglas (Alles bekijken) een venster met alle opties in een tabel, met zoeken en 50 rijen per pagina. Staat de Bron van de opties op Datastore, dan voegen de Kolommen van het keuzevenster velden toe naast het label (bijvoorbeeld het btw-nummer, om twee klanten met dezelfde naam te onderscheiden), en krijgt het venster een filterbalk over die velden. Bij een enkele keuze kiest een klik op een rij de optie. Bij Multiselectie heeft elke rij een selectievakje, Alles selecteren selecteert de resultaten op alle pagina's, en alleen Toepassen slaat de keuze op; Annuleren verandert niets. Het venster houdt altijd dezelfde grootte, met weinig of veel resultaten.

In KeplinGo opent de Keuzelijst een blad met dezelfde regel: 10 opties, zoeken en de voettekst met het totaal. Alles bekijken toont alle opties in hetzelfde blad, met de velden van de Kolommen van het keuzevenster onder elk label, en Multiselectie slaat alleen op met Toepassen.

Staat het Laden van de datastore van de Keuzelijst op Eén pagina per keer, dan komt alleen de eerste pagina op het scherm. De zoekopdracht vraagt het dan aan de server, het totaal in de voettekst is dat van de server, het keuzevenster vraagt elke pagina aan de server, en het veld haalt de naam op van een opgeslagen waarde die de eerste pagina niet bevatte. In deze modus zoekt de zoekopdracht in het label (dat een tekstveld moet zijn), hoofdletters en accenten tellen zoals de database ze telt, en Alles selecteren verschijnt niet, omdat daarvoor alle records geladen zouden moeten worden.

#Acties en navigatie

Widget	Waar het voor dient
Knop	De klassieke actie. Tonen: Icoon + Tekst, Alleen icoon of Alleen tekst; de Actie bij klikken navigeert, opent een modaal venster of draait code.
Knop met menu	Een knop die meer opties opent. Uiterlijk: Gesplitst (het midden voert uit, de pijl opent het menu), Menu of Hamburger. Elke optie kan zich verbergen of uitschakelen op voorwaarden.
Link	Klikbare tekst — Bestemming: Scherm van de app (met parameters) of Externe URL (met In een nieuw tabblad openen).
Kruimelpad	Het pad "u bent hier", met klikbare niveaus en een laatste niveau dat vast is of aan een veld gekoppeld.
Exporteren	Een knop die de gegevens van een datastore als spreadsheet (.xlsx) downloadt — gekozen velden, optionele Koprij en Bestandsnaam met {date}.

Exporteren leest de gegevens op het moment van de klik, in blokken, tot 50.000 rijen; daarboven bevat het bestand de eerste 50.000 en verschijnt er een waarschuwing. De gebeurtenis onExport zegt of het bestand is ingekort (truncated).

In KeplinGo wordt het bestand CSV; tekst die Excel als formule zou lezen (beginnend met = of @, bijvoorbeeld) krijgt een apostrof ervoor.

#Structuur

Widget	Waar het voor dient
Paneel	Een container met kader en titel — ordent widgets die voortaan samen bewegen.
Tabbladen	Een container met tabbladen; elke onderliggende widget hoort bij één tabblad. Stijl van de tabbladen: Kader, Pillen of Onderstreept.
Vaste balk	Een balk over de volle breedte, vastgezet Bovenaan of Onderaan het scherm — voor actiebalken die altijd zichtbaar zijn.
Lijn	Een scheidingslijn, Horizontaal of Verticaal — de kleur en de streep komen uit het Uiterlijk.

#Inhoud en media

Widget	Waar het voor dient
Label	Eenvoudige tekst — titels, bijschriften, losse waarden. Aanvaardt Waarden in de zin ({n} in de tekst).
Markdown	Rijke tekst geschreven in Markdown — vast of uit een veld.
Afbeelding	Een afbeelding via een Vaste URL, een Asset van de app of een Veld (dynamisch); Schaling: Bevatten, Vullen of Uitrekken.
Externe pagina	Sluit een pagina van buiten in (een kaart, een video, BI van derden) of door u geschreven HTML. Draait geïsoleerd: ziet de sessie noch de gegevens van de app.

#Gegevens

Widget	Waar het voor dient
Tabel	Het raster met records — getypeerde kolommen, sorteren, selecteren en actieknoppen. Detail hieronder.
Lijst	Records in een verticale lijst, met velden in rollen (Titel, Ondertitel, Hoofdtekst, Bijschrift) en een optionele afbeelding.
Kaarten	Hetzelfde sjabloon als de Lijst, maar in een raster van kaarten met N Kolommen.
Grafiek	Getekende reeksen — staven, lijnen, taarten en meer. Detail hieronder.
KPI	Een strook numerieke indicatoren met trends, doel en sparkline. Detail hieronder.
Filterbalk	Voorwaarden als chips (veld, operator, waarde) die een Tabel, Lijst, Kaarten, Kanban of Grafiek op het scherm filteren. Details hieronder.

#Borden en planning

Widget	Waar het voor dient
Kanban	Kaarten die tussen statuskolommen gesleept kunnen worden. Detail hieronder.
Kalender	Gebeurtenissen in de weergaven Dag/Week/Maand/Jaar. Detail hieronder.
Gantt	Balken van begin→einde met voortgang, groepen en afhankelijkheden. Detail hieronder.

#Documenten en processen

Widget	Waar het voor dient
Rapport	Toont een rapport van de app (PDF) binnen het scherm, met parameters gekoppeld aan wat er op het scherm staat en een Actiebalk om te vernieuwen en te downloaden.
Status van het proces	De historiek en de huidige stap van de workflows van een record, met beslisknoppen wanneer de openstaande taak van de kijker is.
Mijn taken	De inbox met workflowtaken van de aangemelde gebruiker — opent het scherm van de taak en beslist van daaruit.

#De Tabel

De Tabel is de meest gebruikte widget van het platform: hij koppelt aan een lijst-datastore en toont de records in een raster, met paginering, sortering en selectie.

De voettekst met het totaal en de paginapijlen verschijnt alleen als de records niet op één pagina passen. Hetzelfde geldt voor de widgets Lijst en Kaarten.

Datums die uit de API komen, verschijnen in de taal van de app, en een kolom met alleen de dag toont alleen de dag.

#Kolommen

Zodra u de datastore koppelt, ontstaan de kolommen één per veld. Daarna verfijnt u: gebruik in Kolommen de knop + kolom om toe te voegen, en klik op een kolom in het canvas om haar te bewerken — de inspector schakelt naar haar over.

Elke kolom heeft een Kop, Breedte, Sorteerbaar via de kop, Verborgen — en een Type:

Type	Wat het doet
Tekst	De waarde zoals zij is, met een optioneel Masker (# = teken).
Getal	Maakt de waarde op: Getal (regionaal) (met Decimalen, Scheidingsteken voor duizendtallen, Compact — 1,2 mln in plaats van 1.234.567 —, Prefix en Suffix) of Masker (# = cijfer).
Link	De cel wordt klikbaar. Bestemming: Scherm van de app (met parameters uit Veld van de rij, URL-parameter of Vaste waarde) of Script — uw eigen code die bij de klik draait. Het is de juiste kolom om een record vanuit de lijst te openen: de kolom die de rij identificeert (naam, omschrijving, datum) leidt met het id van de rij naar het recordscherm; een scherm in modale of zijpaneelmodus opent erbovenop en bij het sluiten laadt de lijst opnieuw.
Afbeelding	Toont de afbeelding waarvan het adres/de inhoud in het veld staat.
Bestand	Een downloadlink naar het bestand waarnaar het veld verwijst.
Sparkline	Een kleine grafiek per rij, in Lijnen of Balken, zonder assen of labels. De reeks komt uit een Veld met lijst (een lijst getallen in JSON of uit de API, of een tekst als 3,5,4) of uit Meerdere velden van de rij, één punt per veld. Je kiest de Kleur, Laatste waarde tonen ernaast, en een vaste Schaal (minimum en maximum) om rijen met elkaar te vergelijken. Deze kolom sorteert niet via de kop.

Een kolom van een relatieveld (klant.naam) sorteert niet via de kop: het sorteren gebeurt op de server, die alleen de velden van de tabel zelf kent.

#Acties van de tabel

In de categorie Gedrag maakt de actiesectie de CRUD-knoppen: Vernieuwen, Nieuw toevoegen, Record bewerken, Record verwijderen en Meerdere verwijderen. Elke ingeschakelde actie maakt een losse knop op het canvas, gekoppeld aan de tabel — u plaatst en stijlt die knop als elke andere.

• Nieuw toevoegen en Record bewerken openen een scherm of een modaal venster naar keuze (meestal het formulier van het record), met de parameters ingevuld vanuit de rij.
• Record bewerken en Record verwijderen worden pas actief met een rij geselecteerd; Meerdere verwijderen werkt op de Meervoudige selectie (de schakelaar die de kolom met selectievakjes toevoegt).
• De acties die schrijven vereisen dat de datastore een primaire sleutel heeft — de inspector waarschuwt: De datastore heeft een primaire sleutel nodig.

#Formulieren (invoervelden + record + validatie)

Er is geen widget "formulier": een formulier is de som van drie stukken, en juist die vrijheid laat u de kaart tekenen zoals u wilt.

1. Maak een record-datastore op het scherm (zie Datastores en gegevens) — bijvoorbeeld conta, geladen op de sleutel die uit de parameter id van de route komt.
2. Sleep de formuliervelden erin (Tekstvak, Keuzelijst, Datum…) en koppel bij elk de Gegevenskoppeling aan het juiste veld van de datastore.
3. Zet er een Knop "Opslaan" neer waarvan de gebeurtenis de datastore opslaat — de vooraf bepaalde actie Datastore opslaan van de gebeurtenis-editor schrijft de code voor u (zie Gebeurtenissen en de SDK).

De validatie leeft in elk veld, in de categorie Validatie:

• Verplicht — het veld moet ingevuld zijn.
• De standaardregels: Min. tekens, Max. tekens, Is e-mail, Is een telefoonnummer, Is een getal, Min. waarde, Max. waarde, Patroon (regex) en Gelijk aan veld (bevestiging van een wachtwoord, bijvoorbeeld).
• Validatie met een script — voor uw eigen logica: de code ontvangt value (de huidige waarde van het veld) en geeft true terug als die geldig is, of de foutmelding. Een btw-nummer, een IBAN, een bedrijfsregel.

Bij het opslaan draait de validatie helemaal: eerst de verplichte velden, dan de regels, dan het script. Het record gaat alleen door als alles slaagt.

Een veld met een fout krijgt een rode rand, en de melding verschijnt eronder, in de ruimte tussen de widgets. Het veld en het label blijven op hun plek. Laat minstens 16 pixels tussen een veld en de widget eronder, en tussen een veld en de onderkant van het paneel of tabblad waarin het staat, zodat de melding volledig zichtbaar is.

#De Grafiek

De Grafiek koppelt aan een datastore en tekent reeksen. Bij Type grafiek kiest u: Staven, Lijn, Vlak, Taart / Donut, Spreiding, Radar, Gauge (meter), Trechter of Heatmap.

Het wezenlijke is de toewijzing, in de categorie Gegevens:

• Categorieveld (X-as / segmenten) — wat de staven/segmenten scheidt.
• Waardevelden — een of meer numerieke velden; elk is een reeks.
• Reeksveld (groepering) — als alternatief voor de meerdere waarden: het pivoteert op het eerste waardeveld en maakt één reeks per afzonderlijke waarde (zonder waarden telt het records).

En daarna de afwerking:

Optie	Wat die doet
Gestapeld, Horizontaal, Vloeiende lijnen, Waarden bij de punten	Varianten van de tekening, afhankelijk van het type.
Legenda, Positie van de legenda, Tooltip	Het chroom van de grafiek. De legenda sleept u ook rechtstreeks in de grafiek om haar te plaatsen.
Notatie van de waarden	Dezelfde notatie als bij de kolommen Getal van de tabel, toegepast op assen, labels en tooltip.
Schaal van de waarden	Lineair of Logaritmisch — de logaritmische is er voor wanneer de reeksen ordes van grootte verschillen.
Een tweede as gebruiken	Een as rechts met een eigen schaal — om een totaal in euro's en een aantal in dezelfde grafiek te zetten.
Reeksen	Type per reeks (combinaties van staven met lijnen) en welke reeksen naar de 2e as gaan.
Geavanceerde opties	Een code-editor met alle eigenschappen van de grafiek-engine, met autocomplete — toegepast bovenop de configuratie, voor de gevallen die de velden niet dekken.

#De KPI

De KPI is een strook indicatoren — vier getallen naast elkaar maakt u met één widget met vier indicatoren, niet met vier widgets: uitlijning en tussenruimte zijn dan verzekerd.

Elke indicator (bij Indicatoren ▸ Indicator toevoegen) heeft:

• Een Label en een icoon, met de Positie van het bijschrift (Boven de waarde / Onder de waarde).
• Waarde (veld) + Aggregatie (Som, Gemiddelde, Aantal, Maximum, Minimum, Eerste, Laatste) over de gegevensset — of een Handmatige waarde wanneer er geen gegevens gekoppeld zijn.
• Trends (Trend toevoegen) — vergelijkingen onder het getal, met een Referentieveld, de notatie Percentage of Absolute waarde, en Minder is beter (draait de kleuren om): bij een oplopende schuld moet de pijl rood zijn.
• Doel — Geen doel, Handmatige waarde of Veld uit de datasource, met een optionele Voortgangsbalk.
• Sparkline tonen — het minilijntje van de historiek, met het Reeksveld.
• Periode (uit het veld) — over welke afsluiting het getal gaat (een ISO-datum wordt getoond als MM/JJJJ).

De gegevensset wordt door de hele widget gedeeld, maar elke indicator kan een Eigen gegevensset hebben.

#Het Kanban

Het Kanban toont de records als kaarten in kolommen — de pijplijn met kansen van Klantenbeheer is een kanban per status.

1. Koppel de datastore en kies het Statusveld (kolom) — het veld dat zegt in welke kolom elke kaart staat.
2. Bepaal de Bron van de kolommen: Statisch (u voegt elke kolom toe met Label, Waarde en kleur) of Enum (de kolommen komen uit de waarden van een enum van het model).
3. Stel het Sjabloon van de kaart samen — de velden en rollen, zoals in de Lijst.

Met Kaarten mogen worden gesleept ingeschakeld slaat het verplaatsen van een kaart meteen de nieuwe status in het record op. Het Volgordeveld (een numeriek veld) maakt de ordening binnen de kolom blijvend. Kolom voor zonder categorie vangt de records op waarvan de status bij geen enkele kolom past; Aantal kaarten toont het totaal in de kop.

De acties: Klik op een kaart (bewerken) en Kaart aanmaken (knop in de kolom) — elk daarvan kan naar een scherm navigeren, een modaal venster openen (met de parameters van de rij en de kolom) of een gebeurtenis uitsturen naar uw eigen code.

#De Kalender

De Kalender toont records met een datum als gebeurtenissen, in de weergaven Dag, Week, Maand en Jaar.

• Velden: Datumveld (begin), Eindveld (optioneel) (gebeurtenissen over meerdere dagen), Titelveld.
• Kleur van de gebeurtenissen: Eén kleur of Per veld — met een kaart waarde → kleur (een type-enum, bijvoorbeeld).
• Weergave: Beginweergave, Beschikbare weergaven, 1e dag van de week (Maandag/Zondag), Max. gebeurtenissen per dag in de maandweergave, de uren Begin/Einde in de dag-/weekweergaven, Navigatiebalk en Knoppen om van weergave te wisselen.
• Acties: Klik op een gebeurtenis (bewerken) en Dag-/periodeselectie (aanmaken) — begin en einde gaan als parameters mee naar het doelscherm, klaar om het aanmaakformulier vooraf in te vullen.

De kalender laadt alleen de records van de zichtbare periode — van maand wisselen haalt de nieuwe maand op, niet de hele tabel.

#De Gantt

De Gantt tekent balken van begin→einde op een tijdlijn — planning van projecten, campagnes, onboarding van klanten.

• Velden: Beginveld, Eindveld, Labelveld, Voortgangsveld (0–100) en Groepsveld (groepeert rijen).
• Veld met afhankelijkheden — de id's (primaire sleutel) van de voorgangers, als JSON-lijst of gescheiden door komma's; de Gantt tekent de pijlen.
• Beginzoom (Dag, Week, Maand), Lijn van vandaag en Weekenden arceren.
• Acties: Klik op een balk (bewerken) en Klik op lege ruimte (aanmaken) — de aangeklikte datum gaat als parameter mee.

De Gantt is om te lezen: de balken slepen niet — de datums wijzigt u in het formulier van het record.

#De Filterbalk

De Filterbalk laat wie de app gebruikt een lijst op elk veld filteren, zonder dat jij voor elke kolom een filterveld tekent. Hij staat boven een Tabel, Lijst, Kaarten, Kanban of Grafiek en schrijft de voorwaarden als chips.

1. Sleep de Filterbalk naar het scherm en kies onder Gegevens de Doelwidget — de lijstwidget waarvan de datastore de voorwaarden ontvangt.
2. Kies onder Filterbare velden de velden die worden aangeboden. Zonder keuze biedt de balk alle eenvoudige velden van de datastore van het doel aan; de kolomkoppen van de tabel dienen als label. Relatievelden (klant.naam) worden niet aangeboden: het filter draait op de server, die alleen de velden van de tabel zelf kent.
3. Optioneel: kies onder Zichtbare waarden hoeveel voorgestelde waarden de lijst tegelijk toont (standaard 10; 0 toont ze allemaal). De zoekopdracht doorzoekt altijd alle waarden, en een voettekst vermeldt hoeveel er zijn. In de waardestap opent het vergrootglas in de voettekst het keuzevenster met alle waarden van het veld.

In de app wordt elke voorwaarde in drie stappen geschreven, altijd zichtbaar: het veld, de operator en de waarde. De opties van de volgende stap verschijnen vanzelf; typen filtert ze. Voorgestelde waarden komen uit de geladen gegevens, maar wat je typt telt altijd, ook als het niet in de lijst staat.

De operators hangen af van het veldtype: tekst (bevat, gelijk aan, begint met…), getal en datum (vergelijkingen), en lijsten (gelijk aan, niet gelijk aan). Een van en geen van nemen meerdere waarden in dezelfde chip: elke keuze komt erbij, en Enter of Toepassen sluit de voorwaarde. De × van een chip verwijdert die voorwaarde; de × van de balk wist alles.

Wanneer een voorwaarde sluit, gaat de lijst niet vanzelf weer open: de balk blijft klaar om te typen. Voor nog een filter typt u, klikt u op de balk of drukt u op ↓.

De voorwaarden voegen zich bij die van de datastore van het doel (Filters (where)) en het verzoek gaat met paginering naar de server — filteren haalt nooit de hele tabel op. Widgetgebonden filters (een Lijst gekoppeld aan een datastore-voorwaarde) blijven bestaan en kunnen op hetzelfde scherm leven: de snelle dropdown voor het meest gebruikte filter, de balk voor de rest.

In datumvelden schrijft u de waarde zoals u die leest: "26/09/2026", "26-09-2026", "26.09.2026" of "2026-09-26", met of zonder tijd. Als dag en maand verwisseld kunnen worden, komt de dag eerst. Een datum zonder tijd geldt voor de hele dag: hoogstens 26-09-2026 omvat de records van die dag, en groter dan 26-09-2026 begint de dag erna. Niet gelijk aan en geen van omvatten records met een leeg veld.

#Waarom niet…?

• Waarom verschijnt de sectie Validatie niet bij mijn widget? Alleen formuliervelden valideren — een Knop of een Label hebben geen waarde om te valideren.
• Waarom verschijnt de widget op het palet maar grijs in het canvas? Hij is uitgeschakeld (schakelaar Actief in de categorie Lay-out) of een regel/gebeurtenis heeft hem uitgeschakeld.
• Waarom zie ik geen gegevens in het canvas? Het canvas toont voorbeelden — de echte gegevens verschijnen in het voorbeeld en in de gepubliceerde app. Controleer de koppeling in het hoofdstuk Datastores en gegevens.
• Waarom zegt de Filterbalk "Geen doelwidget"? De Doelwidget onder Gegevens ontbreekt — alleen widgets met een lijst-datastore (Tabel, Lijst, Kaarten, Kanban, Grafiek) kunnen doel zijn.