3.2.6 Configure certificate templates

1. About certificate files

The next step is for you to design and configure your certificate template SVG files. Your certificates will be different SVG files for each vital event. You use {{ handlebar }} syntax to mark where in the SVG you wish the citizen data to be rendered. To get an idea of what we mean, take a look at the Farajaland example certificates and available handlebars for each event:

Event	Certificate template SVG	Available handlebars
Birth	Birth Certificate	Default birth handlebars
Death	Death Certificate	Default death handlebars
Marriage	Marriage Certificate	Default marriage handlebars

It is possible to make custom form fields and when you do, custom handlebars are automatically created. Like this.

2. Before your start

• You can you use any paper size you like as a basis for your SVG.

• We recommend that you use the multi-lingual Noto Sans font as we do in our certificate for the dynamically generated data that appears from handlebars. All other fonts should be outlined. If you really wish to use another font than Noto Sans, you can edit the font here.

• To render a digital signature for a registrar that is uploaded when managing users, you need to use an image tag syntax like this, and then this.

3. Build your certificate

1. Gather requirements Define what data needs to be on your certificate and collect the certificate handlebars you need. We have supplied helper handlebars for all use cases. Some need explanation, or if you feel that you do not have a handlbar for your specific needs, please discuss with us on Github or email us at [email protected] and we can work on a new handlebar for you. As an example of a handlebar that needs explanation: {{placeOfBirth}} is used if a user selects a pre-loaded health facility. This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the health facility. You can see that in our place of birth location in the SVG, we have if/else logic to handle whatever the user chooses to enter into the form.

2. Design your certificate! Place dummy text for for where you would like handlebar data to appear and use a dummy signature image where you would like the digital signature to appear.

3. Export to SVG When you have finalised your design you need to export to SVG. Important! If your using Figma make sure to uncheck 'Outline text' for the handlebar dummy text. All other fonts can be outlined.

4. Add handlebars Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added with the handlebar. Example: <text fill="#222222" xml:space="preserve" style="white-space: pre" font-family="Noto Sans-Bold" font-size="16" font-weight="bold" letter-spacing="0px"><tspan x="86.6699" y="444.268">{{eventDate}}&#10;</tspan></text>\

5. Seed, or upload and preview When you are ready to seed your database in step 3.2.8, these certificates will be uploaded. Alternatively, a National System Admin can upload the certificate template at any time in the functional configuration UI. You can preview the certificate to check that the some handlebar data is loading as intended. Please note that in our preview functionality, only a few handlebars work with a dummy registration that contains the most basic data. It is for illustration purposes only as you may configure your form in an entirely custom way.