1 min to read

QR Code Generator

Imagem de capa

Lightning Web Component: QR Code in Salesforce

As a developer, some of you might have needed to generate QR code for your Salesforce applications. Traditionally, we all have used APIs for this purpose as they are very simple and easy to implement. For a recent requirement, I used the same approach for generation of QR Code in my Lightning Web Component. But what if they get deprecated? So, I tried creating ES6 code for the generation of QR-Code in my Lightning Web Component.

For this, you just need to pass a string for which the QR-Code will be generated and displayed on the UI of your component.

There are 4 simple steps through which you can generate the QR-Code.

  1. Create a Lightning Web Component

  2. Add a module to the component named qrcode.js in the same folder as your LWC. Paste the following code in qrcode.js file:
    Copy the qrcode.js file from folder path GitHub
    (link to file can be found within qrcode.js

  3. Import the Module added in the components.js file to your components js file as shown in the snippet below:

    JS Controller

    Img2 – JS Controller Of The Component

  4. Now add the following code to your HTML file:

    HTML markup of the controller

    Img2 – HTML Markup Of The Controller

Generated QR code

Img2 – Generated QR Code

There you go… You have successfully created the QR-Code in your LWC!

Here is the link to the code base for your reference: https://github.com/shivanirathi21/LWC-QRCode

Give it a shot and let me know all about it.

Written by Shivani Rathi, Systems Executive at Eternus Solutions_