Table of Contents

A Step-by-Step Guide to Generate PDF in UIBakery Using CraftMyPDF

In the ever-evolving world of digital magic, where pixels meet productivity, two wondrous tools have taken the stage: CraftMyPDF and UIBakery. Whether you’re a seasoned tech wizard or a curious newcomer to the digital realm, these two powerhouses are here to sprinkle a touch of magic on your PDFs, internal tools, and apps, making the once-daunting tasks feel like a breeze, saving hours of development time.

These low-code dynamic duos are here to rescue you from the clutches of mundane tasks and elevate your digital game to a whole new level of awesomeness!

Now, let’s delve into how you can harness these tools for your projects. In this article, we will guide you through the process of creating PDF documents in UIBakery using CraftMyPDF.

Why use CraftMyPDF?


If you’re looking for a secret weapon to create stunning, customized documents quickly, CraftMyPDF is the ultimate PDF generator. CraftMyPDF offers:

  • Simple integration with no-code or low-code platforms: CraftMyPDF integrates seamlessly with platforms like Zapier, Make.com, Bubble, Coda.io, Airtable and REST API.
  • Drag-and-drop template editor: With a user-friendly interface, you can easily customize and create PDF reports with just a few clicks.
  • Support for formats and expressions: The service supports expressions with built-in functions, allowing for customizations of DateTime, currency, and various other formats.
  • Regional API endpoints: CraftMyPDF allows you to generate PDF documents in a region close to you, with supported regions including the EU (Germany), Australia, Asia (Singapore), and the US. Discover more about our regional API endpoints.
  • Support for JavaScript expressions: This feature offers powerful customization options using JavaScript for complex expressions.
  • Cloud-based PDF generation API and Image generation API: In addition to PDF generation, CraftMyPDF also supports an image generation API.

If you’re seeking a hassle-free solution to swiftly create polished PDFs for your admin dashboard, internal applications, and more, without prior coding experiences, look no further!

Guidelines for Generating Dynamic PDFs using UIBakery

The first three steps require you to perform simple actions on CraftMyPDF, and the remaining steps will be on UIBakery.

1. Login and create a new PDF template

To kickstart the process, login to CraftMyPDF (or sign up here if you haven’t, it’s free!). When that is done, you will have access to your personalized dashboard, where you can see all your workspaces. Navigate to the ‘Manage Templates’ option on your toolbar and select ‘New PDF Template’ to initiate the creation of a fresh PDF template. In this walkthrough, we’ll craft a logo consulting invoice. Follow these simple steps:

  • Name: Assign a name to your template. In this case, the default name ”New Template” suffices
  • Template Selection: Choose a preferred template from the available options (I opted for the logo consulting invoice)
  • Create: Click the ‘Create’ button to generate your PDF. Upon successful creation, you will be redirected back to your dashboard
CraftMyPDF template creation screen

2. Get API Key

Now, back to your dashboard, click on the ‘API Integration’ option on the toolbar, and copy the default API key that has been generated for you by clicking on ‘Copy to Clipboard’. We will need this later on

API Integration screen on CraftMyPDF

3. Get PDF template ID

Now, back to your dashboard, click on the ‘Manage Templates’ option on the toolbar, and copy the template ID that has been generated for you. We will need this later when we send an API request

Manage Templates screen on CraftMyPDF

4. Log in to UIBakery and create a new app

Go to uibakery.io, and create an account if you haven’t, if you have already, sign in to your UIBakery account and click on ‘Create App’. If it is your first time and you have just signed up, fill in the relevant details such as Workspace Name, and a URL for your app, and then click on ‘Access Workspace’.

This will create a new app for you and you will be redirected to it immediately. This is what you’ll see:

Home screen of UIBakery after a successful login

5. Edit App and create a REST API

