Versions Compared

Old Version 2

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

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.

Example input fieldImage Removed Example dialogImage Removed

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

[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.
    • 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.
  • Use confirmButtonLabelTranslations to make the action purpose explicit.
  • Where repeat scans are typical, reduce repeated input effort with saveInLocalStorage.