In this quickstart we'll write a short code component snippet that references some JSON data, and outputs a rendered PDF file. We'll cover how to import external libraries in a code component, and how to output binary data (like a PDF file) from a code component.
For this example, assume that our integration receives a list of rocket launches that have occurred recently in JSON format:
Our customers would like to generate PDF files from this data with launch information, one launch per page, for their managers to print and read through.
This use-case straddles the line of needing a custom component vs using a code component. This code is only used for a single integration, is relatively short, and after some preliminary testing probably doesn't need extensive unit testing.
That said, if this component becomes more complex or is used by multiple integrations, it could easily be transformed into a custom component instead.
Today we'll use the PDF-LIB library to render our PDF. To do that, let's add the following to the top of a new code component in our integration:
It's wise to pin requirements to knowing working versions. Since we're testing our integration with PDF-LIB version 1.11.2, we'll select that specific version. If we omitted the version, our integration would import whatever latest version is available.
require() line to the top of our code component will cause the code component to dynamically import the PDF-LIB library as a dependency.
Next, we'll write the code that generates a PDF. Let's first test that we can generate a blank PDF file:
If we run this code component and look at step outputs, we see that our code component generated a 583 byte binary file. By adding a Save File step after the code component to GCP Storage, and we can write that blank file out to GCP storage to verify that it looks like we'd expect. You can choose to write the file out to AWS S3, Azure, an SFTP share, DropBox, etc... your choice.
We now have a blank PDF written out. What's left to do is add some text to the PDF based on the data that was presented to our integration's webhook:
Note the format of the object that is returned from this code component:
The return object specifies both a
data property that is a file
Buffer, and a
contentType specifying the MIME type of the file being returned.
If we run a test again, we can see that a two-page PDF is being generated with formatted content from the webhook payload:
That's it! With just about 40 lines of code (if you omit comments and blank lines) we have a code component that renders PDFs.
For more information on code components checkout the code component usage page.