On the top right of your screen, click on the blue button, ‘Edit App’. Various action trays will expand and you can now add, move, or delete your components however you want. Navigate to the toolbar located on the left side of your page and click on ‘Data Sources’. Then, click on the green ‘Connect’ button. A list of data source type should pop-out. To create a REST API, click on ‘HTTP API’, then fill in these details and follow these steps:

  • Data Source Name: Choose a name for the data source (I named mine “REST-API”)
  • Base URL: Add a base URL for the API, mine is http://api.craftmypdf.com/v1
  • Headers: Add a header name and the API key copied from your CraftMyPDF dashboard in Step 2, in my case the header name shall be X-API-KEY
  • Create: Click on the ‘Connect Datasource’ button at the bottom right of the pop-up to finish

6. Connect to a database

After creating your REST API, you will be redirected back to the Data Sources page. To create a connection to your database, click on the green ‘Connect’ button, and select ‘PostgreSQL’ (in my case). Then follow these steps:

  • Data Source Name: Choose a name for the data source (I left mine as the default “My Data”)
  • Host: Use your desired existing hostname
  • Port: Use your existing port number
  • Username & Password: Fill in your database login credentials
  • Database name: Use an existing database that has already been created (Mine is “invoicedb”)
  • SSL: Enable SSL (Secure Socket Layer)
  • Test connection: Click on ‘Test Connection’ to make sure that the connection will be successful
  • Create: Click on the ‘Connect Datasource’ button at the bottom right of the pop-up to finish
Sample for database connection

7. Design your desired app

When you are done setting up connections to all your data sources, navigate to the toolbar located on the left side of your page and click on ‘Pages’. You will be directed to your app’s dashboard and you now have the freedom to drag-and-drop, add as many pages as you need, and edit it however you may like. To find the various components that you will need, click on the ‘Components’ button from the same toolbar. This is my simple design:

  • Buttons: I have two buttons, labeled “Generate” and “Download” for the PDF
  • Tables: I have two tables, named “Invoices” and “Items”, which will be filled with data queried from the database that we have connected earlier (there will be a default initial set of data displayed)
  • PDF Viewer: To view the generated PDF from CraftMyPDF
Sample dashboard design on UIBakery

8. Setting up queries to obtain data for tables

To fill our tables with data, we will need to set up database queries for them. I will list down the steps on how to query data for a table, and we can use the same steps and change specific variables depending on what we want to achieve.

  • Select table: Click on the desired table, and make sure that it is highlighted (in my case, the “Invoice” table and “Items” table)
  • Connect my data: On the right toolbar, click on the green button ‘Connect my data’. This will create a new action at the bottom toolbar
  • Rename query: Click on the three vertical dots ‘⋮’ to rename your query (I used “queryInvoice” and “queryInvoiceItems” respectively)
  • Type: Select the type of data (the data sources that were created in Step 6)
  • Operation: Select ‘SQL Query’
  • SQL Query: Write the SQL query statement to obtain the desired data
  • Execute action: Click on ‘Execute action’ to make sure that the query works. You will see the data in the “Results” section
Sample query for Invoice Table

Sample query for Items Table

9. Send JSON and API Request to CraftMyPDF

Now, we need to send the data via an API Request to CraftMyPDF so that we can generate the PDF. Follow these steps:

  • Select button: Click on the “Generate” button, and make sure that it is highlighted
  • Triggers: On the right toolbar, scroll down to the “TRIGGERS” section. Then click on the ‘Select Action’ dropdown
  • Create Action: Click on ‘Create Action’
  • Type: Select the type of data (the REST API that was created in Step 5)
  • Operation: Select ‘HTTP Request’
  • Method: Select Method ‘POST’
  • Base URL: Should be generated as it was created earlier, so you just have to fill in “create” for the URL (you can find all the CraftMyPDF API references here)
  • Headers: Add a header name and the API key copied from your CraftMyPDF dashboard in Step 2, in this case, the header name will be X-API-KEY
