Skip to content
PandaSuite Docs

Code Reader

Scan a single barcode or 2D code format, either from a full-screen scanner or from a Camera preview frame.

Need to display a QR code?

If you want to generate and display a QR code instead of scanning one, use QR Code Generator.

Use cases

  • Product lookup: scan retail barcodes such as EAN-13 or EAN-8 to open a product sheet.
  • Ticket validation: detect QR codes, Aztec, or PDF417 codes on tickets and boarding passes.
  • Inventory and logistics: scan Code 128, ITF, or Codabar labels from shelves and parcels.
  • Loyalty and access control: read a saved code and trigger a dedicated marker workflow.
  • Custom scanning flows: combine the component with Camera when you need your own overlay, framing guide, or instructions.

Supported formats

  • QR code
  • Aztec
  • PDF417
  • Data Matrix
  • Code 128
  • Code 39
  • Code 93
  • Codabar
  • EAN-13
  • EAN-8
  • UPC-E
  • ITF
One format per component

Code Reader detects one format at a time. If you want to support several formats in the same project, add one component per format.

Setting up the component

  1. Open the Components panel.
  2. Add Code Scanner to the Object list. This is a non-visual component, so nothing appears on the screen.
  3. In Properties, choose the Format you want to detect.
  4. In Orientation, choose Back camera or Front camera depending on your scan flow.

Component features

Properties

PropertyDescription
FormatThe barcode or 2D code format this component detects.
OrientationSelect Back camera for most scans, or Front camera for selfie-oriented flows.

Trigger events

The available detected event depends on the selected Format. Each event exposes a Value with the decoded string:

  • QR code detected
  • Aztec detected
  • PDF417 detected
  • Data Matrix detected
  • Code 128 detected
  • Code 39 detected
  • Code 93 detected
  • Codabar detected
  • EAN-13 detected
  • EAN-8 detected
  • UPC-E detected
  • ITF detected

Associated actions

You can act on the component via the Interact with a component action:

  • Open scanner: opens the camera in a full-screen scanner view.
  • Scan preview frame: scans the current frame of a Camera component. Only available when the action is triggered from a Camera event (such as Frame changed).

Exposed properties

Code Reader exposes:

  • Value: the most recently decoded value.

Saved markers

You can create saved markers on the component. Each marker stores:

  • Format
  • Value

When a scanned code matches both the saved format and value, the marker is triggered and any attached actions run automatically.

Practical examples

Open a URL from a QR code

  1. Add Code Scanner to the Object list.
  2. Set Format to QR code.
  3. Open the component Actions tab and select QR code detected.
  4. Add the action Open a URL.
  5. In URL, add a data binding:
    1 From Event
    →
    2 Value
    .

Scan a retail barcode from a Camera preview

  1. Add Camera to your screen.
  2. Add Code Scanner to the Object list.
  3. Set Format to EAN-13.
  4. On Camera, create the action:
    1 Frame changed
    →
    2 Interact with a component
    →
    3 Code Scanner
    →
    4 Scan preview frame
  5. On Code Scanner, use EAN-13 detected to update a variable, open a product screen, or trigger any other action with
    1 From Event
    →
    2 Value
    .

Best practices and tips

  • Use Back camera for most scanning scenarios.
  • Add one component per format instead of switching formats dynamically during the same flow.
  • Use Open scanner for a simple full-screen scan experience.
  • Use Camera + Scan preview frame when you need a custom UI overlay.
  • If you rely on saved markers, remember that both the format and the decoded value must match.
  • Test your scan flows on the target devices and in real lighting conditions.

Additional resources