im pretty sure i can pull it with code…
cool, I’ll stop banging head against wall and wait for the plugin 
I did, in the meantime, get a data-rich template coded up (w/ ugly CSS) that pulls data from Bubble, and even automatically adds rows to a table in the PDF using a variation of your find/replace tip earlier in this thread. Every data point in the sample report below is being pulled from Bubble searches including parsing lists into rows:
1 Like
It’s a little easier to show you on GrapesJS (go to http://grapesjs.com/demo.html and then click on the “</>” symbol that shows you the code. It’s at the top of the page), but TinyMCE will produce the same information (HTML and CSS). TinyMCE has a full API that let’s you do just about anything you want with it (below), including modifying the menus, adding custom functions, changing the UI, etc.
API Reference
tinymce
tinymce
tinymce.AddOnManager
tinymce.Editor
tinymce.EditorCommands
tinymce.EditorManager
tinymce.EditorObservable
tinymce.Env
tinymce.Event
tinymce.FocusManager
tinymce.Formatter
tinymce.NotificationManager
tinymce.Plugin
tinymce.Shortcuts
tinymce.Theme
tinymce.UndoManager
tinymce.WindowManager
tinymce.dom
tinymce.dom.BookmarkManager
tinymce.dom.ControlSelection
tinymce.dom.DOMUtils
tinymce.dom.DomQuery
tinymce.dom.EventUtils
tinymce.dom.RangeUtils
tinymce.dom.ScriptLoader
tinymce.dom.Selection
tinymce.dom.Serializer
tinymce.dom.TreeWalker
tinymce.geom
tinymce.geom.Rect
tinymce.html
tinymce.html.DomParser
tinymce.html.Entities
tinymce.html.Node
tinymce.html.SaxParser
tinymce.html.Schema
tinymce.html.Serializer
tinymce.html.Styles
tinymce.html.Writer
tinymce.ui
tinymce.ui.AbsoluteLayout
tinymce.ui.Button
tinymce.ui.ButtonGroup
tinymce.ui.Checkbox
tinymce.ui.Collection
tinymce.ui.ColorBox
tinymce.ui.ColorButton
tinymce.ui.ColorPicker
tinymce.ui.ComboBox
tinymce.ui.Container
tinymce.ui.Control
tinymce.ui.DragHelper
tinymce.ui.ElementPath
tinymce.ui.Factory
tinymce.ui.FieldSet
tinymce.ui.FilePicker
tinymce.ui.FitLayout
tinymce.ui.FlexLayout
tinymce.ui.FloatPanel
tinymce.ui.FlowLayout
tinymce.ui.Form
tinymce.ui.FormItem
tinymce.ui.FormatControls
tinymce.ui.GridLayout
tinymce.ui.Iframe
tinymce.ui.InfoBox
tinymce.ui.KeyboardNavigation
tinymce.ui.Label
tinymce.ui.Layout
tinymce.ui.ListBox
tinymce.ui.Menu
tinymce.ui.MenuBar
tinymce.ui.MenuButton
tinymce.ui.MenuItem
tinymce.ui.MessageBox
tinymce.ui.Movable
tinymce.ui.Notification
tinymce.ui.Panel
tinymce.ui.PanelButton
tinymce.ui.Path
tinymce.ui.Progress
tinymce.ui.Radio
tinymce.ui.ReflowQueue
tinymce.ui.Resizable
tinymce.ui.ResizeHandle
tinymce.ui.Scrollable
tinymce.ui.SelectBox
tinymce.ui.Selector
tinymce.ui.Slider
tinymce.ui.Spacer
tinymce.ui.SplitButton
tinymce.ui.StackLayout
tinymce.ui.TabPanel
tinymce.ui.TextBox
tinymce.ui.Throbber
tinymce.ui.ToolTip
tinymce.ui.Toolbar
tinymce.ui.Widget
tinymce.ui.Window
tinymce.util
tinymce.util.Color
tinymce.util.Delay
tinymce.util.EventDispatcher
tinymce.util.I18n
tinymce.util.JSON
tinymce.util.JSONRequest
tinymce.util.LocalStorage
tinymce.util.Observable
tinymce.util.Tools
tinymce.util.URI
tinymce.util.XHR
1 Like
Hello @jarrad, can you explain with more detail how you created the invoice? Also, before the PDF is created, printed etc. would it be possible to display this on a webpage first?
Anything for the dude! 
in basic terms is a html webpage’s source code. In the case of using say the easy template action where you see the one box for the html you can go many ways about it but here is an easy one,
-
Open microsoft word and make your template.
-
Click save as and change the file type from a word document to web page and save it to your desktop.
-
Go to your new document on the deskop and open it. You should be seeing your word document in your web browser as a webpage.
-
Right click in the page and click view source. What your now looking at is the souce code, the actual html that produces that webpage.
-
Copy it, then paste it into the plugin’s html box.
Notes:
Remember images and included items will need to be stored in your sites database so upload them and remember to change the html. So grab the image’s url and in the html find the image’s name and change the src="/mypic.jpg" to be src=“https:MYURL/mypic.jpg”
For dynamic content give yourself key words to look for, so in word if you want a customers name to appear you would put BUBBLE CUSTOMER NAME. Now when you look at the code you will be able to spot the uppercase words BUBBLE CUSTOMER NAME and replace them for a dosearch for this invoice’s customer’s name.
Don’t have word? Use this https://www.quackit.com/html/online-html-editor/full/ then click source when finished in the top left. dont want to use that, there are thousands of others just google html source code generators.
Hope that helps a bit.
1 Like
To answer your other question, yes you can show it before you print. You can simply put a html element down with the same content you have in the plugins properties.
“anything for the dude” - LOL, - Ok, the webpage stuff I get, its then populating with dynamic data, like a table or a list that escapes me. What you did in your Invoice example and what @djwideman did in his therapy form is exactly what I need to do to create reports. I can then use your plugin to print etc. Can you help me with that?
Yer mate i can help you with that, lets say you sell 2 products and i just bought 1 of each. no doubt there would be something in your database reflecting the product being added and the quantity and so on. when i click add 1 of product 1 and add 1 of product 2 you should be creating something like an order at this point - each click i would have a text field, with this field is a list checked in the data base called rows (ontop of what you already use - this is purely for making the invoice.)
now if i click add 1 of product 1 you would add to the list of invoice rows (leaving all tags in place only replacing the item, description, price, quantity & total with product 1’s data i just clicked on to buy.) -
<tr><td>fruit2</td><td>food2</td><td>$32.00</td><td>12</td><td>$32.00</td></tr>
Now the particular template we have as a sample (already there in the plugin if you want to use it) has a table for the area that the invoice items are being displayed. the template understands that <tr> is a new line in the invoices products and the <td> is the next column. so when we dosearch for this invoice’s rows it will put the above text in for each product purchased and this means when the html renders it will format that text as entry’s in the table.
1 Like
So the light may be dawning… does the database entry have the tags “attached” to it? so if I looked in the database the data would look like item1 or is this added via workflow? and would this be better served if we PM’ed?
feel free to PM if you like im easy, to answer your question though, yes the exact quote including the tags you have there is one of the list of text’s you would find in the database and it is one row in the invoice.
To your database this is just text, to html being rendered this is the job and by dynamically making this text at product purchased stage contain dynamic data we have effectively created a dynamic portion of a web page that Print Pro treats as a printable document.
Hi,
Thanks for the plugin. I went to the plug bubble store and read the notes. There is mention of exposing element ID’s. Am not sure where exactly in settings I can do this. I am also not sure how to assign element id’s to elements. Are you able to assist?
Thanks and regards,
Phuthi
Hi, I can help with that its really very easy.
- open your app and on the left ahnd side click settings, then general.
- look 4 down from the favicon section you will see a check box. check the box an you have now exposed the id’s.
To give an element an id is really easy to, just double click on the element so that the properties box opens up and its found at the very bottom.
Remember to never use the same id for another element.
thats it your done!
Ahh, I see, got it thanks for the assist.
anytime!
Can I use a list of ID’s to print elements or do I need to create a different action for each ID?
It depends on the use really. lets say you have 20 text boxs on a page that you want to print, you would just create a group bigger than those text boxes and put them in it. that way you would just name the outer group as the element to print.
Thanks, so if I have groups that are stand alone (same level) can I just list each ID separated by a comma for example?
no if you want to keep them stand alone you would need multiple action. i might look at adding this in the next update it was really just a way of making sure no app or id would have an issue with needing to use the separating character.
Great, thanks for the plugin once again, great stuff.
1 Like