Skip to content

sc-pdfmake-wrapper

This document is a user guide for the sc-pdfmake-wrapper component version 7.1.5

go-to-typical-definition 

1. Purpose

The new sc-pdfmake-wrapper 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 and then downloaded or printed.

 

2. Definition

sc-pdfmake-wrapper 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

Field Valid Values Description
componentName sc-pdfmake-wrapper The component name.

Example:
"componentName": "sc-pdfmake-wrapper"'

2.2. Required Customisable Fields

Field Valid Values Description
name Any valye written in camel case Defines the name of the sc-pdfmake-wrapper field in the document and database.

Example: "name": "pdfReport1"
pdfDefinintion valid pdfmake object Default pdf definition used by the component. See PDFMAKE documentation for more information

Example:
"pdfDefinintion": "function main(context) { const pdfDef = { content: 'Example test document.}; return pdfDef; }"

2.3. Optional Customisable Fields

Field Valid Values Description
actionButtonLabel Any value Changes the button action button label to provide more information.

Example:
"actionButtonLabel": "Open in new tab"
actionButtonType value Default Value.
actionButtonType Download Sets the action button to Download. Clicking the button downloads the pdf.

Example:
"actionButtonType": "Download"
none Removes the action button from the component display.

Example:
"actionButtonType": "none"
Open Sets the action button to Open. Clicking the button opens the pdf in a new tab.

Example:
"actionButtonType": "Open"
Print Default Value.
Sets the action button to Print. Clicking the button opens the pdf in a new tab and opens browser print dialog menu.
disableSave true Clicking the action button or changing the pdf value (through the rulesets) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-pdfmake-wrapper field value does not trigger a warning message to display.
In the Angular version of the sc-pdfmake-wrapper component, clicking the Save icon will not save the sc-pdfmake-wrapper field value to the document.
In the AngularJS version of the sc-pdfmake-wrapper component, clicking the Save icon will save the sc-pdfmake-wrapper field value to the document.

Example:
"disableSave": true
false Default Value.
Changing the sc-pdfmake-wrapper field value (i.e. entering or editing a value) or clicking action button does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-pdfmake-wrapper field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-pdfmake-wrapper component, clicking the Save icon will save the sc-pdfmake-wrapper field value to the document.
docFieldNameAsDef component name When using rulesets to dynamically assign the pdf value, this field is used to provide an assignable value from the document. This value should reflect the component name.

Example:
"docFieldNameAsDef": "pdfReport1"
fullWidth true The sc-pdfmake-wrapper preview displays the full width of the form. Reccommended displaying the sc-pdfmake-wrapper in full width.
Example:
"fillWidth": true
false Default value.
The sc-pdfmake-wrapper does not display the full width of the form.
openInSameWindow true When using actionButtonType: "Open" or "Print", it will open/Print the pdf from the intial same tab.

Example:
"openInSameWindow": true


false Default value.
The pdf will open/print in a new tab/window.
pdfFileName Any Value Defines the name of the name of the downloaded/printed pdf
Example:
"pdfFileName": "examplePdfName"
Defaults to document ID.
preview false Hides the preview window, leaving just print button.
Example:
"preview": false
true Displays the pdf preview window
previewHeight Any integer Defines the height of the preview in pixels.

Example:
"previewHeight": 300


500 Default value.
previewWidth Any integer Defines the width of the preview in pixels.

Example:
"previewWidth": 500
300 Default value.
refreshDebounceMs any integer Determines the pdf preview refresh rate in milliseconds (ms) after component has registered a change to pdf value.

Example:
"refreshDebounceMs": 500
1000 Default value.
visible false the sc-pdfmake-wrapper component is not visible on the form.
Example:
"visible": false
true Default Value.
The sc-pdfmake-wrapper component is visible on the form.

 

3. Typical Definition

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

{ 
    "componentName": "sc-pdfmake-wrapper",
    "pdfDefinition": "function main(context) {const pdfDef = {content:'Example test document.'};return pdfDef;}",
    "name": "pdfReport1",
    "disableSave": true
 }

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": "examplePdfName",
    "previewWidth": 500,
    "previewHeight": 300,
    "actionButtonType": "Print",
    "actionButtonLabel": "Print in new tab",
    "refreshDebounceMs": 1000,
    "openInSameWindow": false,
    "docFieldNameAsDef": "pdfReport1"

 

4. Examples

Example 1

sc-pdfmake-wrapper defined with the typically needed fields.

        { 
            "componentName": "sc-pdfmake-wrapper",
            "pdfDefinition": "function main(context) {const pdfDef = {content:'Example test document.'};return pdfDef;}",
            "name": "typicalDefnScPdfmakeWrapper",
            "disableSave": true
         }

 

Example 2

sc-pdfmake-wrapper defined as:

{
        "componentName": "sc-pdfmake-wrapper",
        "fullWidth": true,
        "preview": true,
        "previewHeight": "500px",
        "actionButtonType": "Print",
        "openInSameWindow": false,
        "actionButtonLabel": "Print in New Tab",
        "pdfDefinition": "function main(context) {const pdfDef = { content: 'Example document'}; return pdfDef;}",
        "name": "typicalDefnScPdfmakeWrapper",
        "docFieldNameAsDef": "typicalDefnScPdfmakeWrapper",
        "disableSave": true,
    },

 

5. Further Reading

Using template editor to edit sc-pdfmake-wrapper pdfDefinition fields:
PDF Editor Template

Using rulesets to with the sc-pdfmake-wrapper pdfDefinition:
Create a PDF with Rulesets This example includes dynamic text, radio, uploaded images, and dates.

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