Sample data to send API Request

  • Body: The body should be in the form of JSON. You should replace the template_id in this step with the one that you obtained earlier (refer to Step 3), here’s my sample:
    "data": { 
        "invoice_number": ui.queryinvoiceTable.selectedRow.data.invoice_no, 
        "date": ui.queryinvoiceTable.selectedRow.data.date,
        "due_date": ui.queryinvoiceTable.selectedRow.data.due_date,
        "currency": ui.queryinvoiceTable.selectedRow.data.currency,
        "discount": 5,
        "tax": 7, "company_name": "LOGO Consulting Pte Ltd",
        "email": "[[email protected]](mailto:[email protected])",
        "client": ui.queryinvoiceTable.selectedRow.data.client, "client_address": ui.queryinvoiceTable.selectedRow.data.client_address,
        "client_address2": ui.queryinvoiceTable.selectedRow.data.client_address2, "client_address3": ui.queryinvoiceTable.selectedRow.data.client_address3, "items": ui.queryinvoiceitemsTable.value 
    "template_id": "xxxyyy-xxxyyy-xxxyyy", 

  • Execute action: Click on ‘Execute action’ to send the API request. You will see the response data in the “Results” section like this:
API Request results

10. Display the generated PDF

It is time to display the generated PDF onto the PDF component that we created earlier. Copy the file link from the API request response in the previous step and paste it into the component’s content section as such:

Linking PDF component to display CraftMyPDF’s generated file

11. Download the generated PDF

If you wish to download the generated PDF, you would need to add an action to a button component that will redirect you to the PDF file that is stored on the cloud. You can follow these steps to achieve that:

  • Select button: Click on the “Download” button, and make sure that it is highlighted
  • URL: On the right toolbar, you will see the “URL” section. Then click on the ‘Link to URL’ button and paste the same file link from the previous step
Setting up a clickable action to view the full PDF file in a new tab

The generated PDF from CraftMyPDF should be available for download upon clicking the button.


This comprehensive guide offers a step-by-step walkthrough to simplify crafting, automating, and customizing PDF templates using CraftMyPDF and UIBakery.

Take your time to understand each step — mastering this process can greatly streamline your workflow and enhance your productivity. Thank you for exploring!

Sign up at https://app.craftmypdf.com/accounts/signup/ to learn more.

Recent Posts

How to Overlay Text on an Image in HTML and CSS

CraftMyPDF’s Image Generation API: Now, if coding isn’t really your thing or you just want a quicker solution, CraftMyPDF has got you covered. Their API is designed to make the process of generating images with text overlays a breeze.

Read More »

Generate PDFs in C# with 8 Libraries (2024 Updated)

In this article, we will cover different options available, including using libraries such as iTextSharp and PdfSharp, cloud-based APIs such as CraftMyPDF, built-in classes in the .NET Framework like the PrintDocument class, and the Microsoft Office Interop library.

Read More »

How to generate PDF documents with 4 Popular PHP Libraries (Updated 2024)

There are various libraries available to generate PDF documents with PHP such as FPDF, TCPDF, or DOMPDF. These libraries provide a wide range of features for creating PDF documents, such as setting page size, margins, fonts, and images.

In this article, I would briefly discuss some of these libraries along with some code snippets and show you how to generate a PDF document using PHP and CraftMyPDF.

Read More »

How to Dynamically Create a Trackable QR Code in a PDF Without Coding

In this article, we’ll explore a range of topics including free QR code tools, tips and tricks for using QR codes effectively, and various use cases.

In addition, we will guide you through automating the generation of dynamic QR codes using Zapier, Airtable, and CraftMyPDF’s PDF or image generation APIs.

Read More »

A Guide to Generate Barcodes and QRcodes

In this article, we’ll explore barcodes and QR codes, discussing their applications and how they’re used in various scenarios. I’ll guide you through the steps to create these codes using Python and Node.js. Additionally, we’ll look at how to generate barcodes and QR codes with CraftMyPDF, which supports REST API and integrates seamlessly with no-code platforms like Zapier, Make.com, and Bubble.

Read More »
Copyright ©2024 CraftMyPDF.com

Email us at [email protected] for support