icon

How to Create an Invoice PDF by Using a Data-bound Normal Section to Repeat an Array

CraftMyPDF
CraftMyPDF

1. Introduction

CraftMyPDF is designed to work with array type data in JSON data and we make it easy for you to handle the collection of data. Once a normal section is configured to bind to an array, the data-bound section is repeated once per record.

In this tutorial, we are going to walk you through the detailed steps of how to bind an array to a normal section and configure the data-bound section to display the data in each row.

We will also create an expression to automatically calculate the grand total for the total amount field.

In the last section of the tutorial, we are going to explore briefly how to generate an invoice PDF with REST API and Integromat.

The following is the PDF report we are going to build for this tutorial.

2. Create CraftMyPDF PDF template and configure data-bound section

In this section, we are going to create a PDF template and also configure data-binding for a section.

Step 1. Create a new template

On the Manage Template page, click on New Template to create a new PDF template.

Give a descriptive name to your template. Then, select a blank template and click on the Create button to create a new PDF template

Step 2. Get your JSON data ready

After the template is created, on the Manage Template page click on the Edit button to launch the PDF template Editor.

The first thing to do in a new PDF template is to set up the JSON data. Click on the Data tab to get the JSON data ready.

The following is a sample JSON data, copy and paste it into the JSON editor.

{
    "invoice_number": "INV38379",
    "date": "2021-09-30",
    "due_date": "2021-09-30",
    "currency": "USD",
    "discount": 5,
    "tax": 7,
    "company_name": "LOGO Consulting Pte Ltd",
    "email": "inquery@logo.io",
    "client": "Orsis Pte Ltd",
    "client_address": "2769 Nutter Street,",
    "client_address2": "Kansas City, Missouri",
    "client_address3": "64105",
    "items": [
        {
            "description": "AWS Webservices",
            "quantity": 10,
            "unit_price": 50,
            "total": 500
        },
        {
            "description": "Web Design & Elementor Theme",
            "quantity": 5,
            "unit_price": 40,
            "total": 200
        },
        {
            "description": "Software Development",
            "quantity": 2,
            "unit_price": 60,
            "total": 120
        },
        {
            "description": "IT Consulting",
            "quantity": 20,
            "unit_price": 50,
            "total": 1000
        },
        {
            "description": "Social Media Page",
            "quantity": 8,
            "unit_price": 40,
            "total": 320
        }
    ],
    "gross_total": 25055
}

You may use the button Validate and Format JSON to validate and beautify your JSON data.

Step 3. Add a new section for the data header

Now head back to the Designer by clicking the Designer tab. Then, select the page header section first and click on the Insert(Below) button to create a new normal section.

Give the new section a name and drag-and-drop text components to create the labels. We are going to create 4 labels: Description, Quantity, Unit Price, and Total. You may adjust the alignment, font-weight, and font size for the text labels.

Step 4. Configure the data-bound section

We have done setting up the header in the previous step. Next, select the next normal section to configure data-binding, it’s an existing normal section that comes in the blank template.

First, name the section databound-section. Click on the Enabled checkbox to enable data-binding for the section. Then, click the button Insert Data Expression to insert an expression to bind an array to the section.

In the expression builder, select the array items that you want to bind to the section. Click on Use this to apply.

This is how it looks like after you have configured the data-binding for the section.

Step 5. Display row data in the data-bound section

Now the section is bound to the array items. The next step is to add the row fields by dragging and dropping text components to the data-bound section.

We will start by creating a text component for the description field first.

Drag and drop a text component from the toolbar on the left to create a text field. Then, click on the new text component to select. On the property panel, click on Insert Data Expression to bind the description to the text component.

When you click on the Insert Data Expression, an expression builder dialog will pop up. Follow the steps in the expression builder to build an expression.

(i) Select Element in a data-bound section

(ii) Select description field

(iii) Then, format it as Replace with N/A if Null …. . if the description field is null, empty or undefined then it will be replaced with N/A

(iv) Click on Use this for the Expression For Element to use the expression

This is how the expression looks like. The row variable is unique in a data-bound section, the data-bound section iterates the array items(in your JSON data) and assigns them to the variable row.

Repeat the steps for other data fields: quantity, unit_price, and total. Adjust the alignment, font size accordingly.

