Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

RFID Scanner

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1

Overview

  • The Dynamic RFID Scanner Component enables scanning of RFID codes within applications.
  • It provides localized labels, messages, and dialog titles with full language support.
  • Users can scan RFID tags, enter codes manually, or use pre-populated default values.
  • The component supports role-based access, validation, and local storage persistence.
  • Events allow integration with flows, logging, and backend services during the scanning lifecycle.

...

  • authorizationDisable – Links the component's enabled state to a policy set. For example, setting to "scannerAccessPolicy" will only enable the scanner for users who meet the policy requirements, providing role-based access control.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Capture RFID values directly into a form field by binding the destination with dataField.
  • Offer a manual entry fallback using alternativeInputLabelTranslations.
  • Use readonly: true on review screens to prevent edits.
  • Prefill known identifiers with defaultValue when appropriate.

Sizing & Layout

  • The component doesn’t expose explicit size/spacing tokens. Control presence with visible and reduce on-screen time after success with closeDialogOnSuccess.

States & Feedback

  • Idle/ready is governed by enabled, readonly, visible, and optional defaultValue.
  • Scanning state: inform users with scanningMessageTranslations.
  • Success state: confirm with postScanningMessageTranslations; optionally dismiss using closeDialogOnSuccess.

Data-Driven / Conditional Behavior

  • Speed confirmations with defaultValue.
  • Persist the last value across refreshes with saveInLocalStorage.
  • Enforce completeness by setting required: true.

Visibility & Authorization

  • Hide when out of scope using visible: false.
  • Limit interactivity by policy with authorizationDisable.
  • Temporarily pause interaction without hiding using enabled: false.

Content & Localization

  • Localize user-facing copy with:
    labelTranslations, scanningMessageTranslations, postScanningMessageTranslations,
    dialogTitleTranslations, alternativeInputLabelTranslations, confirmButtonLabelTranslations.
  • Keep labels short and action-oriented; use confirmButtonLabelTranslations for clear verbs.

Dos & Don’ts

DoDon’tArticle setting(s)
Bind the scanned value to a clearly named field used by the form.Leave the destination implicit or rely on external defaults.dataField
Show concise, localized guidance before/during/after scanning.Use English-only strings or omit stage-specific messages.labelTranslations, scanningMessageTranslations, postScanningMessageTranslations
Provide a visible manual entry fallback label.Hide the fallback or leave it unlabeled.alternativeInputLabelTranslations
Auto-close the dialog after confirmed success to keep users in flow.Force users to dismiss a completed scanner manually.closeDialogOnSuccess
Persist values when repeat scanning is expected.Make users re-enter the same code after refresh.saveInLocalStorage
Require a value when the form cannot proceed without it.Allow empty submissions that cause downstream errors.required
Restrict interactivity by role while keeping the UI discoverable.Hide role-relevant controls from users who should know they lack access.authorizationDisable
Validate/route on success using the success event.Pack logic into initialization and ignore the actual scan result.ON_SCAN_SUCCESS

Accessibility

  • Stage-specific, localized text communicates status to assistive tech: labelTranslations, scanningMessageTranslations, postScanningMessageTranslations, dialogTitleTranslations, alternativeInputLabelTranslations, confirmButtonLabelTranslations.
  • Participate in validation announcements using required.
  • Prevent non-functional interaction with readonly or enabled: false.
  • Reduce focus churn by auto-dismissing completed scans via closeDialogOnSuccess.
  • Convey permission limits with a perceivable disabled state via authorizationDisable.
  • Avoid color-only meaning; use clear status messages via scanningMessageTranslations and postScanningMessageTranslations.
  • Make the manual path discoverable with alternativeInputLabelTranslations.
  • Keep titles and labels concise to minimize truncation (dialogTitleTranslations, labelTranslations).
  • Use confirmButtonLabelTranslations to make the action purpose explicit.
  • Where repeat scans are typical, reduce repeated input effort with saveInLocalStorage.