What you can learn

In this hands-on tutorial, learn how to use Adobe Document Generation API to automatically generate invoices, password-protect the PDFs, and deliver an invoice to each customer. All it takes is a little knowledge of Node.js, JavaScript, Express.js, HTML, and CSS.

The complete code for this project is available on GitHub. You must set up the public directory with your template and the raw data folders. In production, you must fetch the data from an external API. You can also explore this archived version of the application that contains the template resources.

Relevant APIs and resources

Preparing the data

This tutorial doesn’t look at how the data imports from your data warehouses. Your customer orders might exist in a database, external API, or custom software. Adobe Document Generation API expects a JSON document containing the invoicing data — such as information from your customer relationship management (CRM) or eCommerce platform. This tutorial assumes that the data is already in JSON format.

For simplicity, use the following JSON structure for invoicing:

{
    "customerName": "John Doe",
    "customerEmail": "john-doe@example.com",
    "order": [
        {
            "productId": 26,
            "productTitle": "Bandages",
            "price": 15.82
        },
        {
            "productId": 54,
            "productTitle": "Masks",
            "price": 25
        },
        {
            "productId": 76,
            "productTitle": "Gloves",
            "price": 7.59
        }
    ]
}

The JSON document contains the customer details as well as order information. Use this structured document to build up your invoice and display the elements in PDF format.

Building an invoice template

Adobe Document Generation API expects a Microsoft Word-based template and a JSON document to create a dynamic PDF or Word document. Create a Microsoft Word template for your invoicing application and use the free Document Generation Tagger add-in to generate the template tags. Install the add-in and open the tab in Microsoft Word.

Screenshot of the Document Generation Tagger add-in

Once you have pasted the JSON content into the add-in, as shown above, click Generate Tags. Now, this plugin shows your object’s format. Your basic template can use the customer’s name and email but doesn’t show the order information. The order information is discussed later in this tutorial.

Screenshot of the Document Generation Tagger Author template

Inside your Microsoft Word document, start writing the invoice template. Leave the cursor where you must insert dynamic data, then select the tag from the Adobe add-in window. Click Insert Text so Adobe Document Generation Tagger add-in can generate and insert the tags. For personalization, let’s insert the customer’s name and email.

Now, move on to the data that changes with each new invoice. Select the Advanced tab of the add-in. To see the available options to generate a dynamic table based on the products a customer ordered, click Tables and Lists .

Select Order from the first dropdown. In the second dropdown, select the columns for this table. In this tutorial, select all three columns for the object to render the table.

Screenshot of the Document Generation Tagger Advanced tab

Document Generation API can also perform complex operations such as aggregating elements inside an array. In the Advanced tab, select Numerical Calculations, and in the Aggregation tab, select the field where you want to apply the calculation.

Screenshot of the Document Generation Tagger Numerical calculations

Click the Insert Calculation button to insert this tag where needed inside the document. The following text now appears in your Microsoft Word file:

Screenshot of tags in Microsoft Word document

This invoice sample contains customer information, the ordered products, and the total amount due.