Formulier expressies voorbeelden
Toelichting vooraf
Deze pagina werkt een aantal voorbeelden uit waarin een formulier flexibel en dynamisch gedrag vertoont op basis van formulier expressies.
Conditioneel tonen formulierveld op basis van een waarde
Concrete use case hier is een formulier waarin een backoffice medewerker een inschrijving moet goedkeuren dan wel afwijzen. Bij weigering is de medewerker verplicht om een korte motivatie te schrijven.
Het multiline tekstvak 'Motivatie weigering' is standaard verborgen en verschijnt enkel indien de gebruiker de inschrijving weigert en 'Inschrijving goedkeuren?' op 'No' zet.
Dit is een instelling binnen het formulierveld motivatieWeigering. Zoek in de Studio interface naar de Zichtbaar Als eigenschap.
In de JSON-definitie vertaalt zich dat in de "computedShow" eigenschap.
{
"name": "motivatieWeigering",
"label": "Motivatie weigering",
"type": "multiline",
"required": "inschrijvingGeweigerd",
"computedShow": [
"inschrijvingGeweigerd"
]
},De expressie "inschrijvingGeweigerd" checkt of het formulierveld "inschrijvingGoedkeuren" false retourneert. In Studio staat de expressie gedefinieerd onder het tabblad logica. Het screenshot hieronder toont de opbouw in de basis formulier expressiebouwer.
In de JSON-definitie staat de expressie gedefinieerd onder "computedExpressions".
"computedExpressions": {
"inschrijvingGeweigerd": "$.inschrijvingGoedkeuren === false"
},Conditioneel tonen formulierveld op basis van huidige taak
Concrete use case hier is dat een specifieke formulierveld enkel zichtbaar mag zijn binnen de context van een specifieke taak (beoordelingstaak) en dus niet binnen de context van andere taken (zoals de aanvraagtaak).
Om dit gedrag in te stellen, maken we gebruik van een computed expressie die de id van de huidige taak checkt tegen een vooraf ingestelde id.
"beoordelingstaak": "Boolean(currentTask) && currentTask.taskDefinitionKey === 'Activity_1dipi5y'"
Het veld “premiegoedkeuren” kan je nu zo instellen dat deze enkel getoond wordt indien de expressie true retourneert, d.w.z. indien het formulier geopend wordt binnen de context van de beoordelingstaak.
Formulierveld vooraf automatisch invullen
Concrete use case hier is een is dat het formulierveld 'Contactpersoon' al op voorhand is ingevuld (d.w.z. bij initialisatie formulier) op basis van gegevens die reeds gekend zijn binnen de context van het dossier. Hierdoor hoeft de gebruiker dit zelf niet in te vullen of krijgt hij al onmiddellijk waardevolle informatie mee.
Dit is een instelling binnen het formulierveld 'Contactpersoon'. Zoek in de Studio interface naar de Automatisch invullen veld eigenschap. In dit voorbeeld wordt de waarde van het veld wordt opgehaald uit de formuliervariabele 'defaultContactpersoon'. Merk op dat de gebruiker de vooraf ingevulde waarde mag overschrijven.
In de JSON-formulierdefinitie vertaalt zich dat in de "computedDefault" eigenschap.
{
"name": "contactpersoon",
"label": "Contactpersoon",
"type": "text",
"computedDefault": "defaultContactpersoon"
},De formuliervariabele 'defaultContactpersoon' bevat 'Jan Peeters' als binnen een eerder ingediend formulier 'firmaPeeters' is aangeduid als 'organisatie'. In alle andere gevallen retourneert de expressie Null. In Studio staat de expressie gedefinieerd onder het tabblad logica. Het screenshot hieronder toont de opbouw in de basic formulier expressiebouwer.
In de JSON-definitie staat de expressie gedefinieerd onder "computedExpressions".
"defaultContactpersoon": "context.testFormulier.organisatie.selectedOption === 'firmaPeeters' ? 'Jan Peeters' : null"
Formulierveld dynamisch invullen
Concrete use case hier is het dynamisch (d.w.z. live terwijl de gebruiker het formulier invult) berekenen en invullen van een premiebedrag. De berekeningsbasis is een vaste prijs per m² en het aantal m². De gebruiker geeft het aantal vierkante meter in, en automatisch verschijnt het premiebedrag.
Hiertoe definiëren we een formuliervariabele (computed expressie) “berekendePremie” onder het tabblad logica. We gebruiken hier de geavanceerde expressiebouwer.
De variabele “berekendePremie” wordt vervolgens gebruikt via de “computedWith” eigenschap in het “premie” veld. Dit zorgt voor een live berekening. Let wel, dit impliceert ook dat de gebruiker de waarde in het veld zelf niet kan aanpassen. Om dit ook visueel duidelijk te maken aan de gebruiker, is het aangeraden om het veld ook ‘read-only’ ('alleen lezen') te maken.
{
"name": "premie",
"label": "Premie",
"type": "number",
"read-only": true,
"computedWith": "berekendePremie"
}Optie keuzeveld conditioneel inschakelen
Concrete use case hier is een frontoffice gebruiker die zich wil inschrijven voor een infoavond. Op basis van zijn domicilie (postcode) worden zijn opties echter beperkt. In de keuzelijst 'Infoavond' hieronder zijn sommige keuzeopties ingeschakeld en andere niet. De gebruiker kan de niet-ingeschakelde keuzeopties niet aanvinken, en vice versa.
Dit is een instelling binnen de keuzeopties van het formulierveld ‘Infoavond'. Zoek in de Studio interface naar de Optie conditioneel inschakelen of weergeven eigenschap. In dit voorbeeld wordt de optie 'Gent 05-12-2024’ enkel ingeschakeld als de expressie "locatieGent" true retourneert.
In de JSON-formulierdefinitie vertaalt zich dat in de "onlyEnabledWhen" eigenschap.
{
"name": "infoavond",
"label": "Infoavond",
"type": "choice",
"read-only": "beoordelingstaak",
"choices": [
{
"name": "gent05122024",
"label": "Gent 05-12-2024",
"onlyEnabledWhen": "locatieGent"
},
{
"name": "gent15122024",
"label": "Gent 15-12-2024",
"onlyEnabledWhen": "locatieGent"
},
{
"name": "hasselt10122024",
"label": "Hasselt 10-12-2024",
"onlyEnabledWhen": "locatieHasselt"
},
{
"name": "hasselt20122024",
"label": "Hasselt 20-12-2024",
"onlyEnabledWhen": "locatieHasselt"
}
]
},De expressie 'locatieGent' checkt of het veld postcode binnen een eerder ingediend formulier hoger ligt dan 3000. Indien ja, dan routourneert de expressie true. Indien nee, dan retourneert de expressie false. In Studio staat de expressie gedefinieerd onder het tabblad logica. Het screenshot hieronder toont de opbouw in de basis formulier expressiebouwer.
In de JSON-definitie staat de expressie gedefinieerd onder "computedExpressions".
"computedExpressions": {
"locatieGent": "context.postcode.postcode > 3000",
"locatieHasselt": "context.postcode.postcode <= 3000"
},Formulierveld conditioneel op Alleen lezen instellen
Het veld 'Datum event' is reeds ingevuld via een eerder in het proces ingestelde gebruikerstaak. In de actueel geopende gebruikerstaak kan je de waarde wel raadplegen, maar niet wijzigen.
Dit is een instelling binnen het formulierveld ‘Datum event'. Zoek in de Studio interface naar de Alleen lezen als eigenschap. In dit voorbeeld wordt het veld enkel op Alleen lezen gezet indien de expressie beoordelingstaak true retourneert.
In de JSON-formulierdefinitie vertaalt zich dat in de "read-only" eigenschap.
{
"name": "datumEvent",
"label": "Datum event",
"type": "date",
"required": true,
"read-only": "beoordelingstaak"
},De expressie ‘beoordelingstaak' checkt de huidig geopende taak. Indien dit inderdaad de taak 'Beoordeel inschrijving' is, dan retourneert de expressie true. Indien nee, dan retourneert de expressie false. In Studio staat de expressie gedefinieerd onder het tabblad logica. Het screenshot hieronder toont de opbouw in de basis formulier expressiebouwer.
In de JSON-definitie staat de expressie gedefinieerd onder "computedExpressions".
"beoordelingstaak": "Boolean(currentTask) && currentTask.taskDefinitionKey === 'Activity_06ajgcy'"
"aanvraagtaak": "Boolean(currentTask) && currentTask.taskDefinitionKey === 'Activity_1f4c5sr'"
Dynamisch invullen helptekst in informatie (callout)
Use case hier is het visualiseren van een succesboodschap via een formulierveld type informatie of callout. Na selectie krijgt de gebruiker een successboodschap die zich aanpast naargelang de gemaakte keuze.
Dit is een samenspel van twee expressies. Enerzijds is er de expressie die detecteert of er een keuze is gemaakt. Deze triggert de visualisatie van de boodschap (zie “onlyWhen” eigenschap, meer info). Anderzijds is er de expressie die de tekst in de boodschap dynamisch invult in functie van de geselecteerde keuze (zie “computedWith” eigenschap, meer info).
{
"label": "Formulier 8",
"name": "formulier8",
"fields": [
{
"name": "maakUwKeuze",
"label": "Maak uw keuze",
"type": "choice",
"choices": [
{
"name": "fazant",
"label": "fazant"
},
{
"name": "biefstukFriet",
"label": "biefstuk friet"
},
{
"name": "zalm",
"label": "zalm"
}
]
},
{
"name": "bestellingGenoteerd",
"label": "Uitstekende keuze!",
"type": "information",
"helpInLine": true,
"visualisation": "callout-success",
"onlyWhen": "keuzegemaakt",
"computedWith": "succeskeuzetekst"
}
],
"computedExpressions": {
"succeskeuzetekst": "$.maakUwKeuze.selectedOption === 'fazant' ? 'Klik op Indienen om uw'.concat(' ').concat('fazant').concat(' ').concat('te bestellen!') : $.maakUwKeuze.selectedOption === 'biefstukFriet' ? 'Klik op Indienen om uw'.concat(' ').concat('biefstuk met friet').concat(' ').concat('te bestellen!') : $.maakUwKeuze.selectedOption === 'zalm' ? 'Klik op Indienen om uw'.concat(' ').concat('zalm').concat(' ').concat('te bestellen!') : ''",
"keuzegemaakt": "$.maakUwKeuze.selectedOption !== undefined"
}
}Formulierveld validatieregels
Onderstaande voorbeelden illustreren de validatie functionaliteit. Bij validatieregels op formuliervelden wordt de expressie rechtstreeks gedefinieerd in de eigenschappen van het veld, en niet in de logica tab van het formulier.
Formulierveld validatie maximaal aantal karakters
Bij het invullen van het tekstveld 'Extra opmerkingen' krijgt de gebruiker een foutmelding vanaf het ogenblik dat de tekst de limiet van 100 karakters overschrijdt.
Dit is een validatieregel in het formulierveld 'Extra opmerkingen'. Ga op zoek naar de instelling Condities. Klik op Nieuwe conditie. Onderstaand dialoogvenster laat toe om de validatieregel met bijhorende expressie op te stellen. $ !== undefined ? $.text.length <= 100 : true Deze expressie checkt eerst of het veld niet leeg is (d.w.z. het checkt of het een waarde bevat). Indien het veld geen waarde bevat, dan retourneert de expressie true en wordt de foutmelding niet getoond. Indien het veld wel een waarde bevat, dan checkt de expressie of het aantal karakters in de string kleiner of gelijk is aan 100. Indien dit zo is, dan retourneert de expressie true en wordt de foutmelding niet getoond. Indien dit niet zo is (d.w.z. de string bevat meer dan 100 karakters), dan retourneert de expressie false en wordt de foutmelding getoond.
Omdat het hier gaat om een tekstveld van het type ‘multiline’, moet je de eigenschap
textaanspreken om de lengte te bepalen:$.text.lengthBij een gewoon tekstveld, kan je rechtstreeks de lengte opvragen:
$.length
In de JSON-formulierdefinitie vertaalt zich dat in de "conditions" eigenschap. In dit voorbeeld bevat deze één validatieregel, maar het kunnen er evengoed ook meerdere zijn.
{
"name": "extraOpmerkingen",
"label": "Extra opmerkingen",
"type": "multiline",
"conditions": [
{
"name": "newConditionDx2Kdu",
"level": "error",
"expression": "$ !== undefined ? $.text.length <= 100 : true",
"errorMessage": "Maximaal 100 karakters."
}
]
},Formulierveld validatie datum checken
Bij het invullen van het veld 'Datum evenement' krijgt de gebruiker een foutmelding indien de opgegeven datum in het verleden ligt of verder dan 1 maand in de toekomst.
Dit is een validatieregel in het formulierveld ‘Datum evenement'. Ga op zoek naar de instelling Condities. Klik op Nieuwe conditie. Onderstaand dialoogvenster laat toe om de validatieregel met bijhorende expressie op te stellen. $ !== undefined ? moment($) >= moment() && moment($) < moment().add(1,'months') : true Deze expressie checkt eerst of het veld niet leeg is (d.w.z. het checkt of het een waarde bevat). Indien het veld geen waarde bevat, dan retourneert de expressie true en wordt de foutmelding niet getoond. Indien het veld wel een waarde bevat, dan checkt de expressie of de datum gelijktijdig aan twee condities voldoet, nl. het moet in de toekomst liggen EN het mag niet meer dan 1 maand in de toekomst liggen. Voldoet het veld aan deze dubbele conditie, dan retourneert de expressie true en wordt de foutmelding niet getoond.
In de JSON-formulierdefinitie vertaalt zich dat in de "conditions" eigenschap. In dit voorbeeld bevat deze één validatieregel, maar het kunnen er evengoed ook meerdere zijn.
{
"name": "datumEvenement",
"label": "Datum evenement",
"type": "date",
"conditions": [
{
"name": "newCondition35Olpm",
"level": "error",
"expression": "$ !== undefined ? moment($) < moment().add(1,'month') && moment($) >= moment():true",
"errorMessage": "De gekozen datum mag niet in het verleden liggen en mag maximaal 1 maand in de toekomst liggen."
}
]
}Lijst expressies
Opgelet: afhankelijk van de use case zal je de expressie moeten definiëren op formulier niveau dan wel op lijst niveau. Dit wordt voor elk van onderstaande voorbeelden aangegeven.
Aggregatie van subvelden via de reduce() method
Concrete use case hier is het indienen van een onkostennota. In dit formulier krijgt de gebruiker de mogelijkheid om een lijst op te bouwen. Elk item in de lijst representeert een gemaakte onkost. Voor elke onkost moet de gebruiker een omschrijving invullen alsook het uitgegeven bedrag. Er is echter een maximum van €500. Omwille van gebruiksgemak willen we het nog resterend saldo live berekenen en visualiseren.
Om het resterend saldo dynamisch te berekenen, bouwen we een formulierexpressie waarin we via de reduce method de bedragen voor alle onkosten aggregeren. De beginwaarde is 500 en telkens er een item bijkomt, wordt het betrokken bedrag in mindering gebracht. Deze expressie zit gedefinieerd op het niveau van het formulier.
$.onkost.reduce((acc, element) => acc - element.bedrag, 500)
Een meer gedetailleerde uitleg over de reduce method vind je op de pagina formulier expressies syntax.
Gemiddelde berekenen over alle lijst items heen
Eenmaal je de som van alle waardes hebt berekend (zie use case hierboven voor meer uitleg) kan je het gemiddelde berekenen door dit maximum te delen door de lengte van de lijst.
totaalBedrag/$.keyLijst.lengte
Dynamisch berekenen van waarde binnen elk lijst item
Concrete use case is hier is het indienen van een onkostennota. In dit formulier krijgt de gebruiker de mogelijkheid om een lijst op te bouwen. Elk item in de lijst representeert een gemaakte onkost. Voor elke onkost moet de gebruiker een omschrijving invullen alsook het uitgegeven bedrag inclusief btw. Binnen de onkost willen we echter ook berekenen wat het bedrag zonder btw is.
We doen dit via een computed expressie. Bijzonder hier is dat de expressie niet gedefinieerd zit op het niveau van het formulier, maar wel op het niveau van de lijst. Momenteel kan je dit nog niet instellen via Studio, dus dit moet rechtstreeks in de JSON gebeuren.
Voeg volgend blok toe als eigenschap van je lijst.
"element": {
"computedExpressions": {
"zonderBTW": "parseFloat(($.bedrag/1.21).toFixed(2))"
}
}Je kan de expressie “zonderBTW” nu via “computedWith” gebruiken in het subveld “bedragZonderBtw”.
{
"name": "onkost",
"label": "onkost",
"type": "list",
"initialLength": 1,
"minimumLength": 1,
"labelForAdd": "Toevoegen",
"labelForDelete": "Verwijderen",
"fields": [
{
"name": "omschrijving",
"label": "omschrijving",
"type": "text"
},
{
"name": "bedrag",
"label": "bedrag",
"type": "number",
"default": 0
},
{
"name": "bedragZonderBtw",
"label": "bedrag zonder btw",
"type": "number",
"computedWith": "zonderBTW"
}
],
"element": {
"computedExpressions": {
"zonderBTW": "parseFloat(($.bedrag/1.21).toFixed(2))"
}
}
}, Titel voor elk lijstitem dynamisch samenstellen
Concrete use case is hier is het indienen van een onkostennota. In dit formulier krijgt de gebruiker de mogelijkheid om een lijst op te bouwen. Elk item in de lijst representeert een gemaakte onkost. Voor elke onkost zijn er enkele velden die dynamisch dan wel manueel door de gebruiker ingevuld worden. Enkele van deze velden (bijvoorbeeld omschrijving en prijs zonder btw) willen we nu gebruiken om dynamisch een titel voor elk lijstitem samen te stellen met syntax ‘Onkost [omschrijving] [bedrag zonder btw]’, bijvoorbeeld ‘Onkost Paraplu 41,32’.
We doen dit via een computed expressie, specifiek met key “listItemTitle”. Bijzonder hier is dat de expressie niet gedefinieerd zit op het niveau van het formulier, maar wel op het niveau van de lijst. Momenteel kan je dit nog niet instellen via Studio, dus dit moet rechtstreeks in de JSON gebeuren.
JSON-beschrijving voor het lijstveld. De computed expressies op lijstniveau staan onderaan.
{
"name": "onkost",
"label": "Onkost",
"type": "list",
"initialLength": 1,
"minimumLength": 1,
"labelForAdd": "Toevoegen",
"labelForDelete": "Verwijderen",
"fields": [
{
"name": "omschrijving",
"label": "Omschrijving",
"type": "text"
},
{
"name": "btwStelsel",
"label": "Btw stelsel",
"type": "choice",
"choices": [
{
"name": "btw6Procent",
"label": "btw 6 procent"
},
{
"name": "btw21Procent",
"label": "btw 21 procent"
}
]
},
{
"name": "bedrag",
"label": "Bedrag met btw",
"type": "number",
"default": 0,
"conditions": [
{
"name": "newConditionIn2U6Q",
"level": "error",
"expression": "$ <= 250",
"errorMessage": "Maximaal 250 euro per onkost!"
}
]
},
{
"name": "bedragZonderBtw",
"label": "Bedrag zonder btw",
"type": "number",
"computedWith": "zonderBTW"
}
],
"element": {
"computedExpressions": {
"zonderBTW": "$.btwStelsel.selectedOption === 'btw21Procent'? parseFloat(($.bedrag/1.21).toFixed(2)) : parseFloat(($.bedrag/1.06).toFixed(2))",
"listItemTitle": "'Onkost '.concat($.omschrijving ? $.omschrijving : '' ).concat(' ').concat($.bedragZonderBtw)"
}
}
},Volgnummer voor elk lijstitem vaststellen en visualiseren
Concrete use case is hier is het indienen van een onkostennota. In dit formulier krijgt de gebruiker de mogelijkheid om een lijst op te bouwen. Elk item in de lijst representeert een gemaakte onkost. Voor elk item in de lijst willen we dynamisch een volgnummer berekenen. Deze willen we opslaan in een ‘alleen lezen’ subveld, alsook visualiseren in de titel van het lijstitem.
De berekening van het volgnummer verloopt via een computed expressie die gebruik maakt van de $$.path-functie. Voor meer info over deze functie, zie de pagina formulier expressies syntax. Bijzonder hier is dat de expressie niet gedefinieerd zit op het niveau van het formulier, maar wel op het niveau van de lijst. Momenteel kan je dit nog niet instellen via Studio, dus dit moet rechtstreeks in de JSON gebeuren. Onderstaand “element” blok is dan ook een eigenschap van de lijst.
"element": {
"computedExpressions": {
"index": "$$.path[1]+1"
}De “index” expressie kan je nu via “computedWith” gebruiken om het “volgnummer” subveld van de lijst dynamisch in te vullen.
Om het volgnummer ook in de titel van elk lijstitem te visualiseren, verwerk je $$.path[1]+1 in de bijzondere computed expression “listItemIndex”. Zie ook ander voorbeeld op deze pagina.
"listItemTitle": "'Onkost nummer '.concat($$.path[1]+1).concat(': ').concat($.omschrijving ? $.omschrijving : '').concat(', prijs: ' ).concat($.bedragZonderBtw)"
Waardes uit lijstitems dynamisch hergebruiken in een andere lijst
Concrete use case is hier is het goedkeuren van een ingediende onkostennota (zie use cases hierboven). Dit gebeurt door een beheerder in een aparte usertaak en een apart formulier. Daartoe nemen we de bronlijst (ingediende onkosten) over in een doellijst (goed te keuren onkosten).
Om dit te bereiken, volgen we onderstaande stappen:
Stap 1: We koppelen het aanvraagformulier (met lijst ingediende onkosten) als context aan het beoordelingsformulier.
Stap 2: We bouwen in het beoordelingsformulier een (nog lege) doellijst met identiek dezelfde lengte als de bronlijst.
Stap 3: Via expressies hergebruiken (kopiëren) we dynamisch subveld waardes vanuit de bronlijst in de doellijst.
Toelichting stap 2
Nadat het aanvraagformulier als context gekoppeld is, kan je via een expressie (logica tab) de lengte van de bronlijst eenvoudig ophalen.
Deze informatie gebruiken we nu in de eigenschappen van de doellijst. Gebruik de eigenschappen “computedInitialLength”, “computedMinimumLength”, “computedMaximumLength” en vul deze in met de formuliervariabele (computed expression) “lengteBronlijst”. De JSON ziet er nu als volgt uit.
{
"label": "Beoordeel onkosten",
"name": "beoordeelOnkosten",
"fields": [
{
"name": "beoordeelOnkosten",
"label": "Beoordeel onkosten",
"type": "list",
"computedInitialLength": "lengteBronlijst",
"computedMinimumLength": "lengteBronlijst",
"computedMaximumLength": "lengteBronlijst",
"fields": [
{
"name": "omschrijvingOnkost",
"label": "Omschrijving onkost",
"type": "text",
"read-only": "true"
},
{
"name": "prijsZonderBtw",
"label": "Prijs zonder btw",
"type": "number",
"read-only": "true",
"default": 0
},
{
"name": "goedkeurenJaOfNee",
"label": "Goedkeuren ja of nee?",
"type": "boolean",
"required": true
}
]
}
],
"computedExpressions": {
"lengteBronlijst": "context.testLijsten.onkost.length"
},
"contextDependencies": {
"testLijsten": {
"documentByDefinitionKey": "testLijsten"
}
}
}Toelichting stap 3
Nu kopiëren we de “omschrijving” vanuit de bronlijst naar het veld “omschrijvingOnkost” in de doellijst. Hiervoor maken we op lijstniveau een computed expressie “omschrijvingOnkostExpressie” aan.
$$.path[1]===0? context.testLijsten.onkost[0].omschrijving :
$$.path[1]===1? context.testLijsten.onkost[1].omschrijving :
$$.path[1]===2? context.testLijsten.onkost[2].omschrijving :
$$.path[1]===3? context.testLijsten.onkost[3].omschrijving :
$$.path[1]===4? context.testLijsten.onkost[4].omschrijving : ''Deze expressie checkt de huidige index van het item in de doellijst en haalt de overeenkomstige waarde uit de bronlijst op. Merk op dat we er hier van uitgaan dat de bronlijst maximum 5 items bevat. Dit kan je trouwens ook zo configureren. De “omschrijvingOnkostExpressie” gebruiken we nu via de “computedWith” eigenschap in het lijst subveld “omschrijvingOnkost” in de doellijst.
Eenzelfde werkwijze hanteren we ook oor het subveld “prijsZonderBtw”. De JSON ziet er nu als volgt uit:
{
"label": "Beoordeel onkosten",
"name": "beoordeelOnkosten",
"fields": [
{
"name": "beoordeelOnkosten",
"label": "Beoordeel onkosten",
"type": "list",
"fields": [
{
"name": "omschrijvingOnkost",
"label": "Omschrijving onkost",
"type": "text",
"computedWith": "omschrijvingonkost",
"read-only": true
},
{
"name": "prijsZonderBtw",
"label": "Prijs zonder btw",
"type": "number",
"computedWith": "prijszonderbtw",
"read-only": true,
"default": 0
},
{
"name": "goedkeurenJaOfNee",
"label": "Goedkeuren ja of nee?",
"type": "boolean",
"required": true
}
],
"computedInitialLength": "lengteBronlijst",
"computedMinimumLength": "lengteBronlijst",
"computedMaximumLength": "lengteBronlijst",
"element": {
"computedExpressions": {
"prijsZonderBtwExpressie": "$$.path[1]===0? context.testLijsten.onkost[0].bedragZonderBtw : $$.path[1]===1? context.testLijsten.onkost[1].bedragZonderBtw : $$.path[1]===2? context.testLijsten.onkost[2].bedragZonderBtw : $$.path[1]===3? context.testLijsten.onkost[3].bedragZonderBtw : $$.path[1]===4? context.testLijsten.onkost[4].bedragZonderBtw:0",
"omschrijvingOnkostExpressie": "$$.path[1]===0? context.testLijsten.onkost[0].omschrijving : $$.path[1]===1? context.testLijsten.onkost[1].omschrijving : $$.path[1]===2? context.testLijsten.onkost[2].omschrijving : $$.path[1]===3? context.testLijsten.onkost[3].omschrijving : $$.path[1]===4? context.testLijsten.onkost[4].omschrijving:''"
}
}
}
],
"computedExpressions": {
"lengteBronlijst": "context.testLijsten.onkost.length"
},
"contextDependencies": {
"testLijsten": {
"documentByDefinitionKey": "testLijsten"
}
}
}Checken of een waarde voorkomt in minstens één of in alle lijst items
Concrete use case is hier is het indienen van een onkostennota. In dit formulier krijgt de gebruiker de mogelijkheid om een lijst op te bouwen. Elk item in de lijst representeert een gemaakte onkost. Voor elk item in de lijst moet de gebruiker het juiste btw-stelsel aanduiden. Nu willen we op formulierniveau een ja/nee-veld dat aanduidt of er minstens één item is met btw-stelsel 6 procent, alsook een ja/nee-veld dat aanduidt of alle items met btw-stelsel 6 procent zijn.
Onderstaand screenshot toont een lijst met één item 21% btw (regenjas) en één item 6% btw (marsreep).
De ja/nee velden moet je via een computed expression (gedefinieerd op formulierniveau) dynamisch via “computedWith” laten invullen.
.some() functie: checkt of er minstens één item aan de conditie voldoet.
$.onkost.some(function(x){return x.btwStelsel.selectedOption === 'btw6Procent'})?true:false
.every() functie: checkt of alle items aan de conditie voldoen.
$.onkost.every(function(x){return x.btwStelsel.selectedOption === 'btw6Procent'})?true:false
Onkosten toevoegen