4.2.6 Configure certificate templates

Designed your certificate template? Once you have designed your certificate templates you are ready to configure the SVG. Please refer to our guidance on designing a certificate here: 3.5 Designing a certified copy

Step 1. Configuring certificate SVG files

The next step is for you to design and configure your certificate template SVG files. You can have as many different certificate as you like, represented as 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.

All your SVGs should be placed in the src/api/certificates/source folder.

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 Birth Certified Copy	Default birth handlebars
Death	Death Certificate Death Certified Copy	Default death handlebars

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 Github or email us at [e-mail] 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.

Sometimes you need to format the handlebars. For example to wrap text, or perform any number of manipulations. You can configure "handlebar helper" functions to do this.

We have some configurable helper functions to get you started here. We also have some built in to opencrvs-core. Such as this one, giving you access to every property that exists in a FHIR Location.

{{location districtPlaceofbirthId 'name'}}

It is possible to make custom form fields and when you do, custom handlebars are automatically created. Here is an example of a custom form field handlebar 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}}&#10;</tspan></text>\

Watching the videos below will really help you understand how to configure the certificate. The time spent watching the video will make your life much easier!

Step 2: Add custom font files

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.

Drop your custom font files (.ttf) in this directory: https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/fonts

Step 3: Serve certificates to the application

To set-up your SVG files, fonts and fees to be served to the client, you must configure the certificateConfigs TypeScript object here.

Our example looks like this:

onst certificateConfigs: ICertificateConfigData[] = [
    {
      id: 'birth-certificate',
      event: Event.Birth,
      label: {
        id: 'certificates.birth.certificate',
        defaultMessage: 'Birth Certificate',
        description: 'The label for a birth certificate'
      },
      isDefault: true,
      fee: {
        onTime: 5,
        late: 7,
        delayed: 15
      },
      svgUrl: '/api/countryconfig/certificates/birth-certificate.svg',
      fonts: {
        'Libre Baskerville': {
          normal: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf',
          bold: '/api/countryconfig/fonts/LibreBaskerville-Bold.ttf',
          italics: '/api/countryconfig/fonts/LibreBaskerville-Italic.ttf',
          bolditalics: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf'
        }
      }
    },
    {
      id: 'birth-certificate-certified-copy',
      event: Event.Birth,
      label: {
        id: 'certificates.birth.certificate.copy',
        defaultMessage: 'Birth Certificate certified copy',
        description: 'The label for a birth certificate'
      },
      isDefault: false,
      fee: {
        onTime: 8,
        late: 11.5,
        delayed: 17
      },
      svgUrl:
        '/api/countryconfig/certificates/birth-certificate-certified-copy.svg',
      fonts: {
        'Noto Sans': {
          normal: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
          bold: '/api/countryconfig/fonts/NotoSans-Bold.ttf',
          italics: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
          bolditalics: '/api/countryconfig/fonts/NotoSans-Regular.ttf'
        }
      }
    }, ...

• The id property must be unique.

• The event property must be set to the supported Event.<prop> provided to you by TypeScript.

• The label property must be a react-intl formatjs 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: Managing Language Content.
• 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.