Create a QR Code Generator Using ToolJet and Python in 5 Minutes! 🛠️

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

1. Drag and drop a Container component onto the canvas.
2. Name it headerContainer.
3. Set its background color to #0a60c6ff.

- Add a Text Component for the App Name

1. Inside the headerContainer, add a Text component.
2. Set the text to "QR Code Generator."
3. Style it with:
   • Text Color: #ffffffff
   • Text Size: 24
   • Font Weight: bold
   • Border Radius: 6

- Add an Icon for the App Logo

1. Inside the headerContainer, add an Icon component.
2. Set the icon to IconQrcode and color to #ffffffff.

- Add a Table with URLs and Other Information

1. Drag and drop a Table component onto the canvas.
2. Name it linksTable.
3. Below is the database table structure that we are using for this application:
   • id: Auto-generated
   • title: String
   • url: String
   • description: String
4. Populate the Table component with data, based on the provided structure.

- Add a Text Component for the Table Header

1. Above the table, add a Text component.
2. Set the text to "URL Information."
3. Style it with:
   • Text Color: #0a60c6ff
   • Text Size: 24
   • Font Weight: bold

- Add a Modal for QR Code Generation

1. Drag and drop a Modal component onto the canvas.
2. Name it generateButton.
3. Set the Trigger button label to "Generate QR" and the Background color to #0a60c6ff.

- Add an Image Component to Display the QR Code

1. Inside the modal, add an Image component.
2. Name it qrOutput.
3. Use the below code for the Image component's URL property: python data:image/png;base64,{{queries.QRGenerator.data}}
4. 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

1. Add a query named QRGenerator using the Run Python code data source.

2. 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

1. Select the generateButton modal and add a new event handler to it.
2. Set up an On open event to run the QRGenerator query.
3. After the above configuration, the output of the QRGenerator query will be displayed in the qrOutput 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!