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

Visual Codes Scanner

The Visual Codes Scanner Component provides a specialized form control for capturing various types of visual codes such as QR codes, barcodes, and other common formats. This component uses the device camera to scan codes and presents a friendly interface where users can either scan a code directly or manually enter it. It's particularly useful for inventory management, event check-ins, product authentication, or any application requiring quick data capture from visual codes.

Properties

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.

  • 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.

  • 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.

  • 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.

  • 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.

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.

Authorization Properties

  • 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.

Event Actions

  • 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.

Testing Hooks

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