Skip to main content
Skip table of contents

Basisvelden

Bestand

Eigenschap

Beschrijving

Geen specifieke eigenschappen

Geen specifieke eigenschappen

Gebruiker kan een bestand uploaden. Standaard worden volgende bestandsformaten ondersteund: application/pdf,image/jpeg,image/jp2,image/jpx,image/jpm,image/png.

Indien je hiervan wil afwijken, kan je zelf een eigen whitelist definiëren in het application.properties bestand van de applicatie. Bijvoorbeeld: skryv.attachments.allowed-mime-types=application/pdf. Klik hier voor meer info over de applicatie-instellingen.

Bijlages worden na upload opgeslagen in de database van de applicatie. Klik hier voor meer info over bijlages en over hoe die in de applicatie beheerd worden.

Voorbeeld 1

Visualisatie in de backoffice:

image-20241216-161038.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "uploadFactuur",
      "label": "Upload factuur",
      "type": "attachment2"
    },

Voorbeeld 2

Zelfde als voorbeeld 1, maar gevisualiseerd in de frontoffice:

image-20241217-083728.png

Bestandenlijst

Eigenschap

Beschrijving

Zie lijsten.

Zie lijsten.

Een bestandenlijst is een specifiek type lijst. Voor meer info zie het topic ‘lijst’ op de pagina ‘layout’.

Datum

Eigenschap

Beschrijving

Geen specifieke eigenschappen

Geen specifieke eigenschappen

Merk op dat een datum een string is met als structuur “31-01-2025” (dus “DD-MM-YYYY”). Als je ermee wil gaan rekenen binnen een expressie of je wil er een timer event mee configureren, dan moet je de deze string omzetten naar een ISO datumtijd waarde.

Voorbeeld

Gebruiker selecteert datum uit een datum picker. Verplicht ingesteld op Altijd. De eigenschap Alleen lezen is conditioneel ingesteld: enkel lezen wanneer beoordelingstaak (logische expressie) true retourneert. Een conditie (validatieregel) stelt dat de gekozen datum niet in het verleden mag liggen.

Visualisatie in backoffice formulier vanuit de taak 'inschrijven':

image-20241216-080806.png

Foutmelding wanneer de aangeduide datum in het verleden ligt:

image-20241216-081915.png

Visualisatie in backoffice formulier vanuit de taak ‘beoordelen’ (alleen lezen):

image-20241216-082501.png

In de JSON-formulierdefinitie:

CODE
{
          "name": "datumEvent",
          "label": "Datum event",
          "type": "date",
          "required": true,
          "read-only": "beoordelingstaak",
          "conditions": [
            {
              "name": "newConditionSvhnqz",
              "level": "error",
              "expression": "$ !== undefined ? moment($).hour(23).minute(59).second(59) >= moment():true",
              "errorMessage": "De gekozen datum kan niet in het verleden liggen."
            }
          ]
        },

E-mail

Eigenschap

Beschrijving

Geen specifieke eigenschappen

Geen specifieke eigenschappen

Voorbeeld

Gebruiker voert een e-mailadres in. Het veld is Verplicht. Impliciet wordt er een conditie (validatieregel) ingesteld (niet configureerbaar in Studio).

Visualisatie in de frontoffice:

image-20241121-111121.png

Voorbeeld van een ongeldig e-mailadres (foutmelding).

image-20241121-111218.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "eMailadres",
      "label": "E-mailadres",
      "type": "email",
      "required": true,
    },

Getal

Eigenschap

Beschrijving

Geen specifieke eigenschappen

Geen specifieke eigenschappen

Voorbeeld 1

Gebruiker moet een getal invoeren. Standaard wordt de waarde 0 ingevoerd. Het veld is verplicht in te vullen door de gebruiker.

image-20241216-154240.png

In de JSON:

CODE
{
      "name": "gewensteHoeveelheid",
      "label": "Gewenste hoeveelheid",
      "type": "number",
      "required": true,
      "default": 0
    },

Voorbeeld 2

Gebruiker voert een getal die tussen de 100 en de 500 moet liggen. Standaard wordt de waarde 100 ingevoerd.

