How to create a free PDF generator app without code

abril 28, 2023 • Juliet Edjere

Manual PDF generation can cause a number of issues for businesses, including inefficiency, errors, and a lack of standardization. These problems can harm a company’s productivity, accuracy, and brand image.

Building a PDF generation tool with two open-source tools, Appsmith and Baserow, can be valuable for businesses and individuals alike, as it allows for streamlined document creation and distribution. This process can save time and effort compared to the manual creation of PDFs, especially when dealing with large amounts of data.

What we’ll do

In this tutorial, we’ll guide you through the process of streamlining your document creation process with a Baserow PDF generator app in Appsmith. What we need to do is:

Set up a Baserow database.
Create a database token.
Fork the PDF generator app in Appsmith.
Add Baserow database token to Appsmith datasource.
Run the getRecords query.
Create markdown templates using JSON paths.
Add databases to the PDF generator list.
Add table URL to app settings.
Save or share the generated PDFs.
Deploy and share the app.

By the end of this tutorial, you’ll be able to input data from a Baserow table, choose a template, generate and download a PDF based on that data. The app will merge the row with the template, convert the markdown to HTML, and then convert HTML to a PDF file.

What we need

These are the tools we need:

A cloud-hosted or self-hosted Baserow account
An Appsmith account

Why build with Baserow and Appsmith?

Appsmith is an open-source platform that allows you to build web apps with ease on top of any database. It offers a wide range of features that make it easy to create high-quality web applications quickly.

Baserow is an open-source online database tool that offers numerous advantages to businesses looking to develop custom database applications. It has a straightforward and user-friendly interface, making it simple to use and highly customizable for developers to create tailored applications. Building with Baserow is a good choice for businesses looking for a customizable, scalable, and easy-to-use platform to build custom database applications.

We can create an entire suite of apps with high levels of security and efficient workflows by integrating Baserow and Appsmith.

Let’s get started!

How to build a Baserow PDF generator app in Appsmith

1. Set up a Baserow database

First, log into Baserow. Then, create a workspace by selecting the + Create workspace button in the dashboard.

To add a workspace, first, give it a name and then click the + Add workspace button.

Once you’ve created a workspace, build a database from scratch or add a database from the template library.

For this tutorial, we’ll use the sample data from the Baserow template library to get started. Add these databases to the created workspace in Baserow:

New hire onboarding.
Inventory management.
Customer onboarding.

2. Create a database token

To build a Baserow PDF generator app in Appsmith, you’ll need to start by connecting Appsmith to your Baserow API. Baserow API provides granular permissions for each table. API tokens provide similar functionality to login credentials, but they provide additional security and flexibility.

A token, like your username and password, should be kept secure and handled with the utmost confidentiality.

Within your Baserow user account, you can create multiple unique database tokens that allow Baserow to connect with other apps. Creating database tokens is available to all Baserow users, you don’t need to be on a paid plan.

To create a database token:

Click the profile at the top of the screen, then navigate to the Settings page.
Click the Database tokens tab.
Click the Create token + button.
Write a descriptive name for the token, and select the existing workspace with the table to connect. Set the permissions as needed for the application.
Click the Create token + button to create a new database token for the selected workspace and the authorized user.

With the database token generated, we can commence building the front end on Appsmith. We will need the token, so keep this page open.

3. Fork the PDF generator app in Appsmith

Next, you will fork the PDF generator app in Appsmith to copy the app to your account and create your own version. Use Appsmith’s drag-and-drop interface and widget to add any additional features or functionality you need to the app.

If you wish to keep the Baserow datasource separate from other apps or users in your Appsmith account, you might want to add it to a new workspace.

4. Add Baserow database token to Appsmith datasource

Next, we will modify the Authenticated API datasource to query the Baserow database or API inside Appsmith. You will be able to enter your database token and use your own data and templates.

When you create an authenticated API datasource, you only need to configure the headers and query parameters once, and don’t have to do it for each API request after that. This will ensure that the token is saved on the server instead of being exposed in the editor, which is a more secure approach.

To add the database token to the Baserow API datasource:

Click on the Edit button next to the Baserow datasource to modify the datasource.
Paste the Baserow database token retrieved earlier into the Authentication Value field.
Save the datasource. The configuration details aren’t saved/updated until the Save button is clicked. When the datasource has been added successfully, a success message appears at the top of the app window.

Add Baserow database token to Appsmith datasource

Excellent! The token has now been securely stored on the server, allowing us to reuse it for multiple queries. This means that you can easily share the application with other members of your team without revealing the token itself, ensuring its confidentiality and security.

5. Run the `getRecords` query

Now that we have connected the API, we will run the getRecords query.

The response should look like this for the Companies table in the Customer Onboarding database:

