Generation of Acknowledgement PDF

Objective

To Provide Citizen/Employee to download/print acknowledgement form based on the data available using pdfmake library in client side.

Technical Implementation Details,

Step 1:

If download acknowledgement needs to be configured , first in that screen config , loadUlbLogo(tenantId) needs to be called using tenant id in beforeInitScreen or componentDidMount method.

Step 2:

Create A new File and a method for creating a application data that needs to be printed in the form.

after creating the application data, it should call generatePDF method with logo and application data.

Generate PDF method is used for download and print ,

Refer :

https://github.com/egovernments/frontend/blob/154afa9e97ab50201602aaef05f672c5c6c6d3ca/web/rainmaker/dev-packages/egov-ui-kit-dev/src/utils/pdfUtils/generatePDF.js

Generate PDF method should be called using logo image , application data and filename.

Step 3:

Call the new method created for generation and integrate with the download and print forms.

for downloading file , then file name should be given as the third parameter to generatePDF method,

for printing file , then file name should be print to generatePDF method,

Generation Of Application Data,

Application Data should be in the format of

pdfData = {
        header: "PTM_ACKNOWLEDGEMENT", tenantId: "pb.amritsar",
        applicationNoHeader: 'PT_PROPERRTYID', applicationNoValue: property.propertyId,
        additionalHeader: "PT_APPLICATION_NO", additionalHeaderValue: property.acknowldgementNumber,
        cards: [
            { header: "PT_PROPERTY_ADDRESS_SUB_HEADER", items: addressCard },
            { header: 'PT_MUTATION_TRANSFEROR_DETAILS', items: transferorDetails, type: transferorDetailsInfo.length > 1 ? 'multiItem' : 'singleItem' },
            { header: 'PT_MUTATION_TRANSFEREE_DETAILS', items: transfereeDetails, type: transfereeDetailsInfo.length > 1 ? 'multiItem' : 'singleItem' },
            { header: "PT_MUTATION_DETAILS", items: mutationDetails, hide: !get(preparedFinalObject, 'PropertyConfiguration[0].Mutation.MutationDetails', false) },
            { header: "PT_MUTATION_REGISTRATION_DETAILS", items: registrationDetails },
            { header: 'PT_SUMMARY_DOCUMENTS_HEADER', items: documentCard }]
    }

Reference

https://github.com/egovernments/frontend/blob/154afa9e97ab50201602aaef05f672c5c6c6d3ca/web/rainmaker/dev-packages/egov-ui-kit-dev/src/utils/pdfUtils/generatePTMAcknowledgement.js

header corresponds to the PDF Header,

applicationNoHeader corresponds to the Application No container present in the left side of pdf.

similarly additionalHeader corresponds to the Application No container present in the right side of pdf.

applicationNoValue corresponds to the Application No value

cards is an Array contains all the cards that needs to be printed on the pdf.

each card Element will have

{
   header: 'PT_MUTATION_TRANSFEREE_DETAILS', 
   items: transfereeDetails, 
   type: transfereeDetailsInfo.length > 1 ? 'multiItem' : 'singleItem'
   hide: !get(preparedFinalObject, 'PropertyConfiguration[0].Mutation.MutationDetails', false)
 },

here header will be header value of the card,

items will be the list of key value pair

type corresponds to the single or multi element card

hide is used to show or hide cards based on some condition

Items

Items are the elements present in the card.

It is a Key value pair constructed using the generateKeyValue present in https://github.com/egovernments/frontend/blob/154afa9e97ab50201602aaef05f672c5c6c6d3ca/web/rainmaker/dev-packages/egov-ui-kit-dev/src/utils/pdfUtils/generatePDF.js

screen config should be exported from the respective module ,

example:

export const registrationSummaryDetails={
  transferReason: getLabelWithValue(
    {
      labelName: "Reason for Transfer",
      labelKey: "PT_MUTATION_TRANSFER_REASON"
    },
    {
      jsonPath:
        "Property.additionalDetails.reasonForTransfer",
        callBack: checkValueForNA
    }
  ),
  marketValue: getLabelWithValue(
    {
     
      labelName: "Market Value",
          labelKey: "PT_MUTATION_MARKET_VALUE"
    },
    {
      jsonPath:
        "Property.additionalDetails.marketValue",
        callBack: checkValueForNA
    }
  ),
   documentNo: getLabelWithValue(
    {
      labelName: "Document No.",
      labelKey: "PT_MUTATION_DOCUMENT_NO"
    },
    {
      jsonPath:
        "Property.additionalDetails.documentNumber",
        callBack: checkValueForNA
    }
  ), documentDate: getLabelWithValue(
    {
      labelName: "Document Issue Date",
      labelKey: "PT_MUTATION_DOCUMENT_DATE"
    },
    {
      jsonPath:
        "Property.additionalDetails.documentDate",
        callBack: value => {
          return convertEpochToDate(value);
        }
    }
  ), documentValue: getLabelWithValue(
    {
      labelName: "Document Value",
      labelKey: "PT_MUTATION_DOCUMENT_VALUE"
    },
    {
      jsonPath:
        "Property.additionalDetails.documentValue",
        callBack: checkValueForNA
    }
  ),
  remarks: getLabelWithValue(
    {
      labelName: "Remarks",
      labelKey: "PT_MUTATION_REMARKS"
    },
    {
      jsonPath:
        "Property.additionalDetails.remarks",
        callBack: checkValueForNA
    }
  )
}

to generateKeyValue method we have to pass screen config of that card

If it is Multielement card then use getMultiItems for generating multi items.

if any value needs to be localised then from the exported screen config select the attribute and specify the

localiseValue as true.

reference https://github.com/egovernments/frontend/blob/88f0495e4f40742081c1ee349a4dded2e5693fad/web/rainmaker/dev-packages/egov-ui-kit-dev/src/utils/pdfUtils/generatePTMAcknowledgement.js

if QR code is required in the header then it should be sent to pdf data and qr code needs to be constructed based on the qr text .

reference https://github.com/egovernments/frontend/blob/079f4a1ffffcdef3afd07d43cb1357c7a6d5143e/web/rainmaker/dev-packages/egov-ui-kit-dev/src/utils/pdfUtils/generateNOCAcknowledgement.js