Visualisatie in de backoffice na initialisatie van het formulier:

image-20241216-153513.png

Visualisatie in de backoffice na invoeren ongeldig getal:

image-20241216-153333.png

In de JSON:

CODE
    {
      "name": "prijsAangekochtItem",
      "label": "Prijs aangekocht item",
      "type": "number",
      "default": 100,
      "conditions": [
        {
          "name": "newCondition7Kbtsa",
          "level": "error",
          "expression": "$ !== undefined ? $ < 500 && $ >= 100 : true",
          "errorMessage": "Het ingevoerde bedrag moet tussen de 100 en de 500 liggen."
        }
      ]
    },

Informatie

Eigenschap

Beschrijving

Visualisatie

Keuze tussen error callout (foutmelding, rood) , info callout (informatief, grijs), success callout (bevestiging, groen), warning callout (waarschuwing, oranje).

Help

“helpInLine”: true,

“help”: “Iets langere tekst die in de callout wordt weergegeven”

De tekst kan ook markup (vet, italic of onderlijnd) of een hyperlink bevatten.

“help”: “Dit is een <a href=”https://docs.skryv.be”>hyperlink</a>, dit staat <i>schuin</i>, dit staat <b>vet</b> en dit is <u>onderlijnd</u>.”

Help (dynamisch)

“helpInLine”: true,

“computedWith”: myExpression

Hiermee kan je de tekst in de callout dynamisch samenstellen via een expressie. Zie ook formulier expressie voorbeelden voor een uitgewerkte use case.

Voorbeeld 1

Visualisatie in de backoffice:

image-20250317-104439.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "info",
      "label": "Callout info",
      "type": "information",
      "help": "Hier komt een informatieve callout.",
      "helpInLine": true,
      "visualisation": "callout-info"
    },
    {
      "name": "warning",
      "label": "Callout waarschuwing",
      "type": "information",
      "help": "Hier komt een waarschuwingsboodschap.",
      "helpInLine": true,
      "visualisation": "callout-warning"
    },
    {
      "name": "fout",
      "label": "Callout foutmelding",
      "type": "information",
      "help": "Hier komt een foutmelding boodschap.",
      "helpInLine": true,
      "visualisation": "callout-error"
    },
    {
      "name": "succes",
      "label": "Callout succes",
      "type": "information",
      "help": "Hier komt een callout success message.",
      "visualisation": "callout-success"
    },

Voorbeeld 2

De gebruiker selecteert een bepaalde optie. Op dat ogenblik verschijnt er een waarschuwing callout. Dit wordt getriggerd door de eigenschap Zichtbaar Als.

Het verschil tussen callouts en condities (validatieregels) is dat een validatieregel van het type error de gebruiker verhindert om zijn formulier in te dienen, terwijl dit bij een callout nooit het geval kan zijn.

image-20241216-090140.png
image-20241216-090121.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "locatieBijnaVolzetCallout,
      "label": "Deze locatie is bijna volzet. Wacht niet te lang om je inschrijving aan te vragen.",
      "type": "information",
      "onlyWhen": [
        "locatieGent"
      ],
      "visualisation": "callout-warning"
    },

Voorbeeld 3

De gebruiker krijgt een dynamische succesboodschap. Zie ook formulier expressie voorbeelden voor de uitgewerkte use case.

2025.03.17_Bestelling.gif

Ja/nee

Eigenschap

Beschrijving

Visualisatie

Hier heb je keuze tussen

Voorbeeld 1

Automatisch invullen ingeschakeld, gebruiker kan het altijd wijzigen met Vul vaste waarde in geselecteerd en Nee geselecteerd in de Beginwaarde dropdown. Het veld is bovendien Verplicht in te vullen.

Visualisatie in de frontoffice:

image-20241121-113120.png

In de JSON-definitie:

CODE
    {
      "name": "benJeVegetarisch",
      "label": "Ben je vegetarisch?",
      "type": "boolean",
      "required": true,
      "default": false
    },

Voorbeeld 2

Visualisatie via checkbox. Het veld is Verplicht in te vullen. Er is een waarschuwing indien de gebruiker aangeeft geen vegetariër te zijn.

