Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Visual Codes Scanner
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1
Overview
- The Visual Codes Scanner Component is a form control for capturing QR codes, barcodes, and other visual code formats.
- It uses the device camera to scan codes directly.
- The component provides a manual input option when scanning is not possible.
- It is useful for inventory management, event check-ins, product authentication, and other quick data capture tasks.
...
| Token | Description |
|---|---|
| labelTranslations | Label text on scanner button with multi-language support |
| dialogTitleTranslations | Title text in scan dialog with multi-language support |
| alternativeInputLabelTranslations | Label for manual input field in dialog with multi-language support |
| confirmButtonLabelTranslations | Label text for the confirmation button in dialog with multi-language support |
| closeDialogOnSuccess | Auto-closes dialog after a successful scan |
| hidden | Controls whether the component is visible in the form |
| saveInLocalStorage | Persists scanned value in local storage across sessions |
| defaultValue | Sets an initial value used when form is reset |
| readonly | Displays value but disables scanning |
| dataField | Field name for submitting form data |
| controlsRequestType | Defines how data is sent in HTTP request (BODY, HEADER, PATH) |
| authorizationDisable | Policy set defining when scanner is disabled |
| events | Configurable component events |
| ON_INIT (Events) | Event triggered when component is initialized |
| ON_DESTROY (Events) | Event triggered when component is removed from DOM |
| ON_SCAN_START (Events) | Event triggered when user activates scanner |
| ON_SCAN_SUCCESS (Events) | Event triggered when a code is successfully scanned |
| ON_SCAN_ERROR (Events) | Event triggered when an error occurs during scanning |
| dataTestId | Identifier for automated testing |
...
- authorizationDisable – Specifies a policy set that determines when the component should be disabled. For example, setting to "readOnlyPolicy" will disable the scanner for users who don't have scan permissions according to the specified policy.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1
Guidelines
Usage
- Capture QR/bar/visual codes with a clear CTA. Set the button text via
labelTranslations(e.g., “Scan code”). - Provide a manual fallback in the dialog. Configure
alternativeInputLabelTranslationsandconfirmButtonLabelTranslations. - Control presence within the form. Toggle visibility using
hidden.
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
| Localize the button label, dialog title, manual-entry label, and confirm action. | Ship English-only text. | labelTranslations, dialogTitleTranslations, alternativeInputLabelTranslations, confirmButtonLabelTranslations | |||
| Offer a manual entry path inside the dialog. | Rely solely on camera scanning. | alternativeInputLabelTranslations, confirmButtonLabelTranslations | |||
| Auto-close after a single successful scan. | Auto-close during batch scanning. | closeDialogOnSuccess | |||
| Persist the last scanned value for repeat workflows. | Persist sensitive codes across sessions. | saveInLocalStorage | |||
| Show values while preventing edits. | Hide the control when the value must remain visible. | readonly, hidden | |||
| Bind and route the value correctly in requests. | Send the value in the wrong channel (e.g., HEADER when the API expects BODY). | dataField, controlsRequestType | |||
| Keep the control visible but disabled when users lack permission. | Hide permission-gated actions with no feedback. | authorizationDisable, hidden | Instrument lifecycle and scan outcomes. | Skip setup/cleanup hooks and lose telemetry. | events, ON_INIT, ON_DESTROY, ON_SCAN_START, ON_SCAN_SUCCESS, ON_SCAN_ERROR |
| Use a stable test hook for automation. | Target dynamic labels/selectors in tests. | dataTestId |
...
