Use in a Flow

Adding a Barcode to a Screen Flow

The Barcode and QR Code Generator component is exposed as a Flow screen component, so you can show a barcode or QR code inside any guided Screen Flow — for example, on a confirmation screen, a ticket, or a packing step. The component renders from a saved Barcode Config record, just like it does on a Lightning page.

Prerequisite: Install the package, assign the Barcode & QR Code Permissions permission set, and create a Barcode Config record. See Assign Permissions and Lightning Experience Setup.

Steps

1. Open Flow Builder

  1. Go to Setup and search for Flows in the Quick Find box.
  2. Click New Flow and choose Screen Flow, then click Create.

{/* TODO: screenshot — New Screen Flow in Flow Builder */} New Screen Flow placeholder

2. Add a Screen element

  1. On the canvas, click the + button and add a Screen element.
  2. Give the screen a label (for example, Show Barcode).

{/* TODO: screenshot — adding a Screen element */} Add Screen element placeholder

3. Drag in the Barcode component

  1. In the screen editor, find the Barcode & QR Code Generator component in the left Components panel (under the custom/managed components).
  2. Drag it onto the screen.

{/* TODO: screenshot — Barcode component in the Flow components panel */} Drag barcode component placeholder

4. Configure the component properties

With the component selected, set its properties on the right-hand panel:

  • Barcode Config Name — enter the exact Name of the Barcode Config record you want to render (for example, Lead_Email_QR).
  • recordId — provide the Id of the record whose field value should be encoded. You can reference a Flow variable (for example, {!recordId}) when the Flow is launched from a record.
  • componentHeight — optional. The height of the component in pixels (defaults to 200).

{/* TODO: screenshot — component properties panel in the Flow screen */} Flow component properties placeholder

5. Save and activate

  1. Click Save, give the Flow a name, and click Save again.
  2. Click Activate to make the Flow available.

You can now surface the Flow wherever screen flows are supported — on a Lightning page, an action, or an Experience Cloud site.

{/* TODO: screenshot — activated Flow running with a rendered barcode */} Flow running with barcode placeholder

Notes

  • If the Flow is not launched from a record, make sure you pass a valid recordId to the component, otherwise it has no record data to encode.
  • The Barcode Config Name must match an existing, saved config record exactly. See Lightning Experience Setup to create one.
  • The same component can be reused on multiple Flow screens with different config names.