Visualisatie in de backoffice:

image-20241216-145621.png

In de JSON-definitie:

CODE
{
      "name": "benJeVegetarisch",
      "label": "Vegetarisch",
      "type": "boolean",
      "required": true,
      "visualisation": "checkbox",
      "conditions": [
        {
          "name": "newConditionI4Cs3H",
          "level": "warning",
          "expression": "$ !== undefined ? $ === true : true",
          "errorMessage": "De kaart voor niet-vegetariërs is beperkt."
        }
      ]
    },

Voorbeeld 3

Visualisatie via compact. Veld enkel en alleen verplicht in te vullen indien locatie Gent is. Er is een waarschuwing indien de gebruiker aangeeft geen vegetariër te zijn.

Visualisatie in backoffice (locatie is Gent):

image-20241216-150222.png

In de JSON-definitie:

CODE
{
      "name": "benJeVegetarisch",
      "label": "Vegetarisch",
      "type": "boolean",
      "required": "locatieGent",
      "visualisation": "compact",
      "conditions": [
        {
          "name": "newConditionI4Cs3H",
          "level": "error",
          "expression": "$ !== undefined ? $ === true : true",
          "errorMessage": "De kaart voor niet-vegetariërs is beperkt."
        }
      ]
    },

Kaart

Eigenschap

Beschrijving

Initiële locatie

Laat toe om een specifieke gemeente op te zoeken en te selecteren. Dit is de locatie (breedtegraad en lengtegraad) die bij initialisatie van het veld gecentreerd wordt op de kaart.

Breedtegraad

Breedtegraad van de initiële locatie (wordt automatisch ingevuld bij selectie initiële locatie). Je kan dit veld gebruiken om de initiële locatie te gaan fijnstellen.

"centerLat": 51.064784

Lengtegraad

Lengtegraad van de initiële locatie (wordt automatisch ingevuld bij selectie initiële locatie). Je kan dit veld gebruiken om de initiële locatie te gaan fijnstellen.

"centerLng": 3.101642

Initiële zoom

Bepaalt hoe sterk de kaart is ingezoomd op de initiële locatie bij initialisatie van het veld. Hoe hoger het getal, hoe meer ingezoomd de kaart. Toegelaten range is 0 tot 22. Waarbij 10 tot 15 de meest relevante resultaten opleveren.

"zoom": 14

Tekenmodus

  • Polygoon: de gebruiker kan door opeenvolgende coördinaten te selecteren een veelhoek (zone) opbouwen.

  • Punt: de gebruiker kan één en slechts één coördinaat aanduiden.

"drawMode": "POINT"

Voorbeeld 1

Initiële locatie Torhout, zoom 12. Backoffice visualisatie. Polygoon modus (zie zone links boven).

image-20250314-085406.png

Voorbeeld 2

Initiële locatie Torhout, zoom 14. Backoffice visualisatie. Punt modus (zie blauwe bol bovenaan).

image-20250314-085550.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "selecteerLocatie",
      "label": "Selecteer locatie",
      "type": "map",
      "zoom": 14,
      "centerLat": 51.064784,
      "centerLng": 3.101642,
      "drawMode": "POINT"
    }

Keuze

Eigenschap

Beschrijving

Optie naam

Klik op de knop Nieuwe optie. Voer de waarde van de optie in.

Optie key

De key van de optie wordt automatisch gegenereerd.

Hulp

Hulp voor de gebruiker van het formulier. Voer tekst in die de betekenis van de optie verduidelijkt.

Optie conditioneel inschakelen of weergeven

Vink het vakje aan als je inhoud dynamisch zichtbaar wil maken of inschakelen. Zie voorbeelden.

Alleen inschakelen als

Inschakelen als Berekende expressie waar is. Uitschakelen als Berekende expressie onwaar is. Zie voorbeelden.

In de JSON-formulierdefinitie: "onlyEnabledWhen" = "nietVegetarisch"

Alleen weergeven als

Zichtbaar als Berekende expressie waar is. Verbergen als Berekende expressie onwaar is. Zie voorbeelden.

