Tutorial: App to populate PDF forms

Content under development

We can use Boomi Flow to create apps that can handle PDF files. This is handy if we want to send a form for approval, or need a file with fillable fields. The PDF Service is especially helpful if we want to automate high-volume forms processing or need to collaborate with others in a PDF workflow.

Using the PDF service, we can build apps that lets us digitize documents, and apps that can distribute, manage, set permissions to, or upload documents. We can also combine the PDF service with other services to create even more powerful solutions. For example, use Box and Twilio to build a sophisticated approval process that uses permission-based access, and can send text alerts when the file is edited. Or use the PDF service with Salesforce to automate an employee onboarding process.

Out-of-the-box, the PDF service in Flow can:

  1. Populate forms with user input
  2. Send/store files
  3. Create a PDF file
  4. Combine multiple PDF files.

In this particular tutorial, let’s build a fast and simple app that populates a PDF form with user inputs.

We will need:
  1. Boomi Flow username/password  (Get a free Flow login here)
  2. A Flow tenant/subtenant with Identity Service installed

Installing the PDF Service
  1. Click LOG IN  to login to the Flow Drawing Tool and select Services.
  2. Click Install Service. This opens the New Service screen.
  3. In the Name field type PDF service: Generation.
  4. Copy-paste https://services-staging.manywho.com/api/pdf/1 in the URL for the service field. 
  5. Click Continue. This opens the next screen.
  6. Click Select or create a new Value.
  7. Click Create a new Value.

    This opens the value creation dialog box.
  8. Copy-paste the text PDF Form URL in the Name field.
  9. The What kind of Value is this field should say String.
  10. In the Default Value field, copy-paste the URL: https://s3.amazonaws.com/files-manywho-com/b3ba2576-6dbe-4ffd-8fb7-0ba3dcf9a9bd/sampleContract.pdf (This is a sample PDF file we are using for the purpose of this tutorial. If you open the link on a browser, you can see the PDF form.)
  11. Click Save. This saves the link as the value for the PDF Form URL field.
  12. Click Continue.

    This installs the PDF service.

    The sample contract we uploaded earlier is saved as part of the service configuration. To use a different form, we can either install a new avatar of the PDF service, or update the URL field of this service, and then update the service.

Magic

Let’s take a quick peek under the hood of the service. The Flow engine understands that we are using the PDF service, and automatically configures the service for use in our tenant.

Click Back to Services, and then click the pencil icon next to the PDF service.

This opens the service configuration page.
We can see the PDF Service supports Social, Messages, Files, and Database (Features). The Actions section lists the message actions possible with the PDF Service:

The PDF Service has also generated three types — Form Field, Form Type, and sampleContract.


More magic… 

There is a bit more magic that awaits us. The Flow engine has not only configured the service for us, it has also parsed the PDF form we uploaded. The fields that need to be populated, are added as properties of the sampleContract type.

We can see this by clicking Types, and then clicking the pencil icon next to the sampleContract type.


Creating an object of the sampleContract type
  1. Select Values and then click New Value.

    This opens the value creation screen.
  2. Copy-paste Sample Contract PDF Object in the Name field.
  3. Select Object as the kind of value. This brings up the option to select a type.
  4. Click Select a Type.

    This opens the type selection dialog box.
  5. Select sampleContract.
  6. Click Save Value.