{
  "count": 17,
  "next": null,
  "previous": null,
  "results": [
    {
      "id": 1,
      "order": "1.00000000000000000000",
      "Company name": {
        "id": 464717,
        "value": "Hodkiewicz Inc",
        "color": "light-gray"
      },
      "Client ID": [
        {
          "id": 1,
          "value": "1001"
        }
      ],
      "Client name": [
        {
          "id": 1,
          "value": "Angel Perez"
        }
      ],
      "Start date": "2022-11-01",
      "Plan": [
        {
          "id": 1,
          "value": "Free"
        }
      ],
      "Company size": {
        "id": 464739,
        "value": "10-50",
        "color": "light-gray"
      },
      "Admin email": "admin@hodkiewicz.com",
      "Data usage": [
        {
          "id": 1,
          "value": "Unlimited"
        }
      ],
      "Storage usage": [
        {
          "id": 1,
          "value": "2"
        }
      ],
      "Auto renewal": false,
      "Billing cycle": {
        "id": 464751,
        "value": "Free",
        "color": "dark-green"
      },
      "Payment date": "TBD"
    },
    ...
}

Some data fields are stored as an array in the Baserow API response. Next, we will apply these to different data structures.

6. Create markdown templates using JSON paths

Importing external libraries is a powerful feature of Appsmith. It provides advanced capabilities for a use case like PDF generation.

In this tutorial, we will use the JSONPath library to access and manipulate the JSON data received from the API. The JSONPath library will be used to dynamically reference the path in the response data. We will use different operators to select specific fields. This will be useful to extract and display dynamic data from the table in the Markdown content.

In the markdown template, reference the corresponding field names. Specify the JSON path to the field to extract, and then output it in a format that can be easily included in the Markdown content.

Nested fields/arrays can also be referenced. To select a single value from an array, use the index operator []. For example, to reference the name of the first client in the the Companies table, use the JSON path: <<$['Client name'][0].value>>.

Extract the value of the field using a JSON path, and then include it in the Markdown content like this:

**ID:** <<$['Client ID'][0].value>>\
**Plan:** <<Plan[0].value>>\
**Purchase date:** <<$['Start date']>>\
**Billing cycle:** <<$['Billing cycle'].value>>\
**Next payment date:** <<$['Payment date']>>
___

Hello <<$['Client name'][0].value>>,

Thank you for signing up for <<$['Company name'].value>>, here are your account details:\
**URL:** [example.com](https://example.com).\
**Email:** [<<$['Admin email']>>](mailto:<<$['Admin email']>>)

Your account is on the **_<<Plan[0].value>>_** plan, with the ability to create **_<<$['Data usage'][0].value>>_** number of data and store up to **_<<$['Storage usage'][0].value>> Gb_** of files per group.

To get a head start, please complete the onboarding process in the customer portal at: [https://www.example.com](https://www.example.com).

Have questions? You can always reach out to our great customer support team with any questions at [support@example.com](mailto:support@example.com).

Best regards,\
The Support Team

When the Markdown is rendered, the <<$['Client name'][0].value>> expression will be replaced with the value of the Client Name field from the table.

7. Add databases to the PDF generator list

Let’s go back into Baserow. Next, we will create a Markdown Template table to list all the databases we are working with.

Create a Markdown Template table within a database. Each row in this table will be linked to a table within the reference databases, with the following field types:

Name: The name of the database.
Body: Markdown template using JSONPath.
CSS: Define the visual structure, layout, and aesthetics to customize the appearance and layout of the PDF document.
Merge table: The URL of the reference table in the database. Copy each table URL from your browser’s address bar. It will look something like this: https://baserow.io/database/30143/table/69215.

Now that we have connected the API and created a template, we now get data from Baserow and convert it into a PDF document.

8. Add Baserow table URL to app settings

Next, we will copy the Markdown Template table URL from Baserow and paste this into the app settings:

Copy the URL from your browser’s address bar. It will look something like the following: https://baserow.io/database/30143/table/69215.
Paste this URL as the default value for in_templateUrl field.
Run the getTemplates query to pull the template list from the table.

Each database referenced in the Markdown Template table has a template description and a link to the data with which the template should be merged. The process for generating a PDF file involves three steps:

First, the app uses a JS function to merge the data from a row with the pre-designed markdown template.
Second, the app will convert the merged data and template from markdown to HTML format.
Third, the app will use the HTML version to generate a PDF file using multiple JS libraries.

The output can be downloaded as a PDF, which can be easily shared and printed, or copied to the clipboard as markdown. To generate high-quality PDFs in Appsmith:

Select a PDF template to use from the Markdown Template list.
The rows table will queue up the right data for it. Select a row from the list.
Click the Download PDF button or Copy Markdown.

Save or share the generated PDFs with Baserow

Click the Deploy button within the Appsmith editor to deploy the app and test it. Once deployed, you can share your application with users by clicking the Share button on the top right of the Appsmith editor.

You can also make the application Public. In this case, anyone with the application URL can view the application without signing in.

Get started with Baserow PDF generation in Appsmith and impress your clients with polished reports. Overall, generating PDFs automatically can be an efficient and effective way to create professional-looking documents quickly and easily.

Key takeaways

This tutorial covers how to use a PDF generator app to automate the creation of PDF documents, increase efficiency, improve collaboration, and provide security features. Automated PDF generation takes data from Baserow and automatically converts it into a PDF document.

In this context, a PDF generator app in Appsmith can assist businesses in increasing efficiency and ensuring document accuracy and consistency. This process can reduce the potential for errors and inconsistencies in formatting, which can be common when creating PDFs manually.

If you run into any issues following this tutorial, feel free to reach out and ask for help in the Baserow community.