Skip to main content

BarcodeScannerDialog

<ui5-barcode-scanner-dialog> | Since 1.0.0-rc.15

The BarcodeScannerDialog component provides barcode scanning functionality for all devices that support the MediaDevices.getUserMedia() native API. Opening the dialog launches the device camera and scans for known barcode formats.

A scanSuccess event fires whenever a barcode is identified and a scanError event fires when the scan failed (for example, due to missing permisions).

Internally, the component uses the zxing-js/library third party OSS.

For a list of supported barcode formats, see the zxing-js/library documentation.

Basic Sample​

Properties​

open​

DescriptionIndicates whether the dialog is open.
Typeboolean
Defaultfalse
Since1.24.0

Slots​

DescriptionDefines the header HTML Element.
Note: If header slot is provided, the labelling of the dialog is a responsibility of the application developer. accessibleName should be used.
TypeArray<HTMLElement>
Since2.4.0
DescriptionDefines the footer HTML Element.
Note: When you provide custom content for the footer slot, the default close button is not rendered. This means you need to include your own mechanism within the custom footer to close the dialog, such as a button with an event listener that closes the dialog.
Note: If the footer slot is not provided, a default footer with a close button is rendered automatically, allowing users to close the dialog without any additional implementation.
TypeArray<HTMLElement>
Since2.4.0

Events​

close​

DescriptionFired when the user closes the component.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

scan-success​

DescriptionFires when the scan is completed successfuuly.
TypeCustomEvent<BarcodeScannerDialogScanSuccessEventDetail>
Parameterstext: string
the scan result as string
rawBytes: Object
the scan result as a Uint8Array
BubblesYes
CancelableNo

scan-error​

DescriptionFires when the scan fails with error.
TypeCustomEvent<BarcodeScannerDialogScanErrorEventDetail>
Parametersmessage: string
the error message
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.