sc-pdf

*This document is a user guide for the sc-pdf component release version 7.2.2

1. Purpose

The new sc-pdf component can be used to generate formatted pdf documents for printing, audit or other purposes. The component uses javascipt library PDFMAKE.

pdfs can be fully customised with: - styling - tables and columns - headers and footers - images - etc.

It allows data to be taken from template definitions and formatted in a suitable way that meets the needs of the customer. The resulting pdf can then be viewed live, downloaded or printed, and can now be uploaded and saved on the formbird server via a variety of means.

The component requires a valid PDFMAKE object which specifies the format for the output PDF. See PDFMAKE for documentation and correct practice.

2. Definition

sc-pdf is defined by a set of name/value pair fields consisting of:

• Required system fields
• Required customizable fields
• Optional customizable fields

Note:

1. Default values for fields described in the tables below are shown in bold text.

2.1. Required System Fields

2.2. Required Customisable Fields

2.3. Optional Customisable Fields

3. Typical Definition

Below is a typical sc-pdf definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{ 
    "componentName": "sc-pdf",
    "defaultDef": "{content:'Example test document.'}",
    "name": "report1Pdf",
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "fullWidth": true,
    "pdfFileName": "examplePdfFileName",
    "previewWidth": 500,
    "previewHeight": 300,
    "buttonType": "Print",
    "buttonLabel": "Print in new tab",
    "openInSameWindow": false,
    "docDefName": "pdfString",
    "uploadDefault": false,
    "uploadType": "OnGen",
    "scUploaderName": "testScUploaderName",
    "useGenerateButton": true

4. Examples

Example 1

sc-pdf defined with the typically needed fields. This will autogenerate a basic PDF with the text Example test document.

{ 
  "componentName": "sc-pdf",
    "defaultDef": "{content:'Example test document.'}",
    "name": "typicalDefnScPdf"
}

Example 2

This example will generate a larger preview window with the text 'Example document' and a Print action button with the label 'Print in a New Tab'. As we have defined docDefName, we can assign from the ruleset a generated PDF Object that will override the default pdf definition here. This workflow works best when working with images, or information from a template that requires a rulset to be used.

{
        "componentName": "sc-pdf",
        "fullWidth": true,
        "buttonType": "Print",
        "buttonLabel": "Print in New Tab",
        "defaultDef": "{ content: 'Example document text' }",
        "name": "typicalDefnScPdf",
        "docDefName": "pdfDef"
}

Example 3

This example will generate a basic PDF only when the Generate PDF button is clicked, and it will upload and save the PDF URL to the document.

{
        "componentName": "sc-pdf",
        "fullWidth": true,
        "defaultDef": "{ content: 'Example document' }",
        "name": "typicalDefnScPdf",
        "pdfFileName": "exampleTestPdfName",
        "uploadtype": "onGen",
        "uploadDefault": true,
        "useGenerateButton": true
}

An example output is...

"typicalDefnScPdf": [{
  "fileName": "exampleTestPdfName.pdf",
  "fileNo": "418a9760-6f97-11ed-b85e-fdf3cd548c0e",
  "createdDate": "2022-11-29T03:38:14.869Z",
  "basePath": "20240301",
  "fileType": "PDF"
 }]

Example 4

This example will generate a basic PDF only when the Generate PDF button is clicked, and it will save this PDF to the defined sc-uploader. Once we are happy with our generated pdf, to avoid saving more PDFs to the uploader, we should set the component to enabled:false.

{
        "componentName": "sc-pdf",
        "fullWidth": true,
        "defaultDef": "{ content: 'Example document' }",
        "name": "typicalDefnScPdf",
        "scUploaderName": "exampleScUploader",
        "uploadtype": "scUploader",
        "useGenerateButton": true,
        "enabled":true
},
{
                "componentName": "sc-uploader",
        "fullWidth": true,
        "name": "exampleScUploader"
}

Example 5

Here we will incorporate sc-pdf with sc-signature for sign on glass functionality using the rulesets. When the Generate PDF button is clicked, and it will grab the signature from the other component . Note docDefName defaults to pdfDef

Document:

{
        "componentName": "sc-signature",
        "name": "auditorSignature",
        "label": "Auditor's Signature",
        "saveAsImage": true
},
{
        "componentName": "sc-pdf",
        "fullWidth": true,
        "name": "report2Pdf",
        "pdfFileName": "ExampleTestPDF1"
}

Ruleset:

ruleOnfieldChangedPDFUpdate : { // handles PDF updates
        ruleCondition : function(ntf) {
            return ( (ntf.document.status === 'Completed') )
    },
    ruleAction : function(ntf, cb) {
            var ft3 = ntf.scope;
            const imgNames = {};

      console.log("Saving Signature to pdf"); // signature must be saved already
      const signatureURL = window.location.origin + "/" + ntf.document.auditorSignature[0];

            let dateStr = ft3.moment(ntf.document.signedDate).format('DD/MM/YYYY HH:mm a');

            // create data for pdfValue
            let val = createData();

            ntf.document.pdfDef = val; // assign pdf to default docDefName
            ft3.showField('report2Pdf', true);

            function createData() {
                    // creating PDF Definition
          let data = {
            info: {
              title: 'audit'+"1234",
              author: "some name",
            },
            content: [
              {
                text: 'Formbird PDF with Rulesets',
                style: 'header',
              }, 
              'This document has an id = ' + context.documentId,
                    'This document has a template id = ' + context.template.documentId,
              { text: "This is a test" },
              {image: "testSignature", fit: [100, 100] }
              ],
            styles: {
              header: {
                fontSize: 24,
                bold: true
                }
            },
          images: [
                    "testSignature": signatureURL;
          ]};
          // convert data to String 
            //  dataStr +=  JSON.stringify(data); // use this line for production
          let dataStr =  JSON.stringify(data, null, "\t"); // for debugging purposes (easy to read)
          return dataStr
        }
}}

Example 6

Below is one of our PDF Editor Templates that help with visualising the pdf as you create it.

5. Additional Information

More information: For more information on features, valid pdf defintion values, table formatting and more see PDFMAKE website.