Tutorial: PDF generation

Content under development

Installing the PDF Service
  1. Click LOG IN  to login to the ManyWho Drawing Tool and select Services.
  2. Click Install Service.
  3. In the Name field type PDF service: Generation.
  4. The URL for the service is https://services-staging.manywho.com/api/pdf/1
  5. Click Select or create a new Value.
  6. Click Create a new Value.
  7. Copy-paste the text PDF Form URL in the Name field.
  8. The What kind of Value is this field should say String.
  9. 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.)
  10. Click Save.

    This saves the link as the value for the PDF Form URL field.
  11. Click Continue.

    This installs the PDF service with the sample contract saved as a link.

Let’s go see what the PDF service looks like:

As you can see the service automatically creates three types which we can use – Form Field, Form Type, and sampleContract.

The service also gives us the option of a few different things we can do:

  • Create PDF from URL – This lets us generate a PDF from an URL.
  • Create PDF from HTML – This lets us generate a PDF from a HTML file.
  • Get PDF – This lets us get a PDF file.
  • Concatenate PDF – This lets us concatenate two PDF files in an app.
  • Populate PDF forms – This lets us populate a PDF file in an app.

Creating the PDF Contract Object value

We will create a value now. This value will be an object of the sampleContract type – and will hold the various fields in the PDF file. When we create the flow, we will be updating this value.

  1. Click Values.
  2. Click New Value.
  3. Copy-paste PDF Contract Object in the Name field.
  4. What kind of Value is this should be Object.
  5. Click Select a Type.
  6. Select sampleContract.
  7. Click Save Value.

If we click the + icon under Default Object Data, we see that the ManyWho engine has created a property-value pair for us, for all the fields available in the PDF form. In this tutorial, we will update the first two properties – committee and contractor.

The Original File URL and Populated File URL will be created for ALL PDF service installations we will have. The first one will store the URL of the original URL file, and the second one will store the URL of the updated PDF file, after we have used it in our app.


Creating the flow
  1. Create a new flow called PDF generation using the ManyWho Identity service.
  2. Drag a Page element from the sidebar to the canvas.

    This opens the page configuration tab.
  3. Copy-paste PDF fields in the Name field and click New Page Layout.

    This opens a new page layout called New Page in a new tab.
  4. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  5. Write PDF fields in the Name and Label fields and click Save.

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

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

    This opens the page component configuration panel on the right.
  8. Copy-paste Committee in the Name and Label fields.
  9. The Save the whole selection option should be checked for State.
  10. Click Select or Create a new Value.
  11. Click Create a new Value.
  12. Copy-paste PDF Contract Object in the Name field.
  13. Select Object as the kind of Value.
  14. Click Select a Type.
  15. Select Sample Contract.
  16. Click Save.
  17. Click Save Component.

    This is what the page looks like now:
  18. Click the Save icon on the right-hand-side navigation.
  19. Drag an Input component to the Main container.
  20. Type Contractor in the Name and Label fields.
  21. The Save the whole selection option should be checked for State.
  22. Click Select or create a new Value.
  23. Click Create a new Value.
  24. Copy-paste Sample Contract PDF Object 2 in the Name field.
  25. Select Object as the kind of value.
  26. Click Select a Type.
  27. Select sampleContract.
  28. Click Save.
  29. Click Save Component.

    This is what the page looks like now:
  30. Click the Save icon on the right-hand-side navigation.
  31. Click the PDF Generation tab to go back to the flow.
  32. Click Save Page.

    This is what the canvas looks like now:
  33. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  34. Drag an arrow from Start to PDF fields.
  35. In the Configuration Panel, type Go in the Name text field and click Save Outcome.

    This is what the canvas looks like now:
  36. Drag an Operator from the sidebar to the canvas. This opens a configuration panel.
  37. Copy-paste Set original URL in the Name field.
  38. Click New Operation.
  39. Click Select or create a new Value.
  40. Select PDF Contract Object.
  41. Select the Set equal to option for How do you want to change the value.
  42. Select Value of as the How do you want to retrieve the reference Value option.
  43. Click Select or create a new Value for Which value do you want to reference.
  44. Click Create a new Value.
  45. Copy-paste Original File URL in the Name field.
  46. The What kind of Value is this field should be String.
  47. Enter the URL https://s3.amazonaws.com/files-manywho-com/b3ba2576-6dbe-4ffd-8fb7-0ba3dcf9a9bd/samplecontractfields.pdf in the Default Value field.
  48. Click Save.
  49. Click Apply Operation.
  50. Click Save Operator.

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

    This is what the canvas looks like now:

  53. Drag a Save element to the canvas. This opens the Database Save configuration panel.
  54. Type Saving the in Name field.
  55. Click New Data Action.
  56. Click Select or create a new Value.
  57. Select Sample Contract PDF Object.
  58. Select Form Field as the Where will the data be saved option.
  59. Click Apply Data Action.
  60. Click Save Database Save.

    This is what the canvas looks like now:
  61. Drag an outcome from Set original URL to Saving.
  62. In the Configuration Panel, type Go in the Name field, and click Save Outcome.

    This is what the canvas looks like now:

  63. Drag a Step element to the canvas. This opens a configuration panel.
  64. Copy-paste Showing the URL in the Name field.