Skip to main content
Version: 9.6

ScanButton (Barcode/NFC)

This form control (button) starts a scan of barcodes and processes the decoded information inside the form. The control is based on the NPM cross-platform barcode scanner for cordova and ZXing barcode scanner for browser.

<div id="scanBtn" 
    class="pdf-hide" 
    data-win-control="HFWinJSCtrl.ScanButton" 
    data-win-options="{                
        buttonType: 'large',
        icon: 'fa-barcode-scan',
        buttonHeading: 'QR-Code',
        buttonLabel: 'Scan',
        scan: {
            fieldId: 'add_parts_item1',
            scanType: 'BARCODE',      
            config: {
                preferFrontCamera : false,
                showFlipCameraButton : true,
                showTorchButton : true,
                saveHistory: false, 
                prompt : 'Please scan the appropriate barcode...',
                resultDisplayDuration: 500,
                formats : 'QR_CODE,AZTEC',
                disableAnimations : true,
                disableSuccessBeep: false
            },
            audioFeedback: true,
            vibrationFeedback: true,
            callbackFeedback: true,
            callback: HFFormdefinition.BaseHelpers.customQRScanButton
        }
    }">
</div>
<div id="nfcScanBtn" class="hide-in-view" 
    data-win-control="HFWinJSCtrl.ScanButton" 
    data-win-options="{                
        buttonType: 'large',
        buttonHeading: 'NFC-Code',
        buttonLabel: 'Scan',
        buttonIcon: 'fa-times',
        scan: {
            mapping: {
                '0': 'nfc-textfield-1',
                '1': 'nfc-textfield-2',
                '2': 'nfc-textfield-3'
            },
            scanType: 'NFC',
            postProcess: HFFormdefinition.BaseHelpers.postProcessNFC
        }
    }">
</div>

FormControl Options​

buttonType - required​

Define the size of the button ('small', 'medium' or 'large').

How to use: buttonType: 'large'
Type: 'small' | 'medium' | 'large'

fieldId - required​

Provide the ID of the form control receiving the scanned value.

How to use: fieldId: 'add_parts_item1'
Type: string

buttonHeading​

Define a label for the control element.

How to use: buttonHeading: 'Navigation'
Type: string

buttonIcon​

Sets the icon of the button

How to use: buttonIcon: 'fa-barcode-scan'
Type: string

buttonLabel​

Sets the label of the button (displayed if buttonType is "medium" or "large")

How to use: buttonLabel: 'Scan'
Type: string

scan​

An object with key-value pairs defining the form field and the scan type, a config part for the plugin and an optional custom postprocessing function

How to use: scan: { ... }
Type: ScanObject

Scan Object​

scanType - required​

Defines the used scanning type.

How to use: scanType: 'BARCODE'
Type: 'BARCODE' | 'NFC'

audioFeedback​

Enables or disables an audible feedback on proccessing the scan.

How to use: audioFeedback: true
Type: boolean
Default: true

callback​

Call a custom JS-method after the scan is completed

How to use: callback: HFFormdefinition.BaselHelpers.callback
Type: function
Signature: function(config: any, result: any, postfix: string) => void

callbackFeedback​

Enables or disables a audible feedback on success.

How to use: callbackFeedback: true
Type: boolean
Default: true

config​

Configuration object for scan type BARCODE. For more information check out the links below.

How to use: config: { ... }
Type: object

errorMessage​

Customized error message in case the scan fails.

How to use: errorMessage: 'This is my custom error.'
Type: string

fieldId​

FormControl in which the scan value is entered.

How to use: fieldId: 'scan_input_id'
Type: string

hidden​

Hide FormControl in Form.

How to use: hidden: true
Type: boolean

mapping​

An object with key-value pairs defining the scan record id and form field ID (especially for NFC Ndef Messages). Overwrites fieldId if both are set!

How to use: mapping: { '0': 'scan_input_id_1', '1': 'scan_input_id_1' }
Type: { [scanKey: string]: string }

multiple​

Enables or disables multiple scanning. Scan starts again after successful scan. It is aborted after an error or by cancel scanning manually.

How to use: multiple: true
Type: boolean

multipleMessage​

Displays confirm message after every scan to start or abort next scan.

How to use: multipleMessage: 'Another scan follows - abort with Cancel or Back'
Type: string

postProcess​

Call a custom JS-method to postprocess the scanned values

How to use: postProcess: HFFormdefinition.BaselHelpers.postProcessMRZ
Type: function
Signature: function(config: any, result: any, postfix: string) => Promise<any>

vibrationFeedback​

Enables or disables a haptic feedback on proccessing the scan.

How to use: vibrationFeedback: true
Type: boolean
Default: true
Note

For further information on the config values especially the formats for Barcode/QR-Code scanning (formats : 'QR_CODE,AZTEC'), please read the documentation at https://github.com/phonegap/phonegap-plugin-barcodescanner for mobile scanning and at https://www.npmjs.com/package/@zxing/library for browser scanning.