Versions Compared

Old Version 3

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

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.

...

Specs

Tokens

TokenDescription
displayNameDisplay name in structure panel
labelTranslationsLabel text above the scanner field (multi-language)
scanningMessageTranslationsMessage shown during scanning (multi-language)
postScanningMessageTranslationsMessage shown after successful scan (multi-language)
dialogTitleTranslationsTitle of the scanner dialog (multi-language)
alternativeInputLabelTranslationsLabel for manual input option (multi-language)
confirmButtonLabelTranslationsText on confirmation button (multi-language)
closeDialogOnSuccessCloses dialog automatically after scan success
readonlyDisplays values but prevents scanning or manual input
visibleControls if the component is shown to users
enabledControls if the component is interactive
requiredField must have a value before submission
defaultValueInitial value shown when component is loaded
saveInLocalStoragePersists last scanned value in local storage
dataFieldForm field name where scanned code is stored
controlsRequestTypeDefines how data is sent in API requests (BODY, PATH, HEADER)
authorizationDisableLinks enabled state to a policy set
eventsConfigurable component events
ON_INIT (Events)Triggered on initialization
ON_DESTROY (Events)Triggered when component is removed
ON_SCAN_START (Events)Triggered when scanning begins
ON_SCAN_SUCCESS (Events)Triggered when scan is successful

...

  • closeDialogOnSuccess – Determines whether the scanner dialog automatically closes after successful scan. When enabled, the dialog will close immediately after scanning a valid RFID code, improving workflow efficiency.
  • saveInLocalStorage – Enables persisting the scanned value in browser's local storage. When enabled, the last scanned value will be recalled even after page refresh, providing continuity in user sessions.
  • defaultValue – Sets an initial value for the scanner field when first loaded. For example, setting a defaultValue of "TAG-12345" will pre-populate the field with this value when the component is initialized.

Example input fieldImage Added Example dialogImage Added

Translation

(Configured in Visual Properties)

...

  • 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.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1

Guidelines

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.

...

  • Stage-specific, localized text communicates status to assistive tech: labelTranslations, scanningMessageTranslations, postScanningMessageTranslations, dialogTitleTranslations, alternativeInputLabelTranslations, confirmButtonLabelTranslations.
    • Keep titles and labels concise to minimize truncation (dialogTitleTranslations, labelTranslations).
  • 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.