4.2.6 Configure certificate templates
Last updated
Last updated
The next step is for you to design and configure your certificate template files. You can have as many different certificate as you like, represented as different files, for each vital event. You use {{ }} syntax to mark where in the SVG you wish the citizen data to be rendered.
All your SVGs should be placed in the folder.
To get an idea of what we mean, take a look at the Farajaland example certificates and available handlebars for each event:
Birth
Death
We have supplied helper handlebars for many use cases. Some need explanation, or if you feel that you do not have a handlebar for your specific needs, please discuss with us on or email us at 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 . This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the . 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.
Sometimes you need to format the handlebars. For example to wrap text, or perform any number of manipulations. You can configure functions to do this.
We have some configurable helper functions to get you started . We also have some to opencrvs-core. Such as this one, giving you access to every property that exists in a FHIR Location.
It is possible to make custom form fields and when you do, custom handlebars are automatically created. Here is an example of a
Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added as a placeholder for any item of citizen data that you need with the required 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}} </tspan></text>
\
Any fonts can be used in your certificate provided you have permission and are prepared to accept the client load time required to render the font file.
Our example looks like this:
The id property must be unique.
The event property must be set to the supported Event.<prop>
provided to you by TypeScript.
The isDefault property can only be applied to one item per event. Its the first item users will see in the select UI form field when choosing a certificate.
The fee property allows you to configure unique fees for the certificate type. Defaults are applied from applcation-config.ts
The svgUrl property is self explanatory. The SVG file must exist in this location.
The fonts property, as above, must point to ttf font files that exist in the referenced location.
Drop your custom font files (.ttf) in this directory:
To set-up your SVG files, fonts and fees to be served to the client, you must configure the certificateConfigs TypeScript object .
The label property must be a object with a translation for the visible label that you wish to apply to this certificate in the select field that is available to the user. Appropriate translations must exist in your client.csv file for the label.id where necessary. You can learn about how to configure OpenCRVS content translation in the section: .