Skip to main content
Version: Upcoming 🦄

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-hf-control="ScanButton"
    data-hf-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-hf-control="ScanButton"
    data-hf-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

buttonStyle​

Define the style of the button.
How to use:
buttonStyle: 'primary'
Type: 'default' | 'primary' | 'success' | 'error' | 'warning'

nextToField​

Define the Form Control the button should be placed next to. Looks like: this
How to use:
nextToField: 'address_city'
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 an 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.