PRINT PRO - Now Available! - Updated

Showcase
1

iconnew
iconnew3936Ă—1014 364 KB
print_pro

Print Pro now available!

To see the features and view a quick demo head over to https://plugbubble.bubbleapps.io/print-pro

FULL DEMO:

See it live here: https://print-pro-demo.bubbleapps.io
Get your hands dirty here: print-pro-demo | Bubble Editor

7 Likes
2

Awesome, @jarrad. Can you share an example of the HTML template, and explain what’s possible? So, can dynamic data be used in the template to render repeating group data (eg line items for an invoice)?

Also, I’m assuming everything prints as PDF? Or is there support for xls, doc, etc.?

3

Here you go mate, I put a little demo app together so people can create pages and try it out for their own use cases.

As for the templates it really makes it possible to style, compile and print anything. I have provided properties so that you can go as far as provide database saved files or raw code input for the CSS, Javascript, HTML (head, body, footer) and best of all the properties are dynamic, meaning anywhere in the code you can slip in some dosearchfor, or current this and current page that, maybe an inputs value here or fileuploads value there… its super quick but just in case your loading gigapixel’s there is a timeout property that you can increase to give it longer to load.

This is the advanced action:

Capture
Capture223Ă—807 21.3 KB

See it live here: https://print-pro-demo.bubbleapps.io
Get your hands dirty here: print-pro-demo | Bubble Editor

3 Likes
4

Amazing! Is there an option to save the PDF in Bubble as opposed to printing?

5

Its funny because i started to add it. the thing is its sort of a plugin im building for saving/uploading already and at some point you kind of have to call it. I will put it in when i get a second though i was thinking of combing a few plugins i have to be an entire suit of office tools aimed at bubble users requiring more control over business document tasks. I dont know if you picked up on it but the template inside the plugin when dropped on your page inside a html element is a tool in itself. it allows you to add items into the invoice using the plus symbols around the template and customize the data. being able to include javascript code or jsavascript url’s you have in your database gives you the power to do that with any document builder/template you find. the easy action is much the same as the advanced except the whole code block is one making a copy and paste for new users simple.

6

@jarrad, man: Can you check/let me know if Print Pro will help or solve this issue for me somehow How to fix an element to a specific position Thanks in advance!

7

hey @CapiBalid, this will do the job for you. I just added a button to the demo page found here: https://print-pro-demo.bubbleapps.io that will show you a printed element’s difference with a vary small amount of CSS.

here is a screenshot of the printed difference -

Before:

before
before952Ă—559 163 KB

After:

after
after959Ă—492 195 KB

method to recreate:

  1. open notepad on your PC and paste this,

    #myID {
    margin-left: 100px;
    }

  2. click save as, change the save as file type to all files, give it a name and end the name with .css eg. myname.css

  3. upload the saved file to your live database and grab the files url.

  4. expose element id’s using the setting inside your apps settings tab and give the element your wish to change the margin of the id myID.

notes:

  • already have an element id that needs to stay? just replace #myID in the css file with #otherName.

  • need to style many elements? add more blocks like so,

    #myID1 {
    margin-left: 100px;
    }

    #myID2 {
    margin-left: 200px;
    }

8

I am wondering if I can use this to assemble and print a group of pdf documents that are saved in a field as a file.

Example:

In the database I have PRODUCTS. PRODUCTS have fields: “Item Number”, “Description”, “Price”, and “Product Information Sheet”. The last field, “Product Information Sheet” has a field type of “FILE”, and I have uploaded a PDF file that is the manufacturer’s PDF containing the product information for the product that it is uploaded to.

I have a page where I have a list of products in a REPEATING GROUP. I would like to them create a single PDF that contains all of the PRODUCT INFORMATION SHEETS for the products that are listed in the REPEATING GROUP. So if I had 10 products listed, and each product had a unique PDF file saved in the data base, when I clicked a button, I could print (or create a PDF) all 10 pages as a single document.

If your product does not do this, perhaps I can hire you to expand the functionalities of your plug-in. Or if not, maybe you can steer me in the right direction.

9

Im adding a few little tweaks aimed at this sort of issue, I will keep you posted mate.

10

@jarrad my man… I download your pro plugin, but I´m feeling really dumb trying to figure out how to use it. Do you have a tutorial or anything for me to learn?

11

here is the demo that i hav setup - https://print-pro-demo.bubbleapps.io
Live: print-pro-demo | Bubble Editor

What exactly are you trying do? is it the issue mentioned in the other post of yours?

12

Yes, exactly that. I basically need the buttom of the group (which is the length of an 8.5x11 page) page do not move downwards pushing down the rest of the groups(pages) below creating just a mess when printing. I mean if isnt possible, then a way to go around this using your app.

13

might be easier if you point me to your app so i can have a look? if not i could join the print-demo page with you, create a new page and we can try and replicate the issue.

14

In the Advanced example, I see that your invoice table is hard-coded in the HTML template to be a single row with a single item, pulled from the db using Search for…:first item.

Is it possible to create a table template that dynamically pulls in as many rows as needed, based on a Bubble DB search? I’ve looked at this example from DataTables, which seems to fit the use case, but leveraging it is above my head technically. Might be a candidate for another plugin that plays nicely w/ PrintPro?

15

Its full possible with a little bit of jQuery to dynamically populate a table with data using advanced. I might put a demo together but in the mean time i have changed the second enter an invoice name template print demo here: https://print-pro-demo.bubbleapps.io if you go: print-pro-demo | Bubble Editor what you will notice is i have kept the speed of the print by leaving as much as possible as text in a database. i have simply saved the data for each row in the database like so:

<tr><td>fruit2</td><td>food2</td><td>$32.00</td><td>12</td><td>$32.00</td></tr>

  • a row starts with <tr> and ends with </tr>
  • each column is represented by starting with <td> then the column’s content, then end it with </td> i would save my data normally and each time the database has a complete row from a purchase i will then add a row to the list by dosearchfor item findandreplace item with:

<tr><td>item</td><td>description</td><td>cost</td><td>qty</td><td>total</td></tr>

its really pretty simple yet i didnt notice any drop in speed of the print… even when i read the items twice.

Capture
Capture656Ă—728 39.8 KB

Capture
Capture654Ă—846 43.8 KB

1 Like
16

Sweet - I have been looking for something like this for months. Purchased Pro yesterday, and this will give me a little extra time to get familiar with it.

17

I appreciate the support mate! if you need anything you know where to find me. i think throw a few CSS rules at it and people will be making some of the best invoices/tickets/flyers/forms seen on bubble yet!

18

This is really interesting. It kind of forces you to go back to a text editor and compile an html template which is a little cumbersome.

However, I do see a nice use case for this when it comes to users printing something directly from a page. Add some fields with dynamic data or just open text fields and add a print button. I have a couple of things that I can make this work for.

if it can actually save the pdf as a thing in Bubble, I’m on board :stuck_out_tongue:

Great work so far @jarrad!

19

Cheers mate, its worth a mention that the same code you save as data can be printed, thrown into an iframe to display it on your site, chuck at document.write() at it and create a web page out of it. There are a bunch of API’s that allow for document templates do be customized there then pulled from your account with them (use key phases for find and replace with dynamic content.) it open up the possibility for bubble users customers to create their own templates if a service called for it. I am going to add the save to database though and possibly download convert and download. The print element action does away with code if hiding an element on the page suits the user more. Cheers for the feedback!

1 Like
20

Just purchased Pro! Thanks @jarrad. Quick question: when you update the pro plugin, how do I upgrade? Will it show up as [can upgrade] in standard plugin window in Bubble, or will you just push updates to the apps that have purchased automatically?