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

Visual Codes Scanner

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.

Example Visual Codes Scanner Dialog

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

(Configured in Non-Visual Properties)

dataField – Defines the field name that will be used when submitting form data. For example, setting to "productBarcode" ensures the scanned code is submitted with this field name in the data object.
controlsRequestType – Specifies how the field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'. For example, setting to "BODY" includes the field in the request body, which is standard for most form submissions.

(Configured in Visual Properties)

closeDialogOnSuccess – Controls whether the scanning dialog automatically closes after a successful scan. When set to true, the dialog will close immediately after detecting a valid code, improving the user experience by reducing required steps.
saveInLocalStorage – Determines whether the scanned value is preserved in the user's local storage between sessions. When enabled, the last scanned value will persist if the user reloads the page, providing a better user experience.
defaultValue – Sets the initial value that will be used when the form is reset. For example, setting to a sample code like "TEST123456" would pre-fill the field with this value when the form is reset.

(Configured in Visual Properties)

labelTranslations – Sets the label text displayed on the scanner button with support for multiple languages. For example, {"en-US": "Scan Code", "de-DE": "Code scannen"} ensures proper localization for international users.
dialogTitleTranslations – Sets the title text displayed at the top of the scanning dialog with support for multiple languages. For example, {"en-US": "Scan QR Code", "de-DE": "QR-Code scannen"} helps users understand what they are scanning.
alternativeInputLabelTranslations – Sets the label for the manual input field shown in the dialog with support for multiple languages. For example, {"en-US": "Or type code manually", "de-DE": "Oder Code manuell eingeben"} provides an alternative entry method when scanning isn't working.
confirmButtonLabelTranslations – Sets the text for the confirmation button in the dialog with support for multiple languages. For example, {"en-US": "Confirm", "de-DE": "Bestätigen"} allows users to submit manually entered codes.

(Configured in Events)

events – Configures the events that the component can trigger and respond to:
ON_INIT – Triggered when the component is initialized. Can be used to perform setup operations like loading initial configuration.
ON_DESTROY – Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.
ON_SCAN_START – Triggered when the user activates the scanner. Can be used to log scanning attempts or prepare related data.
ON_SCAN_SUCCESS – Triggered when a code is successfully scanned. Can be used to perform immediate actions with the scanned value, such as looking up product information.
ON_SCAN_ERROR – Triggered when an error occurs during scanning. Can be used to handle exceptions and provide appropriate feedback to users.

(Configured in Visual Properties)

hidden – Controls whether the component is visible in the form. When set to true, the component remains in the form structure but is not displayed, which is useful for conditional rendering based on other field values.
readonly – Controls whether the scanner field can be activated by users. When set to true, the field displays its value but the scan button is disabled, which is useful for display-only scenarios.

(Configured in Testing Hooks)

dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "product-barcode-scanner" allows test scripts to reliably locate this component.

(Configured in Authorization)

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.

[NO DATA AVAILABLE]

[NO DATA AVAILABLE]