In de JSON-formulierdefinitie: "onlyWhen" = "nietVegetarisch"

Berekende expressie

Alleen zichtbaar als Optie conditioneel inschakelen of weergeven aangevinkt is. Selecteer een variabele uit de dropdown. Expressies moeten worden aangemaakt binnen het tabblad logica in het element panel van het formulier.

Heeft een optie standaard geselecteerd

Vink het vakje aan als je een voorgeselecteerde standaardoptie wil aanduiden.

In de JSON-formulierdefinitie: "default" = "optie20H"

Selecteer standaardoptie

Alleen zichtbaar als Heeft een optie standaard geselecteerd aangevinkt is. Gebruik de keuzelijst om de standaardoptie aan te duiden.

Voorbeeld 1

Heeft een optie standaard geselecteerd is niet aangevinkt (+ Hulp tekst is Altijd zichtbaar)

Visualisatie in frontoffice formulier:

image-20241121-104942.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "selecteerMenu",
      "label": "Selecteer menu",
      "type": "choice",
      "help": "Eén tafel = één menu. Beslis nu of bij aankomst.",
      "helpInLine": true,
      "choices": [
        {
          "name": "kreeftMenu",
          "label": "Kreeft menu"
        },
        {
          "name": "steakMenu",
          "label": "Steak menu"
        },
        {
          "name": "falafelMenu",
          "label": "Falafel menu"
        },
        {
          "name": "linzenMenu",
          "label": "Linzen menu"
        }
      ]
    },

Voorbeeld 2

Heeft een optie standaard geselecteerd is aangevinkt (+ veld is Verplicht).

Visualisatie in frontoffice formulier:

image-20241121-105222.png

In de JSON-formulierdefinitie:

CODE
  {
      "name": "selecteerAankomsttijd",
      "label": "Selecteer aankomsttijd",
      "type": "choice",
      "required": true,
      "default": "optie20H",
      "choices": [
        {
          "name": "optie18H",
          "label": "18h"
        },
        {
          "name": "optie20H",
          "label": "20h"
        }
      ]
    },

Voorbeeld 3

Alleen inschakelen als opties enkel maar aanvinkbaar als aan een conditie (gebruiker mag geen vegetariër zijn) voldaan is (+ Hulp tekst is Altijd zichtbaar).

Visualisatie in frontoffice formulier (gebruiker is vegetariër):

keuzevraag.png

In de JSON-formulierdefinitie:

CODE
  {
      "name": "selecteerMenu",
      "label": "Selecteer menu",
      "type": "choice",
      "help": "Eén tafel = één menu. Beslis nu of bij aankomst.",
      "helpInLine": true,
      "choices": [
        {
          "name": "kreeftMenu",
          "label": "Kreeft menu",
          "onlyEnabledWhen": "nietVegetarisch"
        },
        {
          "name": "steakMenu",
          "label": "Steak menu",
          "onlyEnabledWhen": "nietVegetarisch"
        },
        {
          "name": "falafelMenu",
          "label": "Falafel menu"
        },
        {
          "name": "linzenMenu",
          "label": "Linzen menu"
        }
      ]
    },

Voorbeeld 4

Alleen zichtbaar als opties enkel maar zichtbaar als aan een conditie (gebruiker mag geen vegetariër zijn) voldaan is (+ Hulp tekst is Altijd zichtbaar).

Visualisatie in frontoffice formulier (gebruiker is vegetariër):

image-20241121-110959.png

In de JSON-formulierdefinitie:

CODE
{
      "name": "selecteerMenu",
      "label": "Selecteer menu",
      "type": "choice",
      "help": "Eén tafel = één menu. Beslis nu of bij aankomst.",
      "helpInLine": true,
      "choices": [
        {
          "name": "kreeftMenu",
          "label": "Kreeft menu",
          "onlyWhen": "nietVegetarisch"
        },
        {
          "name": "steakMenu",
          "label": "Steak menu",
          "onlyWhen": "nietVegetarisch"
        },
        {
          "name": "falafelMenu",
          "label": "Falafel menu"
        },
        {
          "name": "linzenMenu",
          "label": "Linzen menu"
        }
      ]
    },

