Mastering Bubble.io: How to Generate Professional PDFs from a Word Template

Introduction to Comnoco

So I'm joined again by Stuart, the founder of Comnoco, and he's going to guide us through a demo of an issue that I've seen a lot of Bubble App builders struggle with, which is how to generate a high quality PDF from data in your Bubble App. So Stuart, over to you. You're going to guide us through this demo and show us just how simple and easy it can be.

Overview of Comnoco

Yeah, I'd love to. Thank you. So yeah, here we are. This is Comnoco. So Comnoco is a no-code visual programming language. You can use it to build backends, you can use it to build your own APIs, you can use it to handle webhooks, you can use it to run scheduled tasks. And it's got its own way of building in a very no-code way.

Getting Started with Comnoco

So the first thing we do is go to the app. And once you're here, you can sign up or log in. So I will log in. And once we're in, you will go to your team. You'll only have one. Mine's very busy. And then you can create a new workspace for your project. So here's one I created earlier for us. So I'm going to go into the workspace.

Creating a PDF Generator Function

So the aim of what we're going to do now is we're going to essentially pretend that we're taking maybe some JSON data that another system, Bubble, perhaps has provided. And we're going to generate a PDF and we're going to send it back.

Understanding Comnoco's Structure

So in Comnoco, there's a few things just to know about it. The first is that everything you build, you build as a function. So you can build loads of functions individually and you can use them how you want. So you can build your own reusable blocks of functionality, hence functions. And those functions you can put inside a file just to keep them organized. So you could have a file for all of your Stripe connectivity. You could have a file for all of your PDF generation, whatever you wanted. That's just to keep organized.

Creating Triggers in Comnoco

And then once you've created a function, you need to expose it to the outside world or you need to run it on a schedule. So once you've created a function, you need to just create a trigger, which is what either turns it into an API or a scheduled task or a webhook receiver, whatever it might be.

Creating a PDF Template

So let's dive in. So the first thing we want to do is we're going to create a PDF. And then we'll expose that via an API. So we're going to keep this quite simple. We've got some some JSON that the other systems giving us and to create a PDF. What you do in Comnoco is you actually create it from a Word document or a LibreOffice document. And the idea is that just keeps it really simple. That's kind of what your customers will give you. They'll say, can you make this into a PDF? And you go, sure. Give us a Word document of it. Saves you having to build it all. It's sort of little shortcut cheat and it fulfills almost all of business requirements, really.

Setting Up the Document Template

So in here you can go and you can create a document template. And once you do that, you can call it demo invoice. Create the document. And this brings us to a Comnoco file, the Logix tree. Now I'm just going to zoom in a bit for you. And in Comnoco, basically, we guide you through what you can and can't do at any stage. So we're in in a document file. So when you click here, you get shown the different ways of creating a document. At the moment, there's only docx to PDF. We've got plans on the roadmap for HTML to PDF as well.

Understanding Comnoco's Tree View

So you click that on there. And then you get given the sort of skeleton tree of what you need to do. So Comnoco builds in a tree view, which is just a sequence of instructions. Do this, do this, do this, do this, et cetera. And by having it expandable as a tree, you can really peel back the layers and add loads of functionality to every point in Comnoco. Everything is programmable, but we probably won't see that today. We're going to keep it quite simple. But you can think of this an alternative to the sort of flow charting stuff you see in other no-code tools.

Uploading the Template File

So to create our document, the first thing we want to do is is upload a template file. So we're going to create an invoice. And I did create one earlier. So here it is. There's a preview of it. So here's our Word document. So if you upload that, that is now ready.

Defining JSON Data

And then the next thing I need to do is say when we create this file, we're going to have received some data. Now, we're just going to receive some JSON. So you could define everything manually, but I'm just going to define JSON, which is a data structure. So we can call this invoice data, for example. And that's that. And now just to give it some sample data, you can load data from JSON or XML.

Loading Sample Data

So I should have some on my clipboard. There I do. So if you upload that, you'll see Comnoco takes that data in and it converts it into typed blocks. So what that means is that Comnoco knows what's a date, what's text, what's number. And it will only allow you to do number things on numbers and text things on text. So it just sort of helps you. But here's our data.

Understanding the Data Structure

So if you look at this data, you can see it's an order. And inside the order, you've got information about the customer. You've got the order date and then you've got the order items of which there are four items.

Manipulating Data for the Template

So the next thing you need to do is basically manipulate your data. So you might want to do things. And in fact, we probably want to add a total because that is missing a total. And we're going to calculate it a little later and pass it in. So I'm going to add another input here and just call this total. And now I'm going to build my data, so I want the data that I passed to my template, which, by the way, apologies, looks like this.

Explaining the Template Structure

So as you can see, I've set it up to take the order date, which is the order date and the order ID. You've done nothing special with that. This is just a Word document that you put some curly brackets around the fields you want to insert data into.

Adding Dynamic Data to the Template

Yeah, absolutely. And there's there's certain syntax, for example, when you're in a table, you can look through rows by wrapping them in this. So this will do multiple items for those items. And you can do conditional sections. You can do images if you want. You can do links, that sort of thing. But we're just keeping it simple today.

Calculating the Total

So that's what it looks like. Now, in the data that we have, correct, in the data that we have here, it's missing the total. So what we're going to do is add that total to that data, which can then be passed into here. So this total here is zero. I can give it some test date. Let's just give it a number there.

Adding Data to the Template

So first of all, we're going to take the raw data that's coming in, which is this invoice data. So as you see, rushing ahead here, every time you click on an item or replace an item in Comnoco, you can add some functionality. So we could get data from DynamoDB query or something, but we're just going to take it from the input parameter that we added called invoice data. And we're just going to add that to our template data, which is this here. So that is what gets fed into our template.

