Skip to main content
Version: Upcoming 🦄

ApproveButton

The ApproveButton is a button that triggers the approval process for a form. After the approval process is completed, the user is redirected to a predefined page.

If the user is redirected back to the same form, the app waits until all server-side workflows have been processed and the approved form is returned from the server. During this time, the user is blocked from interacting with the form, and a progress loader along with an informational message is displayed.

Example
<div id="approveBtn"
    data-hf-control="ApproveButton"
    data-hf-options="{
        maxWaitingTime: 30,
        waitingInfo: 'Das Formular wird upgedated und die Kataloge werden neu geladen. Bitte warten Sie einen Moment bis das Formular neu ladet.',
        action: 'GoTo_FormCurrent',
        buttonLabel: '...and Reload',
        buttonType: 'large',
        buttonHeading: 'Approve Form',
        confirmDialogTitle: 'Approve Form?',
        confirmDialogMessage: 'Do you really want to approve the form?"
    }">
</div>

FormControl Options​

action - required​

When the approval process is completed, the user will be redirected to the defined page. GoTo_List[Approved|Edit|Group] redirects the user to the list page, GoTo_FormCurrent reloads the current form. Default is GoTo_ListApproved.
How to use:
action: GoTo_FormCurrent
Type: GoTo_ListApproved | GoTo_ListEdit | GoTo_ListGroup | GoTo_FormCurrent

buttonType - required​

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

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

confirmDialogMessage​

Define a message for the confirmation dialog. If no confirmDialogMessage is provided, and the property useApproveDialogMessage isn´t set to true the default message is "Do you really want to approve the form? After approval, you will be forwarded to the form list page.".
How to use:
confirmDialogMessage: 'Do you really want to approve the form?
Type: string

confirmDialogTitle​

Define a title for the confirmation dialog. If no confirmDialogTitle is provided, and the property useApproveDialogMessage isn´t set to true the default title is "Approve Form?".
How to use:
confirmDialogTitle: 'Approve Form?
Type: string

maxWaitingTime​

Provide the maximum time in seconds the app should wait for the approval process. If the approval process takes longer than the defined time, the user will be informed that the process could not be completed and gets redirected to the list page.
How to use:
maxWaitingTime: 30
Type: number

useApproveDialogMessage​

If set to true, the default title and message of the confirmation dialog of the forms approve button will be used.
How to use:
useApproveDialogMessage: true
Type: boolean

waitingInfo​

Provide a message that will be displayed to the user while the form is reloaded
How to use:
waitingInfo: "The form is beeing approved and data is updated in the background. Please wait a moment and do not close the app."
Type: string