Creating the flow
  1. Select Flows and click New Flow.

    This opens the New Flow screen.
  2. Select ManyWho Identity Service as the service used for authentication.
  3. Click Continue.
  4. Type PDF generation in the Name field. The Access field should be set to Anyone can run this flow. The Social feed for collaboration should be set to None.
  5. Click Start Building.

    This brings us to the canvas.

    This is where we will build our flow.
  6. Click Shared Elements.

    This opens the Shared Elements dialog box.
  7. Select Services.
  8. Click Import Existing.

    This lists all the services available in your tenant.
  9. Click the Import button next to the PDF service: Generation.

    This imports the PDF service to the flow. If we select Services again, we can see the PDF service listed now.
  10. Click Close to close the dialog box.
  11. Drag a Page element to the canvas.

    This opens the page configuration tab.
  12. Copy-paste PDF fields in the Name field.
  13. Click New Page Layout.
    This opens a new page layout called New Page in a new tab.
  14. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  15. Write PDF fields in the Name and Label fields.
  16. Click Save.

    This saves the name and label of the page.
  17. We will now save the page. Click the Save icon on the right-hand-side navigation.

    The page name changes to PDF fields.
  18. Drag an Input component to the Main container.

    This opens the page component configuration panel on the right.
  19. Copy-paste Contractor in the Name and Label fields.
  20. Check the box next to Required.
  21. The Save the whole selection option should be checked for State.
  22. Click Select or Create a new Value.

    This opens the value creation dialog box.
  23. Select the Sample Contract PDF Object/contractor value from the list.
  24. Click Save Component.

    This is what the page looks like now:
  25. Click the Save icon on the right-hand-side navigation to save the page.
  26. Drag another Input component to the Main container. Let’s try populating a second field now.
  27. Type Hourly rate in the Name and Label fields.
  28. Check the box next to Required.
  29. The Save the whole selection option should be checked for State.
  30. Click Select or create a new Value.
  31. Select the Sample Contract PDF Object/hourlyRate value from the list.
  32. Click Save Component.

    This is what the page looks like now:
  33. Click the Save icon on the right-hand-side navigation to save the page.
  34. Click the PDF Generation tab to go back to the canvas.
  35. Click Save Page.

    This is what the canvas looks like now:
  36. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  37. Drag an arrow from Start to PDF fields.
  38. In the Configuration Panel, type Go in the Name text field.
  39. Click Save Outcome.
    This is what the canvas looks like now:
  40. Drag an Operator from the sidebar to the canvas. This opens a configuration panel.
  41. Copy-paste PDF URL assignment in the Name field.
  42. Click New Operation.
  43. Click Select or create a new Value.
  44. Enter the text original in the Search bar, and select the Sample Contract PDF Object/Original File URL from the results.  
  45. Select the Set equal to option for How do you want to change the value.

    This brings up the field for retrieving the reference value.
  46. Select Value of as the How do you want to retrieve the reference Value option.

    This brings up the field for value.
  47. Click Select or create a new Value for Which value do you want to reference.
  48. Select PDF Form URL.
  49. Click Apply Operation.
  50. Click Save Operator.

    This is what the canvas looks like now:
  51. Drag an outcome from PDF fields to PDF URL assignment.
  52. In the Configuration Panel, type Go in the Name and Label text fields.
  53. Click Save Outcome.

    This is what the canvas looks like now:

  54. Drag a Save element to the canvas. This opens the Database Save configuration panel.
  55. Copy-paste PDF Save in the Name field.
  56. Click New Data Action.
  57. Click Select or create a new Value.
  58. Select Sample Contract PDF Object.

    This brings up the option for the field where the data will be saved.
  59. Select sampleContract as the Where will the data be saved option.
  60. Click Apply Data Action.
  61. Click Save Database Save.

    This is what the canvas looks like now:
  62. Drag an outcome from PDF URL assignment to PDF Save.
  63. In the Configuration Panel, type Go in the Name field.
  64. Click Save Outcome.

    This is what the canvas looks like now:

  65. Drag a Step element to the canvas. This opens a configuration panel.
  66. Copy-paste Updated Form in the Name field.
  67. Click View and select Source code.

    This opens the source code editor.
  68. Copy-paste the following code:
    <p>
    <iframe style=”border: none;” src=”{![Sample Contract PDF Object].[Populated File URL]}” width=”800″ height=”800″ scrolling=”no”>
    </iframe>

    </p>

  69. Click Ok. This inserts the code in the content editor.

    Do not wory about the 404- File or directory not found error. When we run the app, the updated PDF form will be rendered, as we shall see in a moment.
  70. Click Save Step.

    This is what the canvas looks like now:
  71. Drag an outcome from PDF Save to Updated Form.
  72. Type Go in the Name field.
  73. Click Save Outcome.

That was fast!

And… we are done building. This is what the canvas looks like:

Let’s run the flow now, and see how easily it converts into an app.


Appchievement!

It took us around twenty minutes to create an app that can get inputs from an user, populate a PDF form with the inputs, and have the updated form available in a matter of seconds.

When we run the app, this is what we see:

Let us add a contractor name, an hourly rate, and click Go.

And… magic!

…More magic!

Fun fact // 

Back in the days, one of the cabinets that housed the MIT AI Lab’s PDP-10, had a switch glued to it.  The switch had two positions, and scrawled in pencil on the metal switch body were the words ‘magic’ and ‘more magic’. Find the whole story here.


Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, Drawing Tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.