Forum Documentation Showcase Pricing Learn more

PDF Conjurer (new free plugin)


#1

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.

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:

To make it easier for everyone, any PDF you generate and want to share with me please upload to https://scribd.com/upload-document and send the link. You don’t need to create an account with them to do so, only if you want to keep your PDF private.

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

  • When working with a List of Things, you will be asked for a number of the field from the thing you seek to extract its value. The number follows this index:

edited

There’s a known issue with this, if you rename a field, it may get to another position, however its index will not change. It means that you may see the fields in that order at your data type screen, but at the table action in the workflow the real number will be another. If that happens, experiment different number until you hit the right one.

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

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.

    • Help saving the PDF to Bubble’s database, the underlying library has a good documentation on this on its page, maybe there’s something there we can use to advance our cause. For example, it allows to open the pdf in a new window, directly prompt a print dialog for the pdf, get the pdf as a blob, buffer, URL Data and even encoded in Base64.

    • Stop by the github page.

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.


New PDF plugin - call for testers!
New PDF plugin - call for testers!
Best Practice for Form Submission to PDF
#2

Wow! Amazing work!! Thank you so much for creating this plugin, @vini_brito! :smiley:


#3

This is one of those game changers that come along occasionally!!
Fantastic work and to offer it as a free plugin is a big bonus to the bubble community. :grinning::grinning:


#5

Amazing plugin…,


#6

Any tutorials on how to style the pdf’s? New to this and need to export my static form data to similar style as page is laid out. Any suggestions?


#7

What do you mean by styling the PDF? Styling the text, like in making it bold?


#8

If you see my test form here --> https://test-intake-form-app.bubbleapps.io/version-test/intake_form_in_english?debug_mode=true

I currently had it set to after submit clicked it take static data and email entries, I want to style the out put like the current PDF Form. See Here --> https://drive.google.com/file/d/1bbhCj6NEiFP1T5HXl16yXA7Iqfh1DG-3/view?usp=sharing

I got stuck when the rich text editor won’t let me save on current email edit screen. Support gave me your plugin as a suggestion. If I can style the pdf like above document in your plugin this would be perfect soltion


#9

I see.

What you want is to create a PDF that is the questionnaire for someone to print and then answer with a pen or you want to create a PDF that is the questionnaire already filled in with the responses inputted in your app?


#10

I want the user to enter data in the app and when they hit submit a PDF with the entered data is created and emailed to office employee. The App now does this, but the email format does not really have any customization. It be better to have a PDF emailed already filled in with the responses inputted in the app.


#11

Okay, for now the plugin can’t store back into Bubble the PDF file, so it won’t be automatically emailed.

The plugin can only offer to download. I want to work on this but my current free time is very limited and I still have to do some research to understand how to store the file in Bubble’s database, so I don’t know when I’ll get to implement this feature.

About the layout, try to understand how the plugin’s building blocks work, I suggest you to read the entire topic and then take a look at the demo app internals, then make a very simple pdf, then go on experimenting with it until you reach your desired layout. Won’t be difficult once you start experimenting.

When you get something more concrete I can help you more. If you choose to use this plugin, of course, considering the current limitation of not saving the file to the database.


#12

@politotech Consider the SelectPDF plugin > save to s3 > include link in email body


#13

@neerja I do not follow. Can you elaborate.


#14

@politotech There are many forum posts regarding this plugin and its implementation.


#15

I see it is another plugin. I will look into it Thanks!


#16

Really great work with this @vini_brito. I tried it out for the first time today and didn’t take long to figure it out. Your detailed documentation helped a lot! :raised_hands:

If I could make a request (or maybe I’m missing it), it would be great to be able to center a multi-column. I know you can center elements within multi-column, but it looks like the multi-column as a whole will always be left-aligned. I can see structurally why, the columns need to build from left to right, but would it be difficult to allow the columns to start in the center of the page and adjust position from there as columns are added?

Again, really great job!


#17

Indeed, when using “fit content” on every column of a multi-column it will be mainly aligned left, due to it being built that way, so the solution in this case is to use the left margin of the first element and push the columns to the middle.
Yes, that could be useful and just easier to align the “center of mass” of the multi-column, but the engine doesn’t supports it.

Using “fit available space” with “align center” will allow that alignment, but then the columns may show some blank space in between.

In the end, setting the alignments are to make creating the layout easier, but the finer controls are only available within the individual element margin settings, that’s why I’ve put control fields for each margin, so we can sort out most situations :grin:

In the future there may be a finer control on columns and table columns width by setting it with an exact number (like it’s done currently with margins), it is supported by the engine. That would help in the case you have a column with dynamic width and fit content is being used, because the margin won’t always be accurate.

And I appreciate that you took the time to look into it and give feedback!


#18

Its always appreciated to see more examples of this plugin in a perfect environment, Provided example is not showing the complete abilities of the plugin…Just a thought