30 Minute Builds: PDF Form Filler Integrated with Box

A very typical use case for a lot of our customers and folks who are building with Airkit is digitizing a form into an application, having the application insert the user’s inputs into a PDF, and then storing that filled PDF for internal use in some sort of cloud storage. 

Airkit comes with its own internal system of storage called Airdata, but what if you need to store these files externally? Building this integrated experience can be done in less than 30 minutes!

In this tutorial, we’ll be walking through how to integrate Airkit with Box, how to create an application that fills out a blank PDF form, and how to then store that PDF into Box. We also have a video of this build published on the Airkit Youtube channel, so feel free to follow that tutorial as well. Let’s get building!

Application Overview

When a user visits the application, they will see a relatively simple front end experience where they can fill out a form and click submit.

Once the user submits their information and signature, Airkit will take that data and insert it into the appropriate fields in a ready-to-fill PDF. Once that is complete, the PDF will then be stored in a Box Developer application.

Prerequisites

To build along with this tutorial, you will need a few things to get started:

• Access to the Airkit Studio
• A Box Developer account
• A blank fillable PDF

Creating an Application in Box

The first thing we’ll need to do to get started is to create an application in the Box developers console. You need to create a new Custom App, and under the Authentication Method, choose Server Authentication, Client Credentials Grant, because that way we can just create the authentication using the application’s client ID and client secret, and not require a user to log in using a preexisting Box account. For more information, see Box’s Documentation.

Once you name the application, you will be brought to the application’s configuration page. There are a few things that we need to do with our application before it’s ready for us to integrate within Airkit. First, change the app level access to app plus enterprise access, then save these changes.

Next, go to the Authorization tab, and click Review and Submit. We need to adjust the abilities of this application and the capabilities of this application at the enterprise level, so that it can connect to external applications. Once the application has been approved by your organization’s Box Admin, we are ready to integrate it into the Airkit console.

Creating the Integration

Now that we have a Box application, it’s time to create the custom integration that we will be using within our Airkit application. In the Airkit Console go to the Integrations tab. First we have to create a custom integration to Box, and then create a connected account to our application there.

First, create a new Custom Integration, with any name and key you would like to indicate an integration with Box. The authentication type we’re going to be using is Custom Token. The endpoint we will be using is “https://account.box.com/api/oauth2/token”, the verb is POST, the token type is Header, the parameter name is “Authorization” and the value template is “Bearer {token}”. See the screenshot below for an example.

Next, set up the Integration Parameters and the Access Token Parameters. 

The integration and access token parameters may differ depending on the integration you are creating, so be sure to reference the appropriate documentation when building your custom integrations.

From here, click Create, and our custom integration is ready for use.

Now, we have to connect our Box Application to Airkit using the custom integration we just created. In the Airkit Console, under Connected Accounts, click Create New and select the Box integration we just made after naming the account. The integration parameters we added should now appear here as fields to fill out.

First, pass in the Client ID and Client Secret. You can grab these from the Box developer’s console. Under “grant_type”, pass in “client_credentials”, which is the authentication method we selected in our Box application. Under “scope”, pass in the scope we would like our application to have, which according to Box documentation is “root_readwrite”. The “box_subject_type” that we’re going to be passing in here is “enterprise”, and because we’ve chosen enterprise as our box subject type, our “box_subject_id” is going to be our enterprise ID, found in our Box developer’s console. 

Now that all of our fields have been filled out, click create and verify that there is a data connection established. 

Building the Airkit Application

We now have an integration ready for use in an Airkit application, next we need to build out the digital form application in the Airkit Studio.

In the Journey Builder, add a Visit a Link trigger to start the application, and add a web flow in the first Journey step. Then in the Web Flows Builder, make two Web Pages. On the first page, add a title Label control, a Text Input control, a Phone Input Control, a Signature Input control, a Button control, and label all of them appropriately. On the second page, add another title Label control that thanks the user for filling out their information. Finally, make sure that all of the variables associated with the inputs on the first page are labeled appropriately.

In the Media Builder, make sure you add a blank fillable PDF that matches up to the three fields on the first Web Page. Next, in Settings, Add the Box Integration we created in the Integrations section of the Builder, and select the Connected Account in the available dropdown. This allows our Airkit application to now interact with the Box application we created.

Functionality through Data Flows

The last step is to create the data flow that both fills the blank PDF with the user’s inputs, and stores that filled PDF into our box application as well. First add three inputs to the start of the data flow, a name input, a phone input, and a signature input. Next, add a Fill PDF Form Data Operation that takes the inputs and adds them to the appropriate fields of the blank PDF you have in your media builder. See the screenshot below for an example of how this matched to my blank PDF.

Next, add a Transform Data Operation to extract a URI from the now filled PDF, since we will need this later to add to Box.

The final step is to add an HTTP Request Data Operation to connect with Box and add our filled PDF to our application there. First, make sure the corrected connected account is selected in the Service dropdown. Then make sure the method is POST. The endpoint we will be hitting with our request is “https://upload.box.com/api/2.0/files/content“. The Content Type is “multipart/form-data”. 

According to the Box API documentation, this endpoint takes in two form parameters specifically. So in this data operation, add two Form parameters. In the first one add the Field Name “attributes” and under the Value we need to add the name of the file we are going to be adding to Box, and where we are going to be storing it. We also need to make sure we pass this in as a JSON string, so I used the Airscript function TO_JSON to achieve this. The following example takes in the user’s name and adds it to a file name, and is storing this file at the root parent folder, which we access by passing in “parent”: { “id”: 0 }. Under the second form parameter we are passing the actual file we want to store in Box. under Field Name add “file” and under Value pass the transform variable that has the filled PDF URI we generated earlier.

Finally, go back to the Web Flows Builder, and on the submit button on the first Web Page, add the Run Data Flow and Navigate to Web Page actions, and configure them appropriately with the input variables and the second Web Page, respectively.

Wrap Up

Hopefully this has been a helpful guide on how to create this build on your own, and in less than 30 minutes, no less! 

Even this build has room to grow! You could add a notification that texts a link to this application to the user. You could email a copy of the PDF to the user once they have filled out their form. You could even rework the HTTP request and Box application to work with Box Sign (and who knows, maybe a part 2 of this build could come soon). Try adding new features of your own and let us know what you build!