Meerkeuze

Eigenschap

Beschrijving

Optie naam

Klik op de knop Nieuwe optie. Voer de waarde van de optie in.

Optie key

De key van de optie wordt automatisch gegenereerd. Je kan deze zelf nog aanpassen, indien je wenst.

Hulp

Hulp voor de gebruiker van het formulier. Voer tekst in die de betekenis van de optie verduidelijkt.

Beginwaarde

Bepaalt of deze optie standaard is aangevinkt of niet. Drie mogelijkheden: Altijd, Nooit of Als. Bij selectie van Als wordt de optie standaard enkel en alleen aangevinkt indien de in de bijhorende keuzelijst opgegeven variabele true retourneert. Deze variabele wordt opgehaald uit het tabblad logica in het element panel van het formulier.

In de JSON-formulierdefinitie: "default" = true (indien Altijd)

In de JSON-formulierdefinitie: "default" = "locatieHasselt" (indien Als)

Optie conditioneel inschakelen of weergeven

Vink het vakje aan als je inhoud dynamisch zichtbaar wil maken of inschakelen. Zie voorbeelden.

Alleen inschakelen als

Inschakelen als Berekende expressie waar is. Uitschakelen als Berekende expressie onwaar is. Zie voorbeelden.

In de JSON-formulierdefinitie: "onlyEnabledWhen" = "locatieGent"

Alleen weergeven als

Zichtbaar als Berekende expressie waar is. Verbergen als Berekende expressie onwaar is. Zie voorbeelden.

In de JSON-formulierdefinitie: "onlyWhen" = "locatieHasselt"

Berekende expressie

Alleen zichtbaar als Optie conditioneel inschakelen of weergeven aangevinkt is. Selecteer een variabele ("locatieHasselt" in voorbeeld hierboven) uit de dropdown. Expressies moeten worden aangemaakt binnen het tabblad logica in het element panel van het formulier.

Voorbeeld 1

Gebruiker kan één of meerdere items aanduiden op zijn of haar Sinterklaas wenslijst. Bij opstart van het formulier zijn alle opties standaard ingeschakeld.

Visualisatie in de frontoffice:

image-20241216-131847.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "wenslijstSinterklaas",
      "label": "Wenslijst Sinterklaas",
      "type": "multichoice",
      "choices": [
        {
          "name": "chocolade",
          "label": "Chocolade",
          "default": true
        },
        {
          "name": "picknicken",
          "label": "Picknicken",
          "default": true
        },
        {
          "name": "gezelschapsspel",
          "label": "Gezelschapsspel",
          "default": true
        }
      ]
    },

Voorbeeld 2

Geen enkele optie is standaard geselecteerd. Gebruiker kan de laatste optie enkel selecteren indien de variabele “locatieGent” true retourneert.

Visualisatie in de frontoffice (locatie is niet Gent):

image-20241216-132746.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "wenslijstSinterklaas",
      "label": "Wenslijst Sinterklaas",
      "type": "multichoice",
      "choices": [
        {
          "name": "chocolade",
          "label": "Chocolade"
        },
        {
          "name": "picknicken",
          "label": "Picknicken"
        },
        {
          "name": "gezelschapsspel",
          "label": "Gezelschapsspel",
          "onlyEnabledWhen": "locatieGent"
        }
      ]
    },

Voorbeeld 3

Gebruiker ziet enkel maar de wenslijst indien zijn of haar leeftijd lager is dan 12. Dit wordt berekend in de logische variabele “leeftijdMinderDan12” (zie logica tab van het formulier element panel). Geen enkele optie is standaard geselecteerd. Gebruiker kan de laatste optie enkel selecteren indien de variabele “locatieGent” true retourneert.

Visualisatie in de frontoffice (leeftijd < 12 en locatie is Gent):

image-20241216-133742.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "wenslijstSinterklaas",
      "label": "Wenslijst Sinterklaas",
      "type": "multichoice",
      "computedShow": [
        "leeftijdMinderDan12"
      ],
      "choices": [
        {
          "name": "chocolade",
          "label": "Chocolade"
        },
        {
          "name": "picknicken",
          "label": "Picknicken"
        },
        {
          "name": "gezelschapsspel",
          "label": "Gezelschapsspel",
          "onlyEnabledWhen": "locatieGent"
        }
      ]
    },

