Bubble Page to PDF Plugin

Last updated 6 months ago


Applying the plugin to your bubble app is simple. You only need to place it onto your page and call in workflow the action "Convert to PDF".

This action uses the following fields to set:

  • Element -> is a default setting to link your plugin to the action. You can pace multiple PDF converters on the page and then connect one of them using this field.

  • Convert target -> you can choose to export or whole page, or just element with a specific ID.

  • Element ID -> This field will be ignored if the "complete page" selected. other wise, will be located the position and size of the element that holds the specified ID, and used everything that is inside it's borders.

  • Ignored Elements ID -> PDF plugin takes into consideration all Elements, that holds any of ID listed here (separated by comma), and ignore these when generating the PDF.

  • Upload the PDF to AWS -> Whenever you check this field, the generated PDF will be uploaded to AWS, so you can work with them as a bubble file, and send them by mail, save into bubble database or anything else. If not checked the PDF will not be available as file for next actions.

  • Download PDF after converting

    -> when ever checked, the PDF file will automatically start the download to user PC.

  • Break content into pages -> If checked, the document will be divided into pages.

  • Output file name -> Custom File name

  • Orientation -> Defines the PDF page orientation (landscape or portrait)

  • Units -> defines what units should be considered when downloading the file

  • Format -> the size of the generated page. You can choose any of normalised formats

  • Custom page size -> This field is used only if you previously selected the "custom format". In any other case it will be ignored. -> you can specify the dimensions separated by comma (the order of height/weight depends on the chosen orientation).

  • X - Y Indent -> specifies the distance from top left corner in pixels. * to set the distance also from right and bottom, you should set the custom format and reduce the final wight/height by needed units [specified in field "units"].

  • Source Format -> you can choose one of two options here. Or you will let the plugin deduct the source automatically, or your will set own dimensions.

  • Source Width/Height -> this field will be ignored if you choose the "auto Detect" as format. If you set the "custom" option, you will have to write the size of your decided source. * this is helpful if you need only part of the element lets say, that you have a group of a width 600px , that has on the left side some text of width 400px and on the right imageof size 200px. You want to print only the text part. Than you will set custom width of 400px and everything outside will be ignored.

  • Rotation Degrees -> You can also rotate the document if needed setting the clockwise direction in degrees.

  • Compress -> You can also compress the final PDF file, so the final file will be lighter.

Example of application

The following will show how we settled this examle using repeating groups, headers and footers: https://bubble.is/page?type=page&name=pdf_generator&id=zeroqode-demo-01&tab=tabs-2

The example has main repeating group, that has exact dimension of PDF page in A4 format, and inside it another repeating group that holds reports divided on these pages.

Setting up data:

We have prepared two data tables where one data table is the leading table, that holds exampled promotional content, that you may want to print into the PDF file, to keep your promotions visible. In the second datatable we have some example report, that actually needs to be delivered to your clients.

These four elements plays the critical role to have it working. First, we need to set custom input (You can use states, or any other method, we used input in the example, to make it more accessible/visible) As we want to display only those pages that hold reports, and avoid generating empty pages, we use this input to calculate how many rows will have our master repeating group following the next rule:

Search for pdf_demo_datas:count / 10:ceiling

Then we settled the master repeating group, so it shows only number of rows as specified in previous input, following next rule:

Search for pdf_demos:items until #Input pages's value:items until #Input pages's value

Each of these rows will display our promo materials (images, text and so), but it also contains referral input deciding current page in PDF editor and also the starting item to display in inner repeating group:

Current cell's index * 10 - 9

The final report will display only rows 10 rows from report data, starting from the value decided by previous input.

Search for pdf_demo_datas:items from #Input with index's value:items until #10