Barcode Scanner Component

Introduction

The Barcode Scanner Component in CargoXplorer TMS is a powerful tool designed to facilitate barcode scanning using either the device's camera or an external barcode scanner. This component is essential for operations that require quick and accurate data input, such as inventory management, shipment tracking, or warehouse operations.

YAML Structure

The Barcode Scanner Component is defined in YAML format within your AppModule configuration. Here's the basic structure:

component: barcodeScanner
props:
  minBarcodeLength: 5
  onScan:
    - action1
    - action2

Attribute Description

• component: barcodeScanner

  • This specifies that we're using the Barcode Scanner Component.

• props: (object)

  • Contains the properties for configuring the Barcode Scanner Component.

  • minBarcodeLength: (number, optional)

    • Specifies the minimum length of barcodes to be recognized.
    • Useful for filtering out unwanted or partial scans.

  • onScan: (array)

    • Defines the actions to be executed when a barcode is successfully scanned.
    • Each item in the array represents an action to be performed.

Examples

Basic Barcode Scanner Setup

component: barcodeScanner
props:
  minBarcodeLength: 8
  onScan:
    - setStore:
        scannedBarcode: "{{ result.data }}"
    - notification:
        message: "Barcode scanned: {{ result.data }}"

In this example, when a barcode is scanned:

1. The scanned barcode is stored in the application's state.
2. A notification is displayed with the scanned barcode.

Advanced Barcode Scanner with Conditional Logic

component: barcodeScanner
props:
  minBarcodeLength: 10
  onScan:
    - if:
        condition: "{{ eval result.format === 'QR_CODE' }}"
        then:
          - setStore:
              qrCodeData: "{{ result.data }}"
          - navigate:
              to: "/qr-details"
        else:
          - mutation:
              command: "logBarcodeScan"
              variables:
                barcodeData: "{{ result.data }}"
                format: "{{ result.format }}"
          - notification:
              message: "Barcode logged: {{ result.data }}"

This example demonstrates:

1. A minimum barcode length of 10 characters.
2. Conditional logic based on the scanned barcode format.
3. Different actions for QR codes versus other barcode types.
4. Use of navigation and mutation actions based on scan results.