After reading this article you’ll know how to:
Install the ‘Generate PDF’ step from the block store
Add this step to your action flow and set it
Create a new record with the PDF and test it
One might need to generate PDF files for different purposes: documentation, legal reports, invoices, etc. Our PDF generator is an action-step tool that allows you to create PDF files from an HTML source by means of the Prince service. Let’s follow this step-by-step guide to find out how to generate a new PDF file in your application.
Prefer to watch a video about generating PDFs? Check this video:
Getting started
Open up the block store and find the ‘Generate PDF’ function there. Click on ‘View details’ and proceed to the function’s detail page, press the ‘Install block’ button, and choose the organization and application you want this function to be installed to.
After that, go to your actions. Create a new action, and come up with a name and description for it. Also, don’t forget to have a look at the authorization for the action depending on who is allowed to generate PDFs (‘Private action’ toggle).
Find the ‘Generate PDF’ in the functions overview and drop it in the desired place of the action flow to create an action step. Click on the newly added step once to open its options.
Setting up ‘Generate PDF’ step
As mentioned before, our PDF generator function is based on HTML. First, we want to create a title for our PDF file. It is done using the following bit of code:
<html>
<body>
<h1>My Title</h1>
</body>
</html>
Here ‘My Title’ is a static value displayed as title type one (<h1>). If you want this value to be dynamic, use a variable within a code like this:
<html>
<body>
<h1>{{title}}</h1>
</body>
</html>
It should be followed by a variable configuration as seen in the example below.
The next settings come as follows:
Pick up a model to store the PDF file in
Choose a ‘file’ property as we save our PDF as a file
Type in a file name you want to assign to the file in the outcome
Come up with a file reference name (AS). This option is important for our flow because it will be used as a reference to create a new record
Press ‘Save’ when you’re done
Note: Use the snake_case to fill in the file name and file_reference.
Adding ‘Create record’ step
When we finish setting up the ‘Generate PDF’ step, it’s time to add the ‘Create Record’ to enable our PDF file to be created and saved within a model.
1. Drag the ‘Create Record’ step and drop it onto the canvas right after ‘Generate PDF’
2. In options, choose the model from a previous step (‘Template’ in our case)
3. Then set the mapping of values to properties:
Choose the ‘file’ property
File property that is going to have the same value as a file reference name in the previous step (‘result_pdf’)
4. If needed, add a name to the variable (in ‘As’ field) that you want to be shown for the newly created record
5. Save your progress with the ‘Save’ button below.
6. To finish up the complete action flow, define the Output variable of the action by setting the created record as the output result!
Wrapping up
Alright, naturally you want to know if this action flow is really working before you can actually connect to the user interface.
It is done easily by going to
‘Test run’in the top right corner of the screen.‘Test action’ pop-up will open
First, copy the piece of code you see in the mutations view
Press
‘Go to the playground’Paste the piece of code from the mutations to the top left side of the playground canvas
Press the play button to get a response
The response will appear on the right side of the playground canvas and you can copy it (starting from ‘http//…’ )
Lastly, you can copy the URL from the playground and paste it into your browser’s search bar. By doing this, you’ll be able to see if the PDF was created the way you planned. Here’s what we received as the result of our use case.
It’s recommended that you also check our GitHub for more information and another example. Also, visit the Prince user guide to learn more about HTML styling, layouts, tables, fonts, etc. Good luck!