Document toolboxDocument toolbox

Documentatie voor klanten en partners van Digitaal Vlaanderen - bouwstenen Mijn Burgerprofiel, Verenigingsloket en e-loketondernemers

Een samenvattingspagina maken

Owned by Bart Mets (Deactivated)
06 Dec, 2023
3 min read

Als u een formulier hebt met verschillende stappen kan het handig zijn in de laatste stap nog eens alle data te tonen die in de voorgaande stappen werd ingevuld.

Hiervoor kan u gebruik maken van een speciale component: de summary component.

Hieraan kan u via een script verschillende combinaties van ā€œLabel - waardeā€ toevoegen, bv ā€œNaam: Peterā€

Als de waarde leeg is zorgt de component er zelf voor dat deze Label/waarde niet wordt getoond. Dit bespaart u heel wat extra logica in de regels (ā€œals dit is ingevuld, toon dan dat, etcā€)

Ā 

Hoe begin ik er aan?

  • Maak een tab waarin je de samenvatting wil tonen

  • Voeg in deze tab de component ā€œSamenvattingā€ toe (mogen er ook meerdere zijn met tekst of titels tussen)

  • Geef deze een bepaalde naam, bv ā€œsummary aanvragerā€

  • Dan moet je een rule toevoegen op de Root panel van je formulier:

  • De rule moet getriggered worden bij Initialise;

Een voorbeeld van de functie zelf:

Ā 

guideBridge.on("elementNavigationChanged" , function(event, payload) { Ā Ā Ā Ā if (payload.newText === "guide[0].guide1[0].guideRootPanel[0].wizardpanel[0].panel_samenvatting[0]") Ā {Ā Ā  Ā Ā Ā Ā Ā Ā Ā  Ā Ā Ā Ā Ā Ā Ā  // Hier geef je aan welke componenten moeten geupdate worden Ā Ā Ā Ā Ā Ā  Ā  Ā Ā Ā Ā Ā Ā Ā Ā  updateSummary(summary_plaats, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  { Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  "Geboorteplaats": Gemeente_aangifte.displayValue }); Ā Ā  updateSummary(summary_tweede_ouder, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  {Ā Ā Rijksregisternummer": rijksregisternummer_tweedeouder.value, Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  "Voornaam": voornaam_tweede_ouder.value, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  "Familienaam": achternaam_tweede_ouder.value, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  "E-mailadres": Email_tweede_ouder.value Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  }); Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  } });

Ā 

Opmerkingen over de functie:

  • wizardpanel[0].panel_samenvatting[0]: geeft aan in welk paneel de summary staat, dat moet je dus aanpassen aan je formulier. Deze lijn zorgt ervoor dat als de gebruiker naar het panel met de samenvatting gaat, alle ā€œsamenvattingā€ componenten worden opgevuld

  • In deze rule gebruik je de functie ā€œupdateSummaryā€ om de Samenvattingscomponent op te vullen.(in dit voorbeeld: 2 componenten met de naam summary_plaats en summary_tweede_ouder)

    • Input parameters voor de functie:

      • Naam van de component

      • Een array met de dingen die je wil toevoegen aan de samenvatting

        • De array bevat een label dat je wil tonen, en dan de waarde van een component uit het formulier

    • De component zorgt er zelf voor dat als de waarde leeg is, dit veld niet wordt getoond in de summary

    • Je kan in het javascript ook extra logica steken om te bepalen wat er juist getoond wordt in de summary

Bv:

if (RelatieTotKind.value === "0") { Ā Ā Ā Ā Ā Ā Ā Ā Ā  Aangever= "Vader of meemoeder"; Ā Ā Ā Ā Ā Ā Ā  } updateSummary(summary_aanvrager, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  { Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "Aangifte door": Aangever, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā "Gezinssituatie": Gezin, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "Rijksregisternummer": Rijksregisternummer_aanvrager.value, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "Voornaam": Voornaam_aanvrager.value, Ā  Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā "Familienaam": Naam_aanvrager.value, Ā Ā  Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā "Geboortedatum": geboortedatumAanvragerString, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā "Geboorteland": Geboorteland_aanvrager.displayValue, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "Geboorteplaats": Geboorteplaats_aanvrager.displayValue, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā "Geboorteplaats Buitenland": Geboorteplaats_buitenland_aanvrager.value, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "Nationaliteit": Nationaliteit_aanvrager.displayValue, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "Burgerlijke staat": Burgerlijke_staat_aanvrager.displayValue, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  Ā  "E-mailadres": Email_aanvrager.value, Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  "Telefoonnummer": Telefoonnummer_aanvrager.value Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā  });

Ā Resultaat:

Iets als:

Ā 

De samenvatting gebruiken in de notificatie naar de aanvrager

Als u de aanvrager een bevestiging wil sturen, en daarin alle informatie uit het formulier wil herhalen, kan u handig voordeel halen uit het feit dat u de samenvatting component hebt gebruikt.

In de body van de notificatie kan je namelijk scripting gebruiken die de inhoud van de Samenvatting componenten mooi als een bulleted list in de email zet; bv

Overzicht van uw huwelijksaangifte : <#-- Aanvrager --> <#assign summAv=wizardpanel.panel_samenvatting.summary_aanvrager> <#assign lsummAv = summAv?eval_json> Gegevens van de aanvrager <#list lsummAv as k, v> <#if v?has_content> ā€¢ ${k}: ${v} </#if> </#list>

De configuratie van de notificatie ziet er dan zo uit:

Dit resulteert in iets als:

Ā 

U kan hier ook een voorbeeld van vinden in de folder Voorbeelden:

https://beheer.dv.formulieren-ti.vlaanderen.be/editor.html/content/forms/af/vlaamse-overheid/voorbeelden/geboorte/secured/gzg-aangifte-geboorte.html

Dit is een officiƫle website van de Vlaamse overheid - Uitgegeven door Digitaal Vlaanderen: https://www.vlaanderen.be/digitaal-vlaanderen

DISCLAIMER: http://www.vlaanderen.be/nl/disclaimer
TOEGANKELIJKHEID: http://www.vlaanderen.be/nl/toegankelijkheid