LCS - Working with PDFs
This guide will walk though how to generate a PDF file from a model data and setup a button for a user to download it.
- Step 1: Create the model property
- Step 2: Add generate button to the page
- Step 3: Creating the action
- Step 4: Displaying the download button
It is often useful to be able to use model data to generate a document for a user and the format most users request is PDF. This guide expects you to know how to use models, create forms, basic actions, and interactions. If these are not concepts you have used before in Betty Blocks, see these KBs first and then return to this guide.
Step 1: Create the model property
- The first task will be to update our data model to allow us to accept the new file upload where we will save the PDF.
- Select the Model that will contain the link to the uploaded file and add a property with the type “file”. Examples if the property name could include “File upload”, “PDF file”.
- If the file should not be publicly available, make sure to not check the box for public.
Step 2: Add generate button to the page
- With the Model Property created we can go to the page on which the file will be generated and downloaded from. (On the Left side of Betty Blocks, click on Pages and either select the correct page or make a new page)
- In the left side pane in the component view, search for and drag an action button on to the page.
- This action button should exist inside of a Data Container, Data List Item or Data table column to gain access to the Model.
- In the button configuration select the ID of the model that will be used to generate the PDF from.
Step 3: Creating the action
- Open the action associated with the action button and follow standard naming rules and set the permissions that your application requires.
- PDF Generation will require an Action Step from the Block Store to be installed into the application.
- Click on the Block store, in the search box enter “pdf”.
- Now click on the “Generate PDF” block and on the next page click install block. As with all block installs select the correct Organization and application.
- Once installed close the Blocks store tab and in the action refresh the page to see the Generate PDF step as an option.
- In start add our Input variable if we selected an Id of a model in Action button our input variable will also be “id”. Then in Action variables create and new record variable that uses a filter rule to match the model.id equal to the input variable “id”.
- With our data initialized drag a Generate PDF step to the action. And click on the step to view the following sidebar.
- Populate the Variables section with relevant fields from the model that are needed to display in the pdf.
- Select the model that will hold the PDF file and select the file field that will hold the PDF information.
- To generate the body of the PDF there are 3 choices. HTML, HTML & CSS and LiquidJS templates. We will cover LiquidJS in a separate document. For this basic example we will just use HTML.
- Using this very generic HTML file you can see how we can add Fields from our models to the PDF document that will then get generated.
<html>
<body>
<h1>{{name}}</h1>
<h6>created at: {{created_at}}</h6>
<p>{{desc}}</p>
</body>
</html> - Lastly Select a filename, this can be as simple as a basic file name, or you can build a file pattern with model data. Remember, to use model data to dynamically generate a name, an expression will need to concatenate the values together.
- PDF Generation will require an Action Step from the Block Store to be installed into the application.
Step 4: Displaying the download button
- With the action now complete it is time to return to the page and create the button to open the PDF file.
- The first step is to click on the Generate PDF button and add an “onActionSuccess” interaction to re-fetch the data container, data List or data table containing our button.
- With the Interaction complete, from the component list, search for and drag a conditional component on to the page next to the Generate PDF button.
- Configure the conditional component so the Left is the file property from our model, Betty Blocks automatically sets it to be the URL of the file. Set the compare to be not equal and then leave the right empty. This will only show the content inside the conditional if the file URL has content.
- Drag an Open page button inside the conditional. In the dialog box select save without configuration.
- Click on the button and in the component details pane select “External Page”.
- If the PDF should open in a new tab, select “New Tab”.
- For the URL, select the Blue “+” sign and select the correct file property. Betty Blocks will automatically set this to be the PDF URL.
After following these steps, you should now have a page that allows a user to generate a PDF for a given model and if that file exists a button to open/download it.
Note: If the user clicks the generate PDF button additional times the PDF will be recreated. If that is unintended you will need to create conditional logic to disable or hide the Generate button once a PDF exists.