Using action steps
      Back to home
      1. Betty Blocks Documentation
      2. Use-case guides
      3. Using action steps

      PDF-generator step

      This article explains how to generate a PDF file in your application using the block store's ‘Generate PDF’ action step.

      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.

      Generate PDF block in the block store

      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).

      Creating new action for Generate PDF

      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.

      Generate PDF action step setting

       

      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></h1>
         </body>
      </html>

      It should be followed by a variable configuration as seen in the example below.

      HTML sample in Generate PDF action step setting

      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.

      Generate PDF model and file settings

      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.

      Create record step example

      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//…’ )

      Testing Generate PDF action step

      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.

      Example of generated PDF-file

      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!