Skip to main content

upp-barcode-display

Form control for assigning and previewing a product or shortcut barcode (PRODUCT.barcode / PRESELECT.barcode). Renders a JsBarcode SVG when the format is supported (EAN-13, CODE128) and always shows the code string. Opens upp-barcode-scanning for HID capture and manual entry.

When to Use​

Use inside product or shortcut editors when the connected TPV service has at least one active CODESCAN row (placeView.service?.codescans.length). Do not use this control for the internal quick-search code field — that is a separate manual lookup channel.

Demo​

Source Code​

<div class="demo-scroll-container">
    <upp-scrollable [scrollbar]="'y'">
        <div class="demo-content">
            <h2>Barcode field</h2>
            <p class="demo-description">
                Assign, preview, and clear a product barcode with <code>upp-barcode-display</code>.
            </p>

            <div class="demo-section" [formGroup]="form">
                <upp-form-section title="Barcode">
                    <upp-barcode-display
                        formControlName="barcode"
                        [mode]="mode"
                    ></upp-barcode-display>
                </upp-form-section>
            </div>
        </div>
    </upp-scrollable>
</div>

API Reference​

InputTypeDefaultDescription
formControlName / ngModelstring | null—Barcode value (Reactive Forms ControlValueAccessor)
mode'VIEW' | 'EDIT''EDIT''VIEW': read-only preview; 'EDIT': assign / update / remove
disabledbooleanfalseDisables interaction and stops capture listening

Behaviour​

  • Empty: shows assign affordance (@place_barcode_assign).
  • Assign / Update: opens the scanning overlay (upp-barcode-scanning); one successful scan or manual accept emits OnCode and writes the value, marking the form dirty.
  • Remove: clears the value.
  • Manual entry / HID: handled inside upp-barcode-scanning (numeric 8 / 12 / 13 digits, or alphanumeric up to 128 characters); the display control only receives the final code via OnCode or OnCancel.
  • Preview: JsBarcode with fallback to text-only when the format is not drawable.