Tutorial on Generating PDF Documents from Reusable Templates for Coda.io with CraftMyPDF
Tutorial on Generating PDF Documents from Reusable Templates for Coda.io with CraftMyPDF
1. Introduction
Design and generate pixel-perfect PDF Documents and images in minutes with CraftMyPDF.
CraftMyPDF's advanced drag & drop editor lets you design PDF templates in any browser and generate pixel-perfect PDF documents from reusable templates and data with no-code platforms or REST API.
You can create various documents such as contracts, payslips, invoices, shipping labels, certificates, and more with just a click.
2. The steps to generate PDFs and upload them to Coda.
Step 1: Create the files: Country(Text), PDF File(Text)
Step 2: Create a Button. In the “Button Options”
(i) Choose the action: Action → Packs → CraftMyPDF → Create PDF
(ii) Copy and paste the Template ID from CraftMyPDF
(iii) JSON Payload: Use BuildData formula to build the JSON payload
(iv) Select PDF File for the Result Column
Step 3: Change the Column Type for PDF File column to File(Images and Files). The generated PDFs are short-lived(The URL will be expired 5 minutes), this lets Coda to upload the PDF as an attachment for the field.
Table
Name
Country
Button
PDF File
Notes
1
Jacky
US
Generate PDF
Open
2
Jenny
UK
Generate PDF
Open
3
John
SG
Generate PDF
Open
There are no rows in this table
3. Advanced: How to send items or an array to CraftMyPDF
The formula BuildData only accepts string type key-value pairs. The workaround is to use a delimiter and concatenate all the items for an array into a string in your data, then split the string data in CraftMyPDF.
The following section will guide you through the process of creating a JSON string(for items) then generate a PDF with the click of a button.
Step 1: Build JSON and Generate PDF on
Create a Button type column first and label it Generate and Download
The followings are the steps to build the action:
i. In the action field, use a Lookup formula to query data from another table.
ii. Next, concatenate all the items with a delimiter “|” using the Join formula.
iii. Then, use the BuildData formula to build a JSON, BuildData accepts key-value pairs, so named the fields accordingly and use Lookup in the values.
iv. Then assign the generated PDF URL to a field(”PDFURL”). Lastly, download the URL with OpenWindow action.
The following is the complete formula:
Step 2: Prepare the template on CraftMyPDF
i. Configure the sample data
First, prepare the JSON data and paste it into the "Data" tab.
The values in the array fields should be delimited with a "|" symbol.
For the next step, you can either use method 1 or 2. We recommend to use method 1
Method 1
Step 3. Convert the delimited strings into an array of objects
It's easier to work with an array of objects. There is a built-in function called 'fieldsToRows' that extracts values from the object for each field and splits them based on the delimiter. The function then returns an array of objects.
The following are the steps to use the built-in function 'fieldsToRows'.
i. Configure the repeating section
Then in the Designer tab, select a normal section and enable data-binding for the section.
In the Data Source field paste the following expression:
{{ fieldsToRows(data,["tracking_ids","descriptions","qtys"], "|") }} 
ii. Setup the labels
Create a label for the description field in the data-bound section and use the following expression:
{{ row.descriptions}}
Method 2
Step 3. Use rowIndex to access data
The following are the steps to access an individual item using the rowIndex.
i. Configure the repeating section
Then in the Designer tab, select a normal section and enable data-binding for the section.
In the Data Source field paste the following expression:
{{data.tracking_ids.split("|") }}What the expression does is to split the string with a delimitor “|”
ii. Setup the labels
Create a label for the description field in the data-bound section and use the following expression:
{{data.descriptions.split("|")[rowIndex] }}The above expression first split the string value with a delimiter then use a special variable rowIndex to locate the correct value in the array.
It should look something as follows:
Likewise for the qty, use the following expression:
{{data.qtys.split("|")[rowIndex] }} Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.