1 min to read
QR Code Generator
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.
- Create a Lightning Web Component
-
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 -
Import the Module added in the components.js file to your components js file as shown in the snippet below:
Img2 – JS Controller Of The Component
-
Now add the following code to your HTML file:
Img2 – HTML Markup Of The Controller
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_
Comments