Voorbeeld 4

Gebruiker kan één of meerdere maaltijden aanduiden. Afhankelijk van de locatie zal een andere optie standaard aangevinkt zijn voor de gebruiker. Indien locatie Gent, zal ‘Menu (hoofdgerecht + drankje + koffie)' by default aangeduid zijn. Indien locatie Hasselt, zal ‘Belegd broodje’ standaard aanduid zijn. De opties ‘Pizza’ en ‘Vegetarische schotel’ zijn enkel beschikbaar in locatie Hasselt.

Visualisatie in de backoffice (geselecteerde locatie is Gent):

image-20241216-130040.png

Visualisatie in de backoffice (geselecteerde locatie is Hasselt):

image-20241216-131412.png

In de JSON-formulierdefinitie:

CODE
    {
      "name": "keuzeDagschotel",
      "label": "Keuze dagschotel",
      "type": "multichoice",
      "choices": [
        {
          "name": "menuHoofdgerechtDrankjeKoffie",
          "label": "Menu (hoofdgerecht + drankje + koffie)",
          "default": "locatieGent"
        },
        {
          "name": "soep",
          "label": "Soep"
        },
        {
          "name": "belegdBroodje",
          "label": "Belegd broodje",
          "default": "locatieHasselt"
        },
        {
          "name": "pizza",
          "label": "Pizza",
          "onlyWhen": "locatieHasselt"
        },
        {
          "name": "vegetarischeSchotel",
          "label": "Vegetarische schotel",
          "onlyWhen": "locatieHasselt"
        }
      ]
    },

Rekeningnummer

Vanaf Skryv platform versie 24.1 is rekeningnummer een specifiek datatype (geen tekstveld met een specifiek masker).

Eigenschap

Beschrijving

Countries

Selecteer hier de landen waaruit je rekeningnummers wil toelaten. Standaard is België al geselecteerd, maar je kan andere landen toevoegen.

“countries”: [“be”,”fr”]

Visualisatie in de backoffice. De spaties verhogen het gebruiksgemak bij het invullen, maar worden achterliggend niet opgeslagen.

Skryv platform versies ouder dan 24.1

Eigenschap

Beschrijving

Masker

Selecteer IBAN.

  • Merk op dat een rekeningnummer een string is met een specifiek masker.

  • Je kan steeds testen met volgende (dummy) waarde: BE 68 5390 0754 7034

  • Je kan ook een random dummy waarde genereren via deze website.

Type is Text. Masker is IBAN, hierdoor wordt automatisch een conditie (validatieregel) toegekend.

Visualisatie in frontoffice formulier:

image-20241121-111603.png

Voorbeeld in de JSON-formulierdefinitie:

CODE
  {
      "name": "newTextPmexdd",
      "label": "IBAN rekeningnummer",
      "type": "text",
      "maskConfig": {
        "predefinedMask": "iban"
      },
      "conditions": [
        {
          "name": "newConditionHxag8V",
          "level": "error",
          "expression": "typeof $ === 'string' && $.length > 0 ? ($.substring(0,2) === 'BE' ? ((($.substring(4,16) + '1114') % 97 + $.substring(2,4)) % 97 === 1) : ((($.substring(2,14) + '1114') % 97 + $.substring(0,2)) % 97 === 1)): true",
          "errorMessage": "Het opgegeven rekeningnummer is ongeldig"
        }
      ]
    }

Rijksregisternummer

Vanaf platform-versie 24.1 is rijksregisternummer een specifiek datatype (terwijl dit voorheen gedefinieerd werd binnen een tekstveld met specifiek masker).

Eigenschap

Beschrijving

Geen specifieke eigenschappen

Geen specifieke eigenschappen

Visualisatie in de backoffice. De punten en underscores verhogen het gebruiksgemak, maar worden achterliggend niet opgeslagen.

Screenshot volgt.

