Customizing PDF Receipts & Certificates

Overview

The objective of PDF generation service is to bulk generate pdf as per requirement. This document contains details about how to create the config files which are required to generate new pdf.

Pre-requisites

Before you proceed with the configuration, make sure the following pre-requisites are met -

• Prior knowledge of JavaScript.

• Prior knowledge of Node.js platform.

• JSONPath for filtering required data from json objects.

Key Functionalities

• Provide flexibility to customise the PDF as per the requirement.

• Supports localisation.

• Provide functionality to add an image, Qr Code in PDF.

• Provide functionality to call external service for creating PDF with external service response

Deployment Details

1. Create data config and format config for a PDF according to product requirement.

2. Add data config and format config files in PDF configuration

3. Add the file path of data and format config in the environment yml file

4. Deploy the latest version of pdf-service in a particular environment.

Configuration Details

Config file: A json config file which contains the configuration for pdf requirement. For any pdf requirements, we have to add two configs file to the service.

• Format Config file: This config file define the format of PDF. In format config, we define the UI structure ex: css, layout etc. for pdf as per PDFMake syntax of pdf. In PDF UI, the places where values are to be picked from the request body are written as “{{variableName}}” as per ‘mustache.js’ standard and are replaced by this templating engine. ex: https://github.com/egovernments/configs/tree/master/pdf-service/format-config - Connect to preview
• Data Config file: This file contains a mapping to pick data from request body, external service call body if there is any and the variable which defines where this value is to be replaced in format by the templating engines (mustache.js). The variable which is declared in the format config file must be defined in the data config file. ex: https://github.com/egovernments/configs/tree/master/pdf-service/data-config - Connect to preview

PDF generation service read these such files at start-up to support PDF generation for all configured module.

The data config file contains the following aspects

Sample structure of variable definition in data config

{
  “Variable”: “variable_name”,
  “Value”:{
      “path”: “$.propertyId”             -----> jsonpath to obtain value.
  }

}

 {
  “Variable”: “variable_name”,
  “Value”:{
    “path”: “$.propertyId”             -----> jsonpath to obtain value or key to obtain value from localisation.
  },
  “type”:  “label”,                    -----> this field is used to mark this variable as label.       
  “localisation”:{
      “required”: “false”,             -----> if this field is true then  localisation is used for this variable and vice versa.
      “prefix”: “null”,                -----> prefix of the key which is declared in path field.
      “module”: “rainmaker-tl”         -----> the module from which localisation entry is fetched
  }
}

Example to show date in PDF

{
  “Variable”: “variable_name”,
  “Value”:{
    “path”: “$.date”             -----> jsonpath to obtain epoch value of date
  },
  “type”: "date"                  -----> this field is used to mark this variable as date.       
  "format": "YYYY/MM/DD "
}

If the format field is not specified in date variable declaration then in PDF date is shown with the default format of DD/MM/YYYY. For more details refer this page Unix-Timestamp

Example of external API calling to MDMS service

“externalAPI”: [
    “path”: “http://egov-mdms-service:8080/egov-mdms-service/v1/_get”,
    “queryParam”: “moduleName=tenant&masterName=tenants&tenantId=pb&filter=%5B?(@.code=='{$.tenantId}')%5D”,
    “apiRequest”: null,
    “responseMapping”:[
      {
          “variable”: “address”,
          “value”: “$.MdmsRes.tenant.tenants[0].address”
      },
      {
          “variable”: “phoneNumber”,
          “value”: “$.MdmsRes.tenant.tenants[0].contactNumber”
      }
    ]
  ]

Example of adding Qr Code

For adding Qr code there is separate mapping with the name “qrcodeConfig“ in data config. This mapping can use variables defined in “direct” and “external“ mappings along with the ****static text. The information on the QR Code scan will be defined as value. The variable defined in this mapping can directly be used in the ****format config as an image. ex:-

Data Config for Qr Code:

"mappings": [
          {
            "direct": [
              {
                "variable": "propertyID",
                "value": {
                  "path": "$.consumerCode"
                }
              },
              {
                "variable": "tenantId",
                "value": {
                  "path": "$.tenantId"
                }
              },
              {
                "variable": "businessServiceCode",
                "value": {
                  "path": "$.businessService"
                }
              }
            ]
          },
          {
            "qrcodeConfig": [
              {
                "variable": "qrcodeimage",
                "value": "citizen/egov-common/pay?consumerCode={{propertyID}}&tenantId={{tenantId}}&businessService={{businessServiceCode}}"
              }
            ]
          }
        ]

The format config file contains the following aspects

Example of adding footer in PDF (adding page number in the footer)

{
"key": "property-bill",
"config": {
"defaultStyle": {....},
"content": [....],
"style": {....},
"footer": "(function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; })"
}
}

The position of page number in the footer is configurable. For more detail refer this document Header and Footer

Example of adding Qr Code

Format Config for Qr Code

{
  "image": "{{qrcodeimage}}", ----> use declared variable in qrcodeConfig from dataconfig
  "width": 64,
  "height": 64
}

Integration

For Integration with UI, please refer to the links in Reference Docs

Reference Docs

Doc Links

API List

(Note: All the API’s are in the same postman collection, therefore, the same link is added in each row)

__

​All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.