Creating QR Codes for Database Entries in Bubble
In this Bubble tutorial video, I'm going to show you how you can create QR codes that link to a specific entry in your Bubble database. This can be particularly useful if you have a sharing feature as part of your app, and you want your users to be able to share with one another QR codes and be able to link through to a particular place in your app, and show a particular record in your app. For the purpose of this demonstration, I'm going to be using some contacts, and generating a QR code for a contact that then links through to a specific contact page to show those contacts details.
Introduction to Planet No Code
But before I launch into that, if you're learning Bubble, then you should check out our website planetnocode.com, because we've got hundreds of Bubble tutorial videos, literally hours and hours of content to help you launch the Bubble app of your dreams. But let's launch into this one where we're looking at QR codes.
Setting Up the Repeating Group
So I've got a repeating group here listing through contacts, just so you've got an idea. I've got this contact field I've used in Data Type that I've used in previous demos, and you can see here that my QR code image field is all empty. I've then gone ahead and installed this plugin here, Barcode and QR Code Generator. And I'm not needed to add that to my design. Some plugins you have to add an element to the page. You don't have to add this one. It's just a workflow action.
Previewing the QR Code Generation
To demonstrate what's going to happen, let's bring in the preview. So each cell of my repeating group represents one contact in my database. And I have this field here, or this text label actually, showing a link. And this is the link that I want to put into my QR code. And it's a link to a page in my app called Contact, followed by the unique ID of this contact. And I'm going to show you how I build that, because that's what we pass into the QR Code action in the workflow.
Building the Link for QR Code
So I've got here, it says Current Cells - Contact. And then, if I go back a step, Current Cells - Contact, and then I go to the Link option. And this is not a field I've created. This is a field that Bubble creates for you, for your Data Types. And so then I need to pick a page which this link is going to end up at. And that page needs to be, if I show you here, here's my contact page. Here's my page ready to show this contact. And the page needs to be set to type of content that data type, in this case, contacts.
Setting Up the Workflow
That's how, if I go back to my QR Code page demo. That's how, of all my pages, Bubble knows that it can link contacts through to the contact page. If you had other pages where the type of content was set to contacts, you could choose which ones to link through to. And Bubble builds the link for you. So all I need to do is add the button. And I choose the Create a Basic QR Code action. Add it in because of the plugin. And the parameters I've got in here. Data is Current Cells - Contact Link. Again, I've built the same link that I'm previewing on the front end. And I've put in my website, Home URL, simply because it asked me to do that.
Saving the QR Code
And then I want to upload it, because I want to save it. And then I create a file name for the QR Code image, which is QR- and then the current Sales Contact's unique ID. That's just in case I need to debug it. I can search for that in the file manager and in the database. I then update, make changes to contact, Current Sales Contact. And I take the result of step 1's Base64. That's because it explains here that it generates a Base64 file, which is just a way of expressing an image. And I can save that into an image field, in this case I've named it QR Code, on my contact.
Testing the QR Code
So, let's preview that. So I say Generate QR Code. And I just have to wait for it here. And there it has generated a QR Code. And I've tested this, you just have to take my word for it, because I can't get my phone on this screen share. But, yeah, that QR Code links through to this URL. And that is how you can link to a specific entry in your Bubble database using a QR Code.