Embed in a Custom LWC

Embedding the Barcode Component in Your Own LWC

If you build custom Lightning Web Components, you can reuse the Barcode and QR Code Generator component inside your own markup instead of placing it through the Lightning App Builder. The component reads a Barcode Config record by name and renders the barcode from the current record’s field value — exactly as it does on a record page.

Prerequisite: The package must be installed and the Barcode & QR Code Permissions permission set assigned to the running user. You also need a saved Barcode Config record. See Assign Permissions and Lightning Experience Setup.

Component reference

The managed-package component is exposed under the barqr namespace.

Markup tag <barqr-barcode-and-qr-generator>
Namespace BarQR

It accepts the following public (@api) properties:

Property Type Required Description
config-name String Yes The Name of the Barcode Config record to render. Must match the config name exactly.
record-id String No The Id of the record to pull field data from. On a record page this is supplied automatically; in a custom component you usually pass it explicitly.
component-height Integer No Height of the component in pixels. Defaults to 200.

Example

Reference the component in your LWC’s HTML template and pass the config name (and a record Id if your component is not already record-bound):

<!-- myComponent.html -->
<template>
    <barqr-barcode-and-qr-generator
        config-name="Lead_Email_QR"
        record-id={recordId}
        component-height="220">
    </barqr-barcode-and-qr-generator>
</template>

// myComponent.js
import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
    @api recordId; // provided automatically when placed on a record page
}

The component fetches the configuration and the field value when it is connected, then renders the barcode. If the Config Name is misspelled or the running user lacks permission, no barcode is shown.

{/* TODO: screenshot — custom LWC rendering the embedded barcode component */} Embedded barcode component placeholder

Notes

  • The config-name must reference an existing, saved Barcode Config record — see Lightning Experience Setup for how to create one.
  • If you omit record-id and the component is not on a record page, the barcode falls back to the preview/sample behaviour defined by the config.
  • Use component-height to fit the barcode within your layout without clipping.