Leestekens wijzigen in een document template

Created by Benjamin | 29 steps

Step-by-step guide

    Je kan vanuit een ingevulde checklist een document maken in Digitale Checklisten
    Bijvoorbeeld een ontvangstbevestiging voor een vergunningsaanvraag

  1. 1
    Click here

    2. Je kiest het document Ontvangstbevestiging en in de popup ziet u al een preview van het document.

  2. 2
    Click the 201 - Ontvangstbevestiging (Ow)* button

  3. 3
    Click on Documenten

    4. Click the “Document aanmaken” button

  4. 4
    Click the Document aanmaken button

  5. 5
    Click on 201-ontvangstbevestiging-brief-18-12-2023.pdf

  6. 6
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

  7. 7
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

    8. Na aanmaken komt het document bij de dossier documenten, in het menu links

  8. 8
    Click the OK button

  9. 9
    Click here

  10. 10
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

  11. 11
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

  12. 12
    Click on Admin

    13. Wanneer je bij het bekijken van de brief enkele zaken ziet die je graag wil aanpassen

  13. 13
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

  14. 14
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

    15. Kan je deze wijzigen in de document template. Hiervoor ga je naar de admin.

  15. 15
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - in - line button

  16. 16
    Enter “C:\fakepath\201-ontvangstbevestiging-brief-2.html”

    17. En kies je document templates

  17. 17
    Click on Document-templates

  18. 18
    Click the text field

  19. 19
    Click the text field

  20. 20
    Click the .cls-1{fill:#abb0c4;}icon - header - zoom - out - line button

    21. Bij de template klik je op het potloodje om deze te wijzigen.

  21. 21
    Click on edit

  22. 22
    Click here

  23. 23
    Enter “<!DOCTYPE html> <html> <head> <title>Ontvangstbevestiging</title> <style type="text/css"> @page { margin-left: 25mm; margin-right: 25mm; color: #3d3d3d; /* koptekst voor logo*/ @top-left { background: url("${group.logo.src}") no-repeat left center; height: auto; width: auto; } /* voettekst met kenmerk en paginanummer */ @bottom-left { font-family: arial; font-size: 10px; font-weight: normal; color: #7e7e7e; content: "${dossier.id}-${checklist.id}"; } @bottom-right { font-family: arial; font-size: 10px; font-weight: normal; color: #7e7e7e; content: 'Pagina 'counter(page) ' van 'counter(pages); } } html { /* Change default typefaces here */ font-family: calibri, arial, sans-serif; font-size: 11px; line-height: 1.5; color: #3d3d3d; } body { width: 600px; } .AdresContainer { Border: none, collapse, 0px; } .AdresOntvanger { Float: left; } .AdresAfzender { float: right; } .AdresVeldnaam { font-size: 10px; font-weight: bold; line-height: 1; color: #757575; } .AdresVariabele { font-size: 11px; padding-left: 10px; line-height: 0.7; color: #757575; } .Inhoud { float: left; width: 100%; color: #757575; } .Betreft { float: left; margin-top: -30px; font-size: 11px; width: 100%; color: #757575; } .Betreft-left { float: left; font-size: 11px; font-weight: bold; width: 100px; color: #757575; } .Titel { float: left; width: 100%; color: #3d3d3d; } .h2 { font-size: 18px; color: #3d3d3d; } .Brieftekst { float: left; font-size: 12px; text-align: justify; width: 100%; color: #3d3d3d; } .Ondertekening { font-size: 10px; font-style: italic; color: #757575; } </style> </head> <body> <div class="AdresContainer"> <div class="AdresOntvanger"> <p class="AdresVeldnaam">Aan</p> <p class="AdresVariabele">${parentDossier.name}</p> <p class="AdresVeldnaam">Adres</p> <p class="AdresVariabele">${parentDossier.location.address}</p> <p class="AdresVeldnaam">Plaats</p> <p class="AdresVariabele">${parentDossier.location.city}</p> </div> <div class="AdresAfzender"> <p class="AdresVeldnaam">Van</p> <p class="AdresVariabele">Digitale Checklisten</p> <p class="AdresVeldnaam">Adres<br /></p> <p class="AdresVariabele">Raadhuisstraat 52E</p> <p class="AdresVariabele">1016 DG Amsterdam</p> <p class="AdresVeldnaam">Contact<br /></p> <p class="AdresVariabele">t 020 303 20 52</p> <p class="AdresVariabele">m [email protected]</p> </div> </div> <div class="Inhoud"> <div class="Betreft"> <p><span class="Betreft-left">Zaaknummer</span> <span>${dossier.id}-${checklist.id}</span><br> <span class="Betreft-left">Betreft</span> <span>${checklist.basedOn}</span><br> <span class="Betreft-left">Datum</span> <span>${currentDate}</span> </p> </div> <div class="Titel"> <h3>Ontvangstbevestiging aanvraag</h3> </div> <div class="Brieftekst"> <div> <p>Geachte heer/mevrouw,<br /><br />Op ${dossier.Datum aanvraag} ontvingen wij uw aanvraag om een omgevingsvergunning. Wij laten u zo spoedig mogelijk weten of wij bevoegd zijn om de aanvraag te behandelen en welke procedure van toepassing is. Indien wij niet bevoegd zijn dan sturen wij uw aanvraag direct door naar het juiste bevoegd gezag.</p> </div> <div> <p><b>Nadere informatie</b></p> <p>Heeft u vragen over deze brief neem dan contact op met ${user.name} per e-mail ${user.email} of telefoon ${user.phone}.</p> </div> <div> <p>Hoogachtend,</p> <p>${user.name}</p> </div> </div> </div> </body> </html> ” in the text field

    24. En kan je de huidige template downloaden.

  24. 24
    Click on download

    25. Deze kan je in een HTML editor bewerken. Bijvoorbeeld in deze online editor.

  25. 25
    Click here

    26. Je leest het document in, en scroll helemaal naar beneden waar de tekst staat.

  26. 26
    Click on Geachte heer, mevrouw,Op ${dossier.Datum aanvraag} ontvingen wij uw aanvraag om een omgevingsvergunning. Wij laten u zo spoedig mogelijk weten of wij bevoegd zijn om de aanvraag te behandelen en welke procedure van toepassing is. Indien wij niet bevoegd zijn dan sturen wij uw aanvraag direct door naar het juiste bevoegd gezag.

    27. Hier voeg je bijvoorbeeld een schuine streep tussen heer en mevrouw toe.

  27. 27
    Enter “<!DOCTYPE html> <html> <head> <title>Ontvangstbevestiging</title> <style type="text/css"> @page { margin-left: 25mm; margin-right: 25mm; color: #3d3d3d; /* koptekst voor logo*/ @top-left { background: url("${group.logo.src}") no-repeat left center; height: auto; width: auto; } /* voettekst met kenmerk en paginanummer */ @bottom-left { font-family: arial; font-size: 10px; font-weight: normal; color: #7e7e7e; content: "${dossier.id}-${checklist.id}"; } @bottom-right { font-family: arial; font-size: 10px; font-weight: normal; color: #7e7e7e; content: 'Pagina 'counter(page) ' van 'counter(pages); } } html { /* Change default typefaces here */ font-family: calibri, arial, sans-serif; font-size: 11px; line-height: 1.5; color: #3d3d3d; } body { width: 600px; } .AdresContainer { Border: none, collapse, 0px; } .AdresOntvanger { Float: left; } .AdresAfzender { float: right; } .AdresVeldnaam { font-size: 10px; font-weight: bold; line-height: 1; color: #757575; } .AdresVariabele { font-size: 11px; padding-left: 10px; line-height: 0.7; color: #757575; } .Inhoud { float: left; width: 100%; color: #757575; } .Betreft { float: left; margin-top: -30px; font-size: 11px; width: 100%; color: #757575; } .Betreft-left { float: left; font-size: 11px; font-weight: bold; width: 100px; color: #757575; } .Titel { float: left; width: 100%; color: #3d3d3d; } .h2 { font-size: 18px; color: #3d3d3d; } .Brieftekst { float: left; font-size: 12px; text-align: justify; width: 100%; color: #3d3d3d; } .Ondertekening { font-size: 10px; font-style: italic; color: #757575; } </style> </head> <body> <div class="AdresContainer"> <div class="AdresOntvanger"> <p class="AdresVeldnaam">Aan</p> <p class="AdresVariabele">${parentDossier.name}</p> <p class="AdresVeldnaam">Adres</p> <p class="AdresVariabele">${parentDossier.location.address}</p> <p class="AdresVeldnaam">Plaats</p> <p class="AdresVariabele">${parentDossier.location.city}</p> </div> <div class="AdresAfzender"> <p class="AdresVeldnaam">Van</p> <p class="AdresVariabele">Digitale Checklisten</p> <p class="AdresVeldnaam">Adres<br /></p> <p class="AdresVariabele">Raadhuisstraat 52E</p> <p class="AdresVariabele">1016 DG Amsterdam</p> <p class="AdresVeldnaam">Contact<br /></p> <p class="AdresVariabele">t 020 303 20 52</p> <p class="AdresVariabele">m [email protected]</p> </div> </div> <div class="Inhoud"> <div class="Betreft"> <p><span class="Betreft-left">Zaaknummer</span> <span>${dossier.id}-${checklist.id}</span><br> <span class="Betreft-left">Betreft</span> <span>${checklist.basedOn}</span><br> <span class="Betreft-left">Datum</span> <span>${currentDate}</span> </p> </div> <div class="Titel"> <h3>Ontvangstbevestiging aanvraag</h3> </div> <div class="Brieftekst"> <div> <p>Geachte heer/mevrouw,<br /><br />Op ${dossier.Datum aanvraag} ontvingen wij uw aanvraag om een omgevingsvergunning. Wij laten u zo spoedig mogelijk weten of wij bevoegd zijn om de aanvraag te behandelen en welke procedure van toepassing is. Indien wij niet bevoegd zijn dan sturen wij uw aanvraag direct door naar het juiste bevoegd gezag.</p> </div> <div> <p><b>Nadere informatie</b></p> <p>Heeft u vragen over deze brief? Neem dan contact op met ${user.name} per e-mail ${user.email} of telefoon ${user.phone}.</p> </div> <div> <p>Hoogachtend,</p> <p>${user.name}</p> </div> </div> </div> </body> </html> ” in the text field

    28. En een vraagteken

  28. 28
    Click on Download

    29. Je kunt je nieuwe template uploaden bij 'ontvangstbevestiging' door op 'choose file' te klikken. Selecteer het zojuist opgeslagen HTML-bestand. Vanaf dat moment worden alle nieuwe brieven met de nieuwe template aangemaakt.

  29. 29
    Click on edit

    30. Benjamin recorded this video and guide in 3 minutes.