This quick tutorial will guide you through the steps to create a QR Code Generator application using ToolJet. The app will allow users to select a URL and generate a corresponding QR code. We will utilize ToolJet's visual app-builder to rapidly build a user interface and then connect to a Python module to generate QR codes from URLs.
Here's the preview of the application:
Prerequisites
ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Basic knowledge of Python.
Begin by creating an application named QR Code Generator.
Step 1: Design the User Interface
- Add a Container for the Header
- Drag and drop a
Container
component onto the canvas. - Name it
headerContainer
. - Set its background color to
#0a60c6ff
.
- Add a Text Component for the App Name
- Inside the
headerContainer
, add aText
component. - Set the text to "QR Code Generator."
- Style it with:
- Text Color:
#ffffffff
- Text Size:
24
- Font Weight:
bold
- Border Radius:
6
- Text Color:
- Add an Icon for the App Logo
- Inside the
headerContainer
, add anIcon
component. - Set the icon to
IconQrcode
and color to#ffffffff
.
- Add a Table with URLs and Other Information
- Drag and drop a
Table
component onto the canvas. - Name it
linksTable
. - Below is the database table structure that we are using for this application:
-
id
: Auto-generated -
title
: String -
url
: String -
description
: String
-
- Populate the
Table
component with data, based on the provided structure.
- Add a Text Component for the Table Header
- Above the table, add a
Text
component. - Set the text to "URL Information."
- Style it with:
- Text Color:
#0a60c6ff
- Text Size:
24
- Font Weight:
bold
- Text Color:
- Add a Modal for QR Code Generation
- Drag and drop a
Modal
component onto the canvas. - Name it
generateButton
. - Set the Trigger button label to "Generate QR" and the Background color to
#0a60c6ff
.
- Add an Image Component to Display the QR Code
- Inside the modal, add an
Image
component. - Name it
qrOutput
. - Use the below code for the Image component's URL property:
python data:image/png;base64,{{queries.QRGenerator.data}}
- Similarly, use the below code for the Loading state property of the Image component:
python {{queries.QRGenerator.isLoading}}
The above configuration will display the generated QR code in the Image component after we craft and run the related query(named QRGenerator
).
Step 2: Implement Functionality
- Add a Python Script for QR Code Generation
- Add a query named
QRGenerator
using the Run Python code data source. -
Use the following Python code to generate the QR code:
import micropip await micropip.install("qrcode") import qrcode from io import BytesIO import base64 def QR_Generator(): qr = qrcode.QRCode( version=1, error_correction=qrcode.constants.ERROR_CORRECT_L, box_size=10, border=4, ) qr.add_data(components.linksTable.selectedRow.url) qr.make(fit=True) img = qr.make_image(fill_color="black", back_color="white") buffered = BytesIO() img.save(buffered, "PNG") # Specify the format as a string img_str = base64.b64encode(buffered.getvalue()).decode('utf-8') return img_str QR_Generator()
This code uses the qrcode
library to generate a QR code from a selected URL in a ToolJet table component. The generated QR code is converted to a base64-encoded PNG image and returned as a string.
- Link the QR Generator to the Generate Button
- Select the
generateButton
modal and add a new event handler to it. - Set up an
On open
event to run theQRGenerator
query. - After the above configuration, the output of the
QRGenerator
query will be displayed in theqrOutput
Image component based on the earlier configuration.
Step 3: Test the Application
Select a row on the Table
component and click on the generateButton
modal to generate and view the QR code.
You can save the QR code by right-clicking on the image and selecting Save image as
. Alternatively, you can set up a Button component to download the image directly.
Congratulations
Congratulations! You've successfully built a production-ready QR code generator. This application demonstrates ToolJet's capability to rapidly design clean user interfaces and extend functionality with custom code. While we used Python code in this tutorial, ToolJet also supports JavaScript code and Custom Components for users who want to extend the platform's functionality for very specific use-cases.
For any questions or support, join the ToolJet Slack community. You can also check out the ToolJet docs to learn more!
Top comments (0)