We have done the configuration for the data-bound section. The next step is to set up a new section for the grand total and use an expression to calculate the grand total.

Step 6. Insert a new section for the total

We will create a new section for the grand total, it’s below the data-bound section and above the footer section. Select the footer section and click on Insert(Above) to create a new section.

Name the new section item-total-section

Drag-and-drop a text component to the new section and click on Insert Data Expression

Follow the steps in the Expression Builder

(i) In the Data Fields select total field

(ii) In the Aggregate section, select Sum. Next, in the Format As you can keep it as original or format it as Currency.

(ii) Click on Use This to use the expression.

The following is the expression for the grand total text component.

Step 7. Additional info for the page header

You may add a logo or other information to the page header such as the date and the page number.

Step 8. Preview and generate the PDF

Click on the Preview tab to preview the PDF in HTML.

P/S: The Preview PDF(In HTML) button renders without page breaks and only with one header/footer, use this to debug expressions only.

Use the button Generate PDF to render actual PDF with proper headers, footers, and page breaks.

Step 9. (Optional) Running row index

You may use the following expression for the running row index

{{rowIndex + 1 }}

The preview of the running index

3. Automate the PDF creation

Once the invoice template is created and ready, the next step is to automate the PDF creation.

3.1 Generate PDF with PDF generation API

We support REST API for PDF generation. To find out more, visit our API reference for more details.

curl -X POST \
  --header "Content-Type: application/json"  \
  --header 'X-API-KEY: 7832MjA6MTE6UjlkM3h4emxpTExzeFR0aQ=' \
  --data '{ \"invoice_number\": \"INV38379\", \"date\": \"2021-09-30\", \"due_date\": \"2021-09-30\", \"currency\": \"USD\", \"discount\": 5, \"tax\": 7, \"company_name\": \"LOGO Consulting Pte Ltd\", \"email\": \"inquery@logo.io\", \"client\": \"Orsis Pte Ltd\", \"client_address\": \"2769 Nutter Street,\", \"client_address2\": \"Kansas City, Missouri\", \"client_address3\": \"64105\", \"items\": [ { \"description\": \"AWS Webservices\", \"quantity\": 10, \"unit_price\": 50, \"total\": 500 }, { \"description\": \"Web Design & Elementor Theme\", \"quantity\": 5, \"unit_price\": 40, \"total\": 200 }, { \"description\": \"Software Development\", \"quantity\": 2, \"unit_price\": 60, \"total\": 120 }, { \"description\": \"IT Consulting\", \"quantity\": 20, \"unit_price\": 50, \"total\": 1000 }, { \"description\": \"Social Media Page\", \"quantity\": 8, \"unit_price\": 40, \"total\": 320 } ], \"gross_total\": 25055 }' \
  "https://api.craftmypdf.com/v1/create"

3.1 Integromat: How to handle array

Use Create JSON module in JSON app to create a JSON. You may use the Generator to generate a JSON schema for you.

Then with CraftMyPDF app create a PDF module, select JSON payload type and assign the JSON string to the JSON field.

Table of Contents

Recent Posts
guide
CraftMyPDF

Teams

The teams feature is a shared workspace that allows you to collaborate and get things done in your organization, it’s much easier to share templates with your team.

Read More »
blog
CraftMyPDF

How to create mail merge PDF automatically

In the first part of this tutorial, we will briefly introduce what’s mail merge and the components of mail merge. In the second part, we are going to walk you through the steps to automate the process of mail merging into PDF.

Read More »
blog
CraftMyPDF

How to Make a Barcode in PDF

In this article we talk about what is a barcode, history of barcodes, use-cases, benefits and also how to create barcode in PDF with CraftMyPDF.

Read More »
blog
CraftMyPDF

How to Make a QR Code in PDF

Having QR codes in PDF is a handy thing in your business that can serve multiple purposes. You can share more information about your company or portfolio while sending a PDF proposal. If you wonder how to make a QR code in PDF, we’ve got you covered.

Read More »
guide
CraftMyPDF

CraftMyPDF’s Components for PDF Editor

The PDF template editor consists of a rich set of components for you to build beautiful PDFs with powerful expressions, page-breaks and data-bindings. In this article, we will cover all the components in the PDF designer.

Read More »
Copyright ©2022 CraftMyPDF.com

Email us at hello@craftmypdf.com for support