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.

Barcode Example

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

NFC Example

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

Property	Type	How to use	Description
fieldId *	String	fieldId: 'add_parts_item1'	Provide the ID of the form control receiving the scanned value.
buttonLabel **	String	buttonLabel: 'Scan'	Sets the label of the button (displayed if buttonType is "medium" or "large")
buttonType **	String	buttonType: 'large'	Define the size of the button ('small', 'medium' or 'large').
buttonIcon	String	buttonIcon: 'fa-barcode-scan'	Sets the icon of the button
buttonHeading	String	buttonHeading: 'Navigation'	Define a label for the control element.
scan	Object	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

* These options are required.
** Please provide at least one of these options.

Scan Object

Property	Type	How to use	Description
scanType *	String	scanType: 'BARCODE'	Defines the used scanning type. Possible options are: BARCODE or NFC.
fieldId **	String	fieldId: 'scan_input_id'	FormControl in which the scan value is entered.
mapping **	Object	mapping: { '0': 'scan_input_id_1', '1': 'scan_input_id_1' }	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!
config	Object	config: { ... }	Configuration object for scan type BARCODE. For more information check out the links below.
errorMessage	String	errorMessage: 'This is my custom error.'	Customized error message in case the scan fails.
audioFeedback	Boolean	audioFeedback: true	Enables or disables an audible feedback on proccessing the scan.
vibrationFeedback	Boolean	vibrationFeedback: true	Enables or disables a haptic feedback on proccessing the scan.
callbackFeedback	Boolean	callbackFeedback: true	Enables or disables a audible feedback on success.
callback	Function(config: scan, result: any, postfix: string)	callback: HFFormdefinition.BaselHelpers.callback	Call a custom JS-method after the scan is completed
postProcess	Function(config: scan, result: any, postfix: string)	postProcess: HFFormdefinition.BaselHelpers.postProcessMRZ	Call a custom JS-method to postprocess the scanned values

* These options are required.
** Please provide at least one of these options.

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.