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. Click the “Document aanmaken” button

  3. 3
    Click the Document aanmaken button

  4. 4
    Click on Documenten

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

  5. 5
    Click the OK button

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

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

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

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

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

    9. En kies je document templates

  9. 9
    Click on Document-templates

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

  11. 11
    Click here

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

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

  13. 13
    Click on edit

  14. 14
    Click on Admin

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

    16. En kan je de huidige template downloaden.

  16. 16
    Click on download

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

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

  18. 18
    Click here

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

  19. 19
    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.

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

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

  22. 22
    Click the text field

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

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

  24. 24
    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

  25. 25
    Click the text field

  26. 26
    Click here

  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.