Running the Template

So if we run this, that's going to make that input data filled with the data that we were passing in. So that's now ready to run to the template. And in fact, we could now run this template, run the whole thing. And we should see, oops, we go back here, run it. You will see the PDF that's generated. And as you can see, it's filled it in as we want, just from those curly brackets. And it's done the repeating items here. But this total is undefined. And that's no surprise because we didn't pass that into this template data.

Matching JSON Keys with Template Fields

So we just need to make sure that gets... And it's filled in because the parameter, the keys, the key names that you put in the JSON are identical to what you had in the curly brackets in the document. Correct. Correct. Yeah, that's right. So you just need to glue that bit together in Microsoft Word.

Adding the Total to the Object

So all I need to do here is add an item to the object. And the object I want to add it to, if I click here, is... Let's just run this. The object I want to add it to is the order. I want to add it called total. And the item I want to add is this number coming in. But instead of just adding the number, I'm going to format it.

Formatting the Total as Currency

So if I do format number as text, that now is asking what number do you want to format. So we'll just click that. And I want to choose from my input parameters this total. So as you see, those are linked. Now on my formatting, I can go over here and I can say, make it a currency and give it the rich pound symbol and give it two decimal places.

Testing the Formatted Total

So if I've got that right and we run that again, you should see this change and be filled in with a total. A fictional total, obviously, that I just put there as sample data.

Making Fields Dynamic

Something that you pointed out to me on the call a few weeks ago is that any field, you can make it dynamic. So it will be really easy to run a invoicing system where you could swap out the currency. That's right, isn't it?

Explaining Dynamic Fields

That's absolutely correct. So if I go back to this formatting here, so any field can be dynamic and programmed. So at the moment, we've just chosen it as a property. But if I were to click that button there, it puts it on this tree, as we call it. And again, that's why we have the tree. And then I could replace that and I could wrap some logic around it, you know, based on this, make it that currency or something, or I could map it to the incoming data. So basically anything can become dynamic in that sense. So, yes, absolutely. But in the in the spirits of keeping it simple, we'll put that back today.

Creating an API for the PDF Generator

So this is it, really. We've created our PDF. Now let's glue it together and create an API to call this. So let's just save that. And now we can go back to our dashboard. So basically, if you look at these files, what we've created is we created a template, but there's no logic exposing that to anything. There's no logic handling that as an API. So let's go and do that.

Setting Up the API Function

So if we create a new collection for this and we just call it demos. This is going to look similar, but it's not it's no longer a template. It's for adding functions. So here we have an empty file in which we can put one to many functions to do things. And again, you start by doing this. So when you click here, because we're at the top level.

Explaining Collections in Comnoco

So a collection is to allow you to group the different parts of what you're trying to make together into one start to finish operation. No, it's not necessarily start to finish. It's just literally for your organisation. So you might have a collection that is all of my date formatting, all of another collection, all of my number formatting, another collection handling all of my Web hooks from HubSpot, whatever it might be. But the collections can talk to each other. So it is literally just a way of organising them so you know where to find them. It's keeping keeping organised yourself. You could do everything within one collection if you want. You could create a thousand functions and time altogether. It's entirely up to you. But we recommend obviously separating them out so they're easier to find, easier to maintain. And so that if you make a change to one collection, you know, you haven't touched all of your other no code functions elsewhere.

Creating an API Function

So here we've clicked on the top level, I'll just remind you, click here and it says, OK, what kind of function do you want to add? And so it's in common. It's quite cool. You've got different functions. So if you add an API function, basically you're creating it and the only way it can ever be called is via an API trigger. Likewise, if you create a Web hook receiver, the only way it can ever be called is via Web hook. And the difference between these two is in how you define things. For an API function, you'd be able to say, I want to take this in. I want to take this and I want to take this and I'm going to give this, this and this back. You get to define it. You control it. Whereas if it's a Web hook, it's another system like HubSpot, whatever it might be. And they just dump data at you. So you don't define anything. You just get given a big chunk of incoming data. So that's the difference between them. It just helps you build them. A schedule function obviously is one that's just going to run on whatever schedule you define. And a component function is something where you can build your own functionality in common code that you can reuse a million times. So maybe you're constantly searching Google Drive for documents that match a certain name. You could create that as a component function and then use it in 10 API functions if you want.

Setting Up the API Function for PDF Generation

So we are just going to create an API function today so that we can call it from something else. So let's create API function. We'll call this GenPDDF. OK. And again, this gives us our skeleton. So being an API function. It's got a few things. It says what do you want to define as inputs to the API? And what are you going to give back as outputs? So we can set those up in a second. If you're doing any internal stuff, you can add internal parameters or variables there that you can read and write from. And then you define your logic. So take this in, work with these, do this, return that, basically.

Defining API Inputs and Outputs

So we are going to do roughly the same. So our input is just going to take order data, I think we're going to call it. So let's just call this. Order data. So that's our input. And that order data we want to send in. Yeah, as the body of our API. OK, so that's done. And let's load some sample data for that as well so we can play with it. So the same sample data I had. Just make sure it's on my kit cord. There we go. Right. So we've got our sample data in. I should probably show you another way to get sample data. So we'll do that in a second.

Calculating the Total in the API Function

So we're going to do that. Now, we're also going to calculate the missing total in the order in this. So this function is going to calculate the missing total and then pass it to the template. So to do that, we just need somewhere to put it, which would be a number. And we'll call this calculated total. OK, so that's where we're