Generate the QR Code in Salesforce: A Simple Guide

Table of Contents

    The Significance of QR Codes in Salesforce

    A QR code (Quick Response) is a two-dimensional barcode that stores data like text or URLs. It’s commonly used for quick data retrieval, such as in mobile payments or product labeling. Scan it with a QR code reader to access the stored information.

    The integration of QR codes in Salesforce can offer several advantages, enhancing user experience, data accuracy, and operational efficiency. Here are some key reasons for the importance of QR codes in Salesforce:

    • Efficient Data Handling:
      • Accelerates data input and retrieval processes.
      • Reduces manual entry errors by scanning QR codes linked to Salesforce records.
    • Event Management:
      • Simplifies event check-in with QR codes on badges.
      • Enhances overall event experience by speeding up registration processes.
    • Marketing and Lead Capture:
      • Facilitates quick access to product information and promotions.
      • Streamlines lead capture during marketing campaigns or events.
    • Field Service Operations:
      • Aids technicians with quick access to equipment information.
      • Ensures faster issue resolution by providing essential service details.
    • Authentication and Security:
      • Enhances Salesforce platform security with QR codes for login or two-factor authentication.
    • Mobile Application Integration:
      • Streamlines onboarding by using QR codes for app downloads or activations.
    • Trackable Campaigns and Analytics:
      • Enables tracking of marketing campaign success through QR code analytics.
      • Provides insights into user engagement and campaign effectiveness.
    • Customization and Branding:
      • Allows customization of QR codes to align with brand aesthetics.
      • Incorporates logos and design elements for a consistent brand image.

    Step-by-Step Guide to Create QR Code in Salesforce using Formula Field:

    Here are step-by-step instructions for creating a QR code for an Account in Salesforce:

    1. Navigate to the Setup:
      • Go to Object Manager -> Select the Account Object
    2. Create a New Formula Field:
      • Inside the Account object, navigate to Fields & Relationships and click “New Field.”
      • Choose the formula field type and proceed to the next step.
    3. Configure the Formula and Save the Field:
      • Name the formula field (e.g., “QR Code”).
      • In the provided example, the formula incorporates the Account’s website URL into the generated QR code.
      • Select Text as the Formula Return Type and continue to the next step.
    4. Select “Advanced Formula” and choose the “Image” function from the list of available functions.
    5. Insert the following formula: IMAGE(‘https://chart.scrippter.com/chart?cht=qr&chs=57×57&chl=’+ Website, ‘Scan the QR code to instantly open the website on your mobile device.’) in GenereateQRCode(Text) and Click on Next.
    6. Here, the Website field is used to provide the account website URL link in the QR Code.
    7. Select the profile(s) for which you want to display this Field, then proceed to the next step.
    8. Next, select the Page Layout(s) where you want to show this field and click on the Save button.
    9. Navigate to an Account record to view the QR code generated by the formula field.

    How to Generate QR Code using LWC:

    Using Lightning Web Components (LWC) for QR code generation offers advantages in scenarios where dynamic content, integration with external systems, enhanced user experience, offline support, custom logic and validation, and cross-platform compatibility are required.

    While custom formula fields suffice for basic QR code generation needs, LWC enables more flexibility, customization, and integration capabilities, making it suitable for complex or dynamic use cases.

    Implementing QR Code Functionality with Lightning Web Components

    1. The initial step is to create a zip file named QRCodeLibrary and include the “qrcode.min.js” file within this zip file.
    2. Upload the Zip file in the static resource and proceed to save
    3. Below are the files for the LWC component named “createQRCode,” which we have designed to dynamically create a QR code.
    HTML Document: (createQRCode.html)
    <template>
        <lightning-card >
            <div class=”slds-p-around_small”>
                <div class=”slds-text-heading_medium  slds-p-bottom_medium”>Scan the QR code to connect
    with us on Twitter! Follow us for updates and news.</div>
                <div class=”qr-code-container” lwc:dom=”manual”></div>
            </div>
        </lightning-card>
    </template>

    JS Document (createQRCode.Js)
    import { LightningElement, api, wire } from ‘lwc’;
    import { loadScript } from ‘lightning/platformResourceLoader’;
    import QRCodeLibrary from ‘@salesforce/resourceUrl/QRCodeLibrary’;
    import generateQRCode from ‘@salesforce/apex/QRCodeController.generateQRCodeData’;

    export default class CreateQRCode extends LightningElement {
        @api recordId;
        qrCodeUrl;

        // Wire the Apex method to fetch QR code data
        @wire(generateQRCode, { accountId: ‘$recordId’ })
        wiredQRCodeData({ data, error }) {
            if (data) {
                this.qrCodeUrl = data;
                this.loadQRCode();
            } else if (error) {
                console.error(‘Error in wiredQRCodeData:’, error);
            }
        }

        // Load the QR code library and render the QR code
        async loadQRCode() {
            const container = this.template.querySelector(‘.qr-code-container’);

            // Clear existing content
            container.innerHTML = ”;

            // Create a new element for the QR code
            const qrCodeElement = document.createElement(‘div’);
            container.appendChild(qrCodeElement);

            // Load QR code library
            try {
                await loadScript(this, QRCodeLibrary + ‘/QRCodeLibrary/qrcode.min.js’);

                // Generate QR code using QRCode library
                new QRCode(qrCodeElement, {
                    text: this.qrCodeUrl,
                    width: 200,
                    height: 200,
                });
            } catch (error) {
                console.error(‘Error loading QR code library:’, error);
            }
        }
    }

    Apex Class (QRCodeController.cls)
    public without sharing class QRCodeController {
        public QRCodeController() {
        }
        @AuraEnabled(cacheable=true)
        public static string generateQRCodeData(String accountId){
            try {
                String twitterHandleUrl = [SELECT Twitter_Profile_Link__c FROM Account WHERE Id = :accountId LIMIT 1].Twitter_Profile_Link__c;
                return twitterHandleUrl;
            } catch (Exception e) {
                throw new AuraHandledException(e.getMessage());
            }
        }
    }
    By implementing this code you will be able to generate QR code dynamically

    QR Code Generated by LWC Component

    Generate QR Codes Automatically for Health Verifications:
    https://help.salesforce.com/s/articleView?id=release-notes.rn_safety_cloud_qr_code_gen.htm&release=236&type=5

    Also Read: Salesforce Spring’24 Release New Features