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?

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

2 Answers 2

Reset to default
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>
Improve this answer
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. Commented Jun 16, 2023 at 22:02
  • @mackmama what's now the string stored in this.qrCode? Commented 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 Commented 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: Commented 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.

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

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.