CODE
    {
      "name": "newSsin1W0O5E",
      "label": "Rijksregisternummer",
      "type": "ssin"
    },

Platform versies ouder dan 24.1

Eigenschap

Beschrijving

Masker

RRN (rijksregisternummer)

Rijksregisternummer is een veld van het type tekst (string).

Voorbeeld (dummy) geldig rijksregisternummer: 11.11.11-111.61 Hiermee kan je testen.

De invoer moet voldoen aan een specifieke validatieregel. Indien niet, dan krijgt de gebruiker een foutmelding.

Voorbeeld

Visualisatie in de backoffice:

image-20241216-155431.png

In de JSON:

CODE
    {
      "name": "newTextW1Is2L",
      "label": "Rijksregisternummer",
      "type": "text",
      "maskConfig": {
        "predefinedMask": "ssin"
      },
      "conditions": [
        {
          "name": "newConditionPkmz53",
          "level": "error",
          "expression": "typeof $=== 'string' && $.length > 0 ? (97 - ($.substring(0,9) % 97) - $.substring(9,11) === 0) || (97 - ((2 + $.substring(0,9)) % 97) - $.substring(9,11) === 0) : true",
          "errorMessage": "Het ingegeven rijksregisternummer is ongeldig"
        }
      ]
    },

Tekst

Eigenschap

Beschrijving

Masker

Een masker is een vooraf gedefinieerde validatieregel (hetzelfde als de Conditie eigenschap). Het voorkomt dat de gebruiker een waarde doorstuurt die niet voldoet aan specifieke criteria. Mogelijke maskers: Niet gespecificeerd (geen masker), RRN (rijksregisternummer), IBAN (rekeningnummer), Datum, BTW nummer, Ondernemingsnummer (KBO gerelateerd), EAN (nummer van elektriciteits- of gasmeter), Telefoonnummer of Andere (Custom masker).

Custom masker

Alleen beschikbaar als Masker is ingesteld op Andere. Voer de key van het aangepaste masker in.

Gebruik referentielijst

Een referentielijst is een vooraf gedefinieerde lijst van mogelijke waardes. Afhankelijk van configuratie is het mogelijk om de gebruiker te dwingen om een specifieke waarde uit de lijst te selecteren, dan wel toe te laten een zelfgekozen waarde in te vullen. Qua gedrag lijkt dit op een keuzeveld, met dit verschil dat een referentielijst meestal een groot aantal mogelijke waardes bevat (bijvoorbeeld een lijst van alle landen), en makkelijker te onderhouden is (via het .reflist artefact).

Ja of Nee, standaard staat Nee aangeduid. Indien Ja, dan zijn de drie volgende eigenschappen (Referentielijst, Veldnaam, Laat enkel waardes uit de referentielijst toe) ook in te vullen.

Referentielijst

Dit is de key van de referentielijst (het .reflist artefact) waarnaar je wil verwijzen.

Veldnaam

Een referentielijst is een lijst van entries waarbij elke entry een object is met één of meerdere eigenschappen. In dat laatste geval moet je hier specifiëren uit welke eigenschap je de selecteerbare waarden wil ophalen.

Laat enkel waardes uit de referentielijst toe

Ja (aangevinkt) of Nee. Indien Nee, dan laat je de gebruiker toe om een eigen waarde in te vullen.

Voorbeeld 1

Verplicht ingesteld op Altijd, met Alleen lezen ingesteld op Als (de variabele beoordelingstaak moet true evalueren) en Masker ingesteld op Niet gespecificeerd.

Visualisatie in frontoffice (geen beoordelingstaak, dus wel editeerbaar):

image-20241121-111258.png

In de JSON-definitie:

CODE
  {
      "name": "naam",
      "label": "Naam",
      "type": "text",
      "required": true,
      "read-only": "beoordelingstaak"
    },

Voorbeeld 2

Gebruiker kan een telefoonnummer invullen.

Visualisatie in de backoffice bij initialisatie:

image-20241216-151522.png

In de JSON-definitie:

CODE
  {
      "name": "telefoonnummer",
      "label": "Telefoonnummer",
      "type": "text",
      "maskConfig": {
        "predefinedMask": "telephone"
      }
    },

