Skip to main content
Version: Upcoming 🦄

ButtonControl

The ButtonControl invokes a predefined custom callback.

<div
    id="buttonControlSample"
    data-hf-control="ButtonControl"
    data-hf-options="{
        buttonType: 'large',
        buttonLabel: 'Test',
        buttonHeading: 'Button',
        callback: HFFormdefinition.SampleHelpers.buttonControlCallback
    }"
></div>

FormControl Options​

buttonType - required​

Define the size of the Button.
How to use:
buttonType: 'medium'
Type: 'small' | 'medium' | 'large'

callback - required​

Call a pre-defined JS-method to do something when the Button is invoked.
How to use:
callback: HFFormdefinition.Namespace.Method
Type: function
Signature: function() => Promise<void>

audioFeedback​

Enable/Disable audio feedback on click.
How to use:
audioFeedback: true
Type: boolean
Default: true

buttonHeading​

Define a label for the control element.
How to use:
buttonHeading: 'Test'
Type: string

buttonLabel​

Define the Button caption.
Only visible by choosing buttonType 'medium' or 'large'.
How to use:
buttonType: 'medium'
Type: string

buttonStyle​

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

callbackFeedback​

Enable/Disable callback feedback on callback funtion return.
How to use:
callbackFeedback: true
Type: boolean
Default: true

disableOnClick​

Disable Button while callback function is executed.
How to use:
disableOnClick: false
Type: boolean

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

icon​

Sets the icon of the Button. Can be FontAwesome Icon or SVG Image.
How to use:
icon: 'fa-barcode-scan'
Type: string

nextToField​

Define the Form Control the Button should be placed next to. Looks like this
How to use:
nextToField: 'address_city'
Type: string

vibrationFeedback​

Enable/Disable vibration feedback on click.
How to use:
vibrationFeedback: true
Type: Boolean
Default: true