A common workflow for our customers is to take an existing PDF and transform it into an Airkit App, allowing their users to complete the PDF digitally. The following video walks through the basics of taking a PDF form, uploading it, creating a Data Flow to populate the values of the form, and return a completed version of the PDF.
[block:embed] { "html": "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F2gCopCxe6KQ%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D2gCopCxe6KQ&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F2gCopCxe6KQ%2Fhqdefault.jpg&key=f2aa6fc3595946d0afc3d76cbbd25dc3&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=2gCopCxe6KQ", "title": "Filling a PDF", "favicon": "https://www.youtube.com/s/desktop/15c06292/img/favicon.ico", "image": "https://i.ytimg.com/vi/2gCopCxe6KQ/hqdefault.jpg", "provider": "youtube.com", "href": "https://www.youtube.com/watch?v=2gCopCxe6KQ" } [/block]
Reading a PDF
Starting with the blank PDF, open it up in Adobe Acrobat. In the tools panel, find the Prepare Form toolbar. With this open, a list of all the available fields to complete will be present. Take note of the fields.
On the right-hand side, there is a list of fields that can be populated through the Fill PDF Form Data Operation . Airkit will be able to find all of these fields when processing the file.
To import the file go to Media Library and upload the blank PDF template. Once the document has been uploaded, select the asset from the list. Copy the asset URI from the Inspector. The format is something like this:
Copy asset://global:<<uuid>> The data operation will require this URI.
Create the Data Flow
Go to Connections Builder and create a new Data Flow. Set up the inputs to contain the fields to populate in the PDF. Set the first data operation to the Fill PDF Form type.
The Filename field is the name of the created PDF file once completed. The field is an expression editor so it can contain any Airscript. Check out Working With Text in Airscript to see possibilities for the names.
The PDF File Asset Identifier is a link to the asset. Take the URI from above and use the URI_TO_ASSET() function to create the asset:
Copy URI_TO_ASSET ( "asset://global:<<uuid>>" ) Data to Fill contains an object where the key is the value of the label of the form field in the PDF and the value is the value to be inserted. For example:
Copy {
"YR Model" : "2020 Model X" ,
"Print seller's name" : sellerName ,
"Printed Buyer's Name" : buyerName
} "YR Model" is the labeled field in the PDF and "2020 Model X" is what will be filled in. The sellerName and buyerName text variables were inputs to the Data Flow.
Asset settings pertain to the visibility and length of life of the asset. See the documentation on Fill PDF Form for more details.
Understanding the Output
Running the connection step produces the following output:
Copy {
"id" : "886aad07-8027-4381-95cc-a59519c857f3" ,
"assetKey" : "21ebf873-38e0-4cbb-af76-912f67cf9036" ,
"organizationId" : "395f62e5-6437-4ef0-9505-8a21a4c89e0b" ,
"displayName" : "bill_of_sale.pdf" ,
"description" : null ,
"type" : "application/pdf" ,
"size" : 51997 ,
"version" : 0 ,
"expiration" : 604800000 ,
"visibility" : "PRIVATE" ,
"state" : "ACTIVE" ,
"scope" : "APP" ,
"region" : "us-west-2" ,
"createdTime" : "2021-03-31T12:14:12.587Z" ,
"modifiedTime" : "2021-03-31T12:14:14.414Z" ,
"deletedTime" : null ,
"validationErrors" : null ,
"extraInfo" : null ,
"downloadUrl": "https://s3.us-west-2.amazonaws.com/ruist-assets-private-prod-us-west-2/395f62e5-6437-4ef0-9505-8a21a4c89e0b/21ebf873-38e0-4cbb-af76-912f67cf9036/886aad07-8027-4381-95cc-a59519c857f3/0?response-content-disposition=attachment%3Bfilename%3Dbill_of_sale.pdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20210331T121415Z&X-Amz-SignedHeaders=host&X-Amz-Expires=604800&X-Amz-Credential=AKIARVCWII5ZB4BK2J6K%2F20210331%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Signature=6d790b2c95fb283e3ed85a8a03cc9bfe1bd39d0cbff6c5cefa1a59cf03301da3",
"thumbnailUrl" : null
} The downloadUrl field in the output is a link to the complete PDF. This link can be returned from the data flow, stored in AirData , or sent to the user via email.
Example HTML Code to create a PDF
The HTML code below is ready to be used within the PDF Data Operation. Please refer to How to Create a PDF on how to use this HTML.
Copy the below code into your PDF Data Operation. Please note that all quotation marks have been escaped in order to be digested by the Airkit platform.
You can see the Original HTML further below.
Copy <! doctype html >
< html >
<!-- START: Invoice -->
< head >
< meta charset = \ "utf-8\">
< title >Invoice</ title >
< style >
.invoice-box {
max-width : 800 px ;
margin : auto ;
padding : 25 px ;
border : 1 px solid #eee ;
box-shadow : 0 0 10 px rgba (0 , 0 , 0 , .15) ;
font-size : 12 px ;
line-height : 18 px ;
font-family : 'Helvetica Neue' , 'Helvetica' , Helvetica , Arial , sans-serif ;
color : #555 ;
}
.invoice-box table {
width : 100 % ;
line-height : inherit ;
text-align : left ;
}
.invoice-box table td {
padding : 5 px ;
vertical-align : top ;
}
.invoice-box table tr td :nth-child ( 2 ) {
text-align : right ;
}
.invoice-box table tr .top table td {
padding-bottom : 20 px ;
}
.invoice-box table tr .top table td .title {
font-size : 45 px ;
line-height : 45 px ;
color : #333 ;
}
.invoice-box table tr .information table td {
padding-bottom : 40 px ;
}
.invoice-box table tr .heading td {
background : #eee ;
border-bottom : 1 px solid #ddd ;
font-weight : bold ;
}
.invoice-box table tr .details td {
padding-bottom : 20 px ;
}
.invoice-box table tr .item td {
border-bottom : 1 px solid #eee ;
}
.invoice-box table tr .item.last td {
border-bottom : none ;
}
.invoice-box table tr .total td :nth-child ( 2 ) {
border-top : 2 px solid #eee ;
font-weight : bold ;
}
@media only screen and ( max-width : 600 px ) {
.invoice-box table tr .top table td {
width : 100 % ;
display : block ;
text-align : center ;
}
.invoice-box table tr .information table td {
width : 100 % ;
display : block ;
text-align : center ;
}
}
/\*\* RTL \*\*/
.rtl {
direction : rtl ;
font-family : Tahoma , 'Helvetica Neue' , 'Helvetica' , Helvetica , Arial , sans-serif ;
}
.rtl table {
text-align : right ;
}
.rtl table tr td :nth-child ( 2 ) {
text-align : left ;
}
</ style >
</ head >
< body >
< div class = \ "invoice-box\">
< table cellpadding = \ "0\" cellspacing = \ "0\">
< tr class = \ "top\">
< td colspan = \ "2\">
< table >
< tr >
< td class = \ "title\">
<img src=\"https://s2-cdn.greenhouse.io/external\_greenhouse\_job\_boards/logos/400/817/300/resized/Airkit-Symbol-RGB-Gradient.png?1568405564" style=\\"width:30%; max-width:300px;\\">
</ td >
< td >
< br >
Avengers, Inc.< br >
890 Fifth Avenue< br >
Manhattan, NY 10021
</ td >
</ tr >
</ table >
</ td >
</ tr >
< tr class = \ "information\">
< td colspan\\ "2\">
< table >
< hr >
< tr >
< td >
Super Person< br >
John Doe< br >
john@email.com
</ td >
< td >
Invoice #: AAC-023745< br >
Created: November 3, 2020< br >
Due: February 1, 2021
</ td >
</ tr >
</ table >
</ td >
</ tr >
< tr class = \ "heading\">
< td >
Payment Method
</ td >
< td >
CC # (last 4 digits)
</ td >
</ tr >
< tr class = \ "details\">
< td >
Credit Card
</ td >
< td >
1000
</ td >
</ tr >
< tr class = \ "heading\">
< td >
Item
</ td >
< td >
Price
</ td >
</ tr >
< tr class = \ "item\">
< td >
Hulk foam fists
</ td >
< td >
$30.00
</ td >
</ tr >
< tr class = \ "item\">
< td >
Avengers Subscription (1 year)
</ td >
< td >
$75.00
</ td >
</ tr >
< tr class = \ "item last\ ">
< td >
Captain America shield
</ td >
< td >
$50.00
</ td >
</ tr >
< tr class = \ "total\">
< td ></ td >
< td >
Total: $155.00
</ td >
</ tr >
</ table >
< br >< br >
< table >
< tr >
< td >Signature: </ td >
</ tr >
< td >
<tr><img width=\"300\" height=\"100\" src=\"https:/www.airkit.com/wp-content/uploads/2020/09/airkit.logo\_.svg\" /></td></tr>
< tr >
< td >Print Name: < b >My Name</ b ></ td >
</ tr >
</ table >
</ div >
</ body >
</ html >
Here is the original HTML Code. This is the unescaped example that you can import into a text editor to modify to your needs.
Copy <! doctype html >
< html >
<!-- START: Invoice -->
< head >
< meta charset = "utf-8" >
< title >Invoice</ title >
< style >
.invoice-box {
max-width : 800 px ;
margin : auto ;
padding : 25 px ;
border : 1 px solid #eee ;
box-shadow : 0 0 10 px rgba (0 , 0 , 0 , .15) ;
font-size : 12 px ;
line-height : 18 px ;
font-family : 'Helvetica Neue' , 'Helvetica' , Helvetica , Arial , sans-serif ;
color : #555 ;
}
.invoice-box table {
width : 100 % ;
line-height : inherit ;
text-align : left ;
}
.invoice-box table td {
padding : 5 px ;
vertical-align : top ;
}
.invoice-box table tr td :nth-child ( 2 ) {
text-align : right ;
}
.invoice-box table tr .top table td {
padding-bottom : 20 px ;
}
.invoice-box table tr .top table td .title {
font-size : 45 px ;
line-height : 45 px ;
color : #333 ;
}
.invoice-box table tr .information table td {
padding-bottom : 40 px ;
}
.invoice-box table tr .heading td {
background : #eee ;
border-bottom : 1 px solid #ddd ;
font-weight : bold ;
}
.invoice-box table tr .details td {
padding-bottom : 20 px ;
}
.invoice-box table tr .item td {
border-bottom : 1 px solid #eee ;
}
.invoice-box table tr .item.last td {
border-bottom : none ;
}
.invoice-box table tr .total td :nth-child ( 2 ) {
border-top : 2 px solid #eee ;
font-weight : bold ;
}
@media only screen and ( max-width : 600 px ) {
.invoice-box table tr .top table td {
width : 100 % ;
display : block ;
text-align : center ;
}
.invoice-box table tr .information table td {
width : 100 % ;
display : block ;
text-align : center ;
}
}
/\*\* RTL \*\*/
.rtl {
direction : rtl ;
font-family : Tahoma , 'Helvetica Neue' , 'Helvetica' , Helvetica , Arial , sans-serif ;
}
.rtl table {
text-align : right ;
}
.rtl table tr td :nth-child ( 2 ) {
text-align : left ;
}
</ style >
</ head >
< body >
< div class = "invoice-box" >
< table cellpadding = "0" cellspacing = "0" >
< tr class = "top" >
< td colspan = "2" >
< table >
< tr >
< td class = "title" >
<img src="https://s2-cdn.greenhouse.io/external\_greenhouse\_job\_boards/logos/400/817/300/resized/Airkit-Symbol-RGB-Gradient.png?1568405564" style="width:30%; max-width:300px;">
</ td >
< td >
< br >
Avengers, Inc.< br >
890 Fifth Avenue< br >
Manhattan, NY 10021
</ td >
</ tr >
</ table >
</ td >
</ tr >
< tr class = "information" >
< td colspan = "2" >
< table >
< hr >
< tr >
< td >
Super Person< br >
John Doe< br >
john@email.com
</ td >
< td >
Invoice #: AAC-023745< br >
Created: November 3, 2020< br >
Due: February 1, 2021
</ td >
</ tr >
</ table >
</ td >
</ tr >
< tr class = "heading" >
< td >
Payment Method
</ td >
< td >
CC # (last 4 digits)
</ td >
</ tr >
< tr class = "details" >
< td >
Credit Card
</ td >
< td >
1000
</ td >
</ tr >
< tr class = "heading" >
< td >
Item
</ td >
< td >
Price
</ td >
</ tr >
< tr class = "item" >
< td >
Hulk foam fists
</ td >
< td >
$30.00
</ td >
</ tr >
< tr class = "item" >
< td >
Avengers Subscription (1 year)
</ td >
< td >
$75.00
</ td >
</ tr >
< tr class = "item last" >
< td >
Captain America shield
</ td >
< td >
$50.00
</ td >
</ tr >
< tr class = "total" >
< td ></ td >
< td >
Total: $155.00
</ td >
</ tr >
</ table >
< br >< br >
< table >
< tr >
< td >Signature: </ td >
</ tr >
< td >
<tr><img width="300" height="100" src="https://www.airkit.com/wp-content/uploads/2020/09/airkit.logo\_.svg" /></td></tr>
< tr >
< td >Print Name: < b >My Name</ b ></ td >
</ tr >
</ table >
</ div >
</ body >
</ html > 
