OpenCRVS
v1.7
v1.7
  • 👋Welcome!
  • CRVS Systems
    • Understanding CRVS
    • Effective digital CRVS systems
    • OpenCRVS within a government systems architecture
    • OpenCRVS Value Proposition
  • Product Specifications
    • Functional Architecture
    • Workflow management
    • Status Flow Diagram
    • User roles & scopes
      • Examples
    • Core functions
      • 1. Notify event
      • 2. Declare event
      • 3. Validate event
      • 4. Register event
      • 5. Print certificate
      • 6. Issue certificate
      • 7. Search for a record
      • 8. View record
      • 9. Correct record
      • 10. Verify record
      • 11. Archive record
      • 12. Vital statistics export
    • Support functions
      • 13. Login
      • 14. Audit
      • 15. Deduplication
      • 16. Performance management
      • 17. Payment
      • 18. Learning
      • 19. User support
      • 20. User onboarding
    • Admin functions
      • 21. User management
      • 22. Comms management
      • 23. Content management
      • 24. Config management
    • Data functions
      • 25. Legacy data import
      • 26. Legacy paper import
  • Technology
    • Architecture
      • Performance tests
    • Standards
      • FHIR Documents
        • Event Composition
        • Person
        • Registration Task
        • Event Observations
        • Locations
    • Security
    • Interoperability
      • Create a client
      • Authenticate a client
      • Event Notification clients
      • Record Search clients
      • Webhook clients
      • National ID client
      • FHIR Location REST API
      • Other ways to interoperate
  • Default configuration
    • Intro to Farajaland
    • Civil registration in Farajaland
    • OpenCRVS configuration in Farajaland
      • Application settings
      • User roles
      • Declaration forms
      • Certified Copies templates
    • Business process flows in Farajaland
  • Setup
    • 1. Planning an OpenCRVS Implementation
    • 2. Establish project and team
    • 3. Gather requirements
      • 3.1 Mapping business processes
      • 3.2 Mapping offices and user types
      • 3.3 Define your application settings
      • 3.4 Designing event declaration forms
      • 3.5 Designing a certified copy
    • 4. Installation
      • 4.1 Quick start: Set-up a local development environment
        • 4.1.1 Install the required dependencies
        • 4.1.2 Install OpenCRVS locally
        • 4.1.3 Starting and stopping OpenCRVS
        • 4.1.4 Log in to OpenCRVS locally
        • 4.1.5 Tooling
          • 4.1.5.1 WSL Support
      • 4.2 Configure: Set-up your own, local, country configuration
        • 4.2.1 Fork your own country configuration repository
        • 4.2.2 Set up administrative address divisions
          • 4.2.2.1 Prepare source file for administrative structure
          • 4.2.2.2 Prepare source file for statistics
        • 4.2.3 Set up CR offices and Health facilities
          • 4.2.3.1 Prepare source file for CRVS Office facilities
          • 4.2.3.2 Prepare source file for health facilities
        • 4.2.4 Set up employee users, and scopes, for testing or production
          • 4.2.3.1 Prepare source file for employees
          • 4.2.3.2 Configure roles and scopes
        • 4.2.5 Set up application settings
          • 4.2.5.1 Managing language content
            • 4.2.5.1.1 Informant and staff notifications
          • 4.2.5.2 Configuring Metabase Dashboards
        • 4.2.6 Configure certificate templates
        • 4.2.7 Configure declaration forms
          • 4.2.7.1 Configuring an event form
        • 4.2.8 Seeding & clearing your local databases
        • 4.2.9 Countryconfig API endpoints explained
      • 4.3 Deploy: Set-up a server-hosted environment
        • 4.3.1 Verify servers & create a "provision" user
        • 4.3.2 TLS / SSL & DNS
          • 4.3.2.1 LetsEncrypt https challenge in development environments
          • 4.3.2.2 LetsEncrypt DNS challenge in production
          • 4.3.2.3 Static TLS certificates
        • 4.3.3 Configure inventory files
        • 4.3.4 Create a Github environment
          • 4.3.4.1 Environment secrets and variables explained
          • 4.3.4.2 VPN Recipes
        • 4.3.5 Provisioning servers
          • 4.3.5.1 SSH access
          • 4.3.5.2 Building, pushing & releasing your countryconfig code
          • 4.3.5.3 Ansible tasks when provisioning
        • 4.3.6 Deploy
          • 4.3.6.1 Running a deployment
          • 4.3.6.2 Seeding a server environment
          • 4.3.6.3 Login to an OpenCRVS server
          • 4.3.6.5 Resetting a server environment
        • 4.3.7 Backup & Restore
          • 4.3.7.1 Restoring a backup
          • 4.3.7.2 Off-boarding from OpenCRVS
    • 5. Quality assurance testing
    • 6. Go-live
      • 6.1 Pre-Deployment Checklist
    • 7. Operational Support
    • 8. Monitoring
      • 8.1 Application logs
      • 8.2 Infrastructure health
      • 8.3 Routine monitoring checklist
      • 8.4 Setting up alerts
      • 8.5 Managing a Docker Swarm
  • General
    • Community
    • Contributing
    • Migration notes
    • Releases and upgrades
    • Release notes
    • Product roadmap
Powered by GitBook
On this page
  • Step 1. Configuring certificate SVG files
  • Step 2: Add custom font files
  • Step 3: Serve certificates to the application
  1. Setup
  2. 4. Installation
  3. 4.2 Configure: Set-up your own, local, country configuration

4.2.6 Configure certificate templates

Previous4.2.5.2 Configuring Metabase DashboardsNext4.2.7 Configure declaration forms

Last updated 1 month ago

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 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:

Event
Certificate template SVG
Available handlebars

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.

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

Step 3: Serve certificates to the application

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

https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/fonts
here
react-intl formatjs
Managing Language Content
Birth Certificate
Birth Certified Copy
Default birth handlebars
Death Certificate
Death Certified Copy
Default death handlebars
SVG
SVG
handlebar
src/api/certificates/source
Github
team@opencrvs.org
health facility
health facility
"handlebar helper"
here
built in
custom form field handlebar