Voorbeeld 3

Gebruiker kan slechts een maximaal aantal karakters invoeren.

Visualisatie in de backoffice:

image-20241216-152153.png

In de JSON-definitie:

CODE
{
      "name": "redenAanvraag",
      "label": "Reden aanvraag",
      "type": "text",
      "conditions": [
        {
          "name": "newConditionMk123O",
          "level": "error",
          "expression": "$ !== undefined ? $.length < 20 : true",
          "errorMessage": "Maximum 20 karakters invoeren."
        }
      ]
    },

Voorbeeld 4

De gebruiker krijgt een keuzelijst te zien waarin hij of zij een land kan selecteren.

In de JSON-definitie:

CODE
{
   "name": "landAanvragerReflist",
   "label": "Land verblijf aanvrager",
   "type": "text",
   "referencelist": "landcodes",
   "referencelistKey": "land"
},

De referentielijst zelf ziet er conceptueel alsvolgt uit:

CODE
[
    {
        "land": "Afghanistan",
        "alpha2Code": "AF",
        "alpha3Code": "AFG",
        "numeriek": "4"
    },
    {
        "land": "Albanië",
        "alpha2Code": "AL",
        "alpha3Code": "ALB",
        "numeriek": "8"
    },
    {
        "land": "Algerije",
        "alpha2Code": "DZ",
        "alpha3Code": "DZA",
        "numeriek": "12"
    }
]

De eigenschap referencelistKey (Veldnaam in Studio) zorgt er dus voor dat de gebruiker een keuzelijst van voluit geschreven landen te zien krijgt.

Nadat de gebruiker een land geselecteerd heeft, wordt het geselecteerde object integraal opgeslaan in het formulierveld. Dit betekent dat ook de overige eigenschappen van het object bereikbaar zijn via een workflow expressie. Voorbeeld hieronder:

${skryv.dossierFromScope(execution).getOrCreateDocumentByDefinitionKey("testformulier").getField("landAanvragerReflist.alpha3Code")}

Tekstvak

Eigenschap

Beschrijving

Editor

Gebruik HTML-editor in de backoffice. Hierdoor kunnen backoffice gebruikers tekstopmaak (bijvoorbeeld vet of onderstrepen) toevoegen als ze dit veld invullen. Deze HTML-gebaseerde opmaak kan worden gekopieerd naar een communicatie (e-mail of document) als het veld tekstvlak de juiste referentie heeft.

Voorbeeld 1

Voorbeeld van tekstvak in een formulier. Het gebruik van de HTML-editor werd uitgeschakeld.

Visualisatie in de backoffice:

image-20241216-135650.png

In de JSON-definitie:

CODE
    {
      "name": "motivatieWeigering",
      "label": "Motivatie weigering",
      "type": "multiline"         
    },

Voorbeeld 2

Het tekstvak wordt enkel getoond indien de logische variabele inschrijvingGeweigerd retourneert met true. Op dat ogenblik is het veld ook verplicht in te vullen. Binnen de context van de backoffice wordt het veld getoond met HTML-markup.

Visualisatie in de backoffice:

image-20241216-135254.png

In de JSON-definitie:

CODE
    {
      "name": "motivatieWeigering",
      "label": "Motivatie weigering",
      "type": "multiline",
      "required": "inschrijvingGeweigerd",
      "computedShow": [
        "inschrijvingGeweigerd"
      ],
      "markup": "html"
    },

Telefoonnummer

Vanaf platform-versie 24.1 is telefoonnummer een specifiek datatype (terwijl dit voorheen gedefinieerd werd binnen een tekstveld met specifiek masker).

Eigenschap

Beschrijving

Countries

Selecteer hier de landen waaruit je rekeningnummers wil toelaten. Standaard is België al geselecteerd, maar je kan andere landen toevoegen.

“countries”: [“be”,”fr”]

Visualisatie in de backoffice. Prefix staat vooraf ingevuld. De spaties verhogen het gebruiksgemak bij het invullen, maar worden achterliggend niet opgeslagen.

JavaScript errors detected

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

If this problem persists, please contact our support.