0

I have this formula field that shows the generated qr code on the record detail page:

IMAGE('https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://www.yahoo.com' ,'QR code to open yahoo')

I need to display this qr code in an lwc. Adding it as a text field shows the code above. Using IMG and setting the value as src doesn't work either.

js

@wire(getEval, { recordId : '$recordId' })
eDetails({ data, error }){
    if(data){
        this.nameOnCard = data.Name_on_Card__c;
        this.qrCode = data.QR_Code__c;
    }else if(error){
        console.log('ERROR ----- ', JSON.stringify(error));

    }
}

HTML:

                        <div class="slds-grid" >
                            <div class="slds-col slds-truncate">
                                <img src={qrCode}>
                            </div>
                        </div>

****Update From the console, I can see the value of qrCode is:

<img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=https://www.yahoo.com" alt="SQR code to open yahoo" border="0"/>

so it looks like it's ready to just work. . . no need to add to img tag as src. Problem is, it just displays the value above when I need it to render the HTML contained in qrCode.

Any ideas on how to display the actual qr code (like on the record detail page) in an LWC?

2
  • Have tired displaying the url as: <img src={qrCodeUrl}>? You have to wire the qrCodeUrl with the value from the formula field.
    – Arnold Jr.
    Jun 16, 2023 at 19:23
  • @arnoldjr - I just added some snippets. I think that's what you mean? That doesn't work, unfortunately.
    – mackmama
    Jun 16, 2023 at 20:04

2 Answers 2

1

As you noted the IMAGE function outputs an img tag, but you could extract both the src and alt attribute from that string via substring(startIndex, endIndex) function:

alternateText;

@wire(getEval, { recordId : '$recordId' })
eDetails({ data, error }){
    if(data){
        this.nameOnCard = data.Name_on_Card__c;
        const srcStartIndex = data.QR_Code__c.indexOf('src="') + 5;
        const srcEndIndex = data.QR_Code__c.indexOf('"', srcStartIndex);
        this.qrCode = data.QR_Code__c.substring(srcStartIndex, srcEndIndex);
        const altStartIndex = data.QR_Code__c.indexOf('alt="') + 5;
        const altEndIndex = data.QR_Code__c.indexOf('"', altStartIndex);
        this.alternateText = data.QR_Code__c.substring(altStartIndex, altEndIndex);
    }else if(error){
        console.log('ERROR ----- ', JSON.stringify(error));
    }
}

Then in the template you could have:

<div class="slds-grid" >
    <div class="slds-col slds-truncate">
        <img src={qrCode} alt={alternateText}>
    </div>
</div>
4
  • I had to replace a couple of &amp; with &. I could then copy that URL and see the qr code when I pasted the URL in a browser. I still don't see anything in the lwc.
    – mackmama
    Jun 16, 2023 at 22:02
  • @mackmama what's now the string stored in this.qrCode?
    – RubenDG
    Jun 16, 2023 at 22:04
  • https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://xxxxxx--xxx.sandbox.my.site.com/sap/s/?recordId=a4xxxxxx0Wjjk a little more than Yahoo.com but I wanted to make easier
    – mackmama
    Jun 16, 2023 at 22:10
  • 1
    this got me almost there . . one more thing - I needed to go to Setup/Security/CSP Trusted Sites and add: *.googleapis.com. I didn't see the error right away after I implemented @RubenDG's code Refused to load the image 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://xxxxxx--xxx.sandbox.my.site.com/xxx/s/?recordId=a2i3S0000xxxxxxxk' because it violates the following Content Security Policy directive: "img-src 'self' data: blob:
    – mackmama
    Jun 17, 2023 at 2:35
1

As I mentioned in my comments, you could use <img src={qrCodeUrl}>. Here I put it together as a draft, but technically it should work.

HTML:

<template>
<lightning-card title="QR Code" icon-name="action:scan_enabled">
    <div class="slds-grid">
        <div class="slds-col slds-truncate">
            <img src={qrURLData}>
        </div>
    </div>
</lightning-card>
</template>

JS:

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import QR_CODE from '@salesforce/schema/Contact.QRCode__c';

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

get qrURLData(){
    if(this.qrCodeUrl){
        return this.qrCodeUrl;
    } else{
        return null;
    }
}

@wire(getRecord, {recordId: '$recordId', fields: [QR_CODE]}) handleDataRes(response){
    if(response){
        let qrCodeField = getFieldValue(response.data,QR_CODE);
        if(qrCodeField){
            let qrURL = qrCodeField.split('(')[1].split(',')[0].split("'")[1]; 
            this.qrCodeUrl = qrURL;
        }
        
    } else{
        console.log('Error within Wire');
    }
  }
}

You have to ensure you properly wire the data coming from your custom field and extract it using a split/regex or other JS string operation.

Result:

enter image description here

I've used my Trailhead account. Added a RecordPage LWC to display the QR Code on the Contact record page.

1
  • thank you. I'll try this and let you know asap
    – mackmama
    Jun 16, 2023 at 22:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .