Since I can’t update this post anymore, I’ll be posting updates in this other post further down this thread.
The plugin has been updated, make sure you got the last version, go to your app’s plugin tab, click this plugin and then choose the last version on the versions dropdown.
A free, powerful, reliable and flexible plugin that allows you to create PDF files to be downloaded, opened or printed by your user’s browser. It is completely client-side, uses no API, no external services and does not increases your app’s costs.
It dynamically generates a PDF file and offers to download it with the standard browser’s download option (save as / open with).
Demo of how it is for your users: Demo app in run mode.
See how that simple mechanism works from the inside: View of the edit mode.
Here is a more complex mechanism involving the plugin, take a look: Edit mode and Run mode.
Also here’s the plugin page.
Description:
-
The plugin uses no API, so it doesn’t relies on external services nor sends any data out.
-
It is completely client-side, so the plugin itself won’t increase your server capacity usage.
-
You use it by actions in the workflow, triggered by anything you like, for example click of a button.
-
It uses everything Bubble offers as data sources (inputs on screen, database, APIs, etc…), and you can use both static and dynamic content (and easily mix them).
-
It is flexible, so you can generate invoices, contracts, order requests, portfolios, reports, photo galleries and whatever else you want to.
-
You can generate as many pdf files as you want, so if you have 100 users generating 50 PDFs every day that won’t increase your cost, apart of course of normal Bubble usage (example: your user logging in, performing searches in the workflow, etc).
-
Multiple PDF models on the same page.
-
No known limit on page numbers.
This is an example of a PDF done in about 20 minutes, after learning how to use the plugin:
So, the plugin works like this, you place a PDF Model element, it’s a custom element that appears when you install the plugin, in the page you want to have it generated and then set some elements in the workflow tab of that page, then run the workflow in run mode so it ends up conjuring the PDF and offering it as a download. Preferably on the click of a button.
Just as it’s shown in this video:
(watch in 1080p or highest quality possible, also the element icon has changed)
This is a valid workflow:
Every element has a lot of information inside them, just click “show documentation” in their fields and you will see. Text, image and table are the building blocks, they’re position specific. What you insert first as a workflow step, is rendered first (on top) in the document. Some basic information to use each one:
-
Start: Mandatory. This action must precede any other action related to the generation of this specific PDF model.
-
Define new style for: Creates a standard style to be defined within other elements. Can be anywhere within the “start pdf/conjure” actions. You must write the style’s name in the style action and then specify that name in the text action field called “Style”, in case you want to style a table’s text you do so in the field “text style” in the table action.
-
Create text on: Creates a paragraph. By default, appears below the previous element. Unfortunately not compatible with Bubble’s rich text editor, styling must be done through the “define new style” action.
-
Create table on: Creates a table element. By default, appears below the previous element. You feed it with a List of Texts, List of Numbers or some other list. If it’s a List of Things, do read the “show documentation”, there’s a special instruction on how to extract a field value from each thing in a List of Things.
-
Insert image on: Inserts an image element. By default, appears below the previous element. If you plan to reuse the same image, it won’t increase your file size, you also won’t need to upload it again, just type its name again in the next image action.
-
Start multi column: Begins a multi column. By default, appears below the previous element. Allows elements to be on the side of each other by specifying in the element that it goes into a multi column, to do that must go at the element (text, table or image) action and mark the checkbox that asks “is this element being inserted into a multi column?” and then type the name of the multi column you want to have the element be put into. All of the building blocks (text, image and table) can be inserted and you can insert as many as you want, just be aware of visual space.
-
End multi column: Ends it. Must be after any elements that are being inserted into this multi column.
-
Activate footer: Must precede any element that is inserted into the footer. Can be used anywhere, but I recommend putting it right after the “start” action to make it easier. Elements here stay on the side of each other the same way they do with the multi-column wrapper. In the element action you want to show up in the footer you have to mark the checkbox that says “Is this element being put into footer?”. All of the building blocks (text, image and table) can be inserted and you can insert as many as you want, just be aware of visual space.
-
Activate header: Must precede any element that is inserted into the header. Can be used anywhere, but I recommend putting it right after the “start” action to make it easier. Elements here stay on the side of each other the same way they do with the multi-column wrapper. In the element action you want to show up in the header you have to mark the checkbox that says “Is this element being put into header?”. All of the building blocks (text, image and table) can be inserted and you can insert as many as you want, just be aware of visual space.
-
Conjure: Mandatory. Finally conjures the PDF. This is what offers the PDF to your app user.
General instructions:
-
Make sure that you read the “show documentation” option in every field that you’re going to use, the detailed instruction on how to use every field is there.
-
Also, make sure that you did not skipped any required field to make work a specific functionality you’re wanting to use.
-
The key here is to understand the plugin by reading and experimenting, it takes some effort to make the PDF model that you want, but everything works out of the box and you don’t need to use all the features to make something solid, but you need to understand what you’re using. The shortest way is to read the explanation and then experiment with the feature. Once you get used to the process, it gets very easy to build a PDF model.
-
No need to create a static pdf model that only receives dynamic or even static content, you do can leverage all of Bubble’s powerfull and easy logic system to create a great PDF, for example by using conditionals on when to put a specific element (insert a table only when List field is not empty, for example, or inserting a user’s company logo in header if user’s header image is not empty) and filters and grouping, like grouping sales per month then feed that grouping to a table in the PDF being modeled. Or even triggering an entirely different PDF model workflow based on some conditions.
-
This plugin allows you to have as many PDF models as you like, then use Bubble workflow engine to decide under what conditions each will be the one being used.
-
On page break: use “before” if you want this element to be at the top of your next page, the first element. Use “after” if you want the element to be the last one in the page, to have nothing else inserted at that page’.
-
Use the elements margins to gain a finer control of your PDF’s layout.
-
Regarding using custom fonts, unfortunately a way to implement custom fonts through the plugin wasn’t thought out yet, so we’re stuck with Roboto. However, the underlying engine supports custom fonts, so it isn’t a lost cause at all.
-
The distances are measured in points, which roughly converts like this: 1 point : 1.33 pixels; 1 point : 0.352 milimeter. You will mostly think of distances when dealing with page and element margins, but again, experimenting is the shortest path.
-
If you click the button to generate the PDF and nothing happens, then most likely you have an image element action improperly configured. Check your workflow and see if the images settings are okay.
-
Another known thing (not really a bug) is the rich text editor. It won’t work, and unfortunately it’s an incompatibility between the way bubble passes data and the underlying engine. I can’t suppress the rich text editor from bubble’s interface, so that’s it. However, in the future, maybe I or another developer may find a way to solve that.
-
When working with images, their name (in the field the plugin shows, not its filename) must be unique. Just type in a different name for every image you upload and you’ll be fine.
If you’re using a dynamic text as a name, make sure no other image will dynamically get the same name, else the last image will override the previous one(s) and be repeated along the PDF document.
Contributing:
-
Non coding:
-
Help answering questions regarding this plugin made by other users in this forum
-
Feature suggestion.
-
Build and share pdf designs, known as templates.
-
Improving documentation (explanations on how to do things and how stuff works).
-
Make a video tutorial on how each element works, or on how to achieve a certain design, or something else.
-
Make a video tutorial on how to manipulate a colored or pattern based image to make a shape, for example an horizontal line to divide sections.
-
-
Coding:
-
Help with possible bugs.
-
Shop around pdfmake (the underlying JS library) and help implement a feature we still don’t have in the plugin (“background” is a low hanging fruit…).
-
Implement a feature not directly related to pdfmake, like sample canvas elements (pdfmake supports canvas elements, but why and how can we set something with it that the app makers will use and benefit?).
-
Create table layouts. We have zebra, no borders, etc, maybe the app makers could use more styles!
-
Translating Bubble’s rich text editor outputs to something pdfmake understands. Maybe detecting the tags and generating text objects with the passed styling. Or something else.
-
Stop by the github page.
-
Roadmap:
Sorted by priority (but no ETA):
-
A separate more custom and more complex table element. Think of a table cell being an entire group of elements, including images and with cells that can merge with other cells.
-
Set fixed value to element width in multi columns, currently there’s only fit space and fit content.
-
Other features.
Conclusion:
Message me if you want to contribute or make your own fork of this! I’ll help.
Let’s use this thread for support and suggestions. The plugin is MIT licensed, so anyone can easily fork this through this plugin’s page and do whatever.
I’ll be giving support in this thread in my free time, however there are no guarantees regarding support, bug fixing and updates to the plugin. I’ll do my best to fix bugs since I currently need this plugin.
Case I stop supporting the plugin for whatever reason I’ll update here, but there’s the possibility of someone else remain supporting the plugin.