In some cases, the default "Approve" and "Reject" buttons on the task form may not fully address specific requirements. To overcome this limitation, users can configure custom approve and reject buttons on the task form. By doing so, they can set custom button text, apply different button styles, or execute a series of actions beyond simple approval or rejection.

In this guide, we will walk you through the steps to replace the default action panel with custom buttons, add a comments field, and set up form actions for the "Approve" and "Reject" buttons to include custom comments in the task result.

To begin, open the Yeeflow Approval Form Designer and navigate to one of the task form. Locate the default action panel and remove it from the form.

From the controls panel, drag and drop two button controls onto the task form canvas. Label the first button "Approve" and the second button "Reject." Change the styles of those 2 buttons to make the "Approve" button as green, and the "Reject" button as red.

Next, drag and drop a multiple-line control onto the task form. Change the title of the control to "Add comments" and adjust the associated variable's ID to "field_custom_comments" with the variable name set as "Custom comments."

From the top-right corner of the Form Designer, click the "Actions" button to open the Form Actions Management window on the right slider window.

Click "+ New action" from the top right of the slider window to create a new form action.

To customize the action name, click the dropdown button next to the action's default name and choose "Rename action" from the list.

Change the action name to "Custom approve".

Next, click "+ Add a step" button. From the pop-up step types window, select "Submit form."

In the "Submit form" step settings panel, choose "Form Submit/Task Approve/Task Complete" as the submit type.

In the Task Settings section of the "Submit form" step settings panel, click the Editor icon next to the Task Comment to open the Expression Editor window.

Click the "Expression" button and select "Workflow variables" from the pop-up window. Then, choose "Custom comments" from the list of variables and click "Insert" to add this variable.

Click "OK" to close the window.

By completing these steps, the content entered in the "Custom comments" field will be set as the comment for the task result when the "Approve" button is clicked.

Finally, click the "Save" button to save the settings of this Submit Form step.

Select the "Approve" button from the Form Designer. Under the Content tab, expand the Action group, and choose the "Custom approve" action we just created.

This will trigger the "Custom approve" action when the task owner clicks the "Approve" button.

Click the "Actions" button from the top-right of the form designer to open the Form Actions Management window. Click "+ New action" to create another form action. Rename this action to "Custom reject".

In the "Custom reject" action, add two steps. Firstly, use a Confirm Dialog step to check if the "Add comments" control is blank. Click the "+ Add another step" button and select "Confirm Dialog" from the pop-up window.

From the Execution Condition settings, use the Expression Editor to check if the "Custom comments" variable is empty. If it is, show a dialog asking the task owner to enter comments.

Toggle on the "Continue next step when condition is not met" option to proceed to the next step when comments are present.

Add a "Submit Form" step after the "Confirm Dialog" step.

In the Execution Condition settings, set the condition as the "Custom comments" variable not equal to empty. From the Submit type, select the "Reject" option.

Under Task Comment settings, use the Expression Editor to set the task comment as the "Custom comments" variable. This ensures that the custom comments entered by the task owner will be added as the task comment when rejecting the task.

Select the "Reject" button from the Form Designer. Under the Content tab, find and expand the Action group. Select the "Custom reject" action from the action dropdown list.

This links the "Reject" button to the "Custom reject" action, activating it when clicked.

Publish the approval form and test the functions to enjoy the benefits of these customizations. Now, when the task owner opens a pending task, the custom Approve and Reject button will appear along with the Add comments text area.

Clicking the "Approve" button will approve the task, and if the task owner adds comments in the "Add comments" multiple-line control, those comments will appear in the workflow history panel.

If the task owner clicks the "Reject" button, and the "Add comments" field is empty, a pop-up dialog will prompt them to enter the reason for rejection.

If comments are provided, the task will be rejected, and the comments will be displayed in the workflow history panel.

To further explore and apply the concepts covered in this guide, we invite you to install the "Custom Approve Button" Yeeflow Application Template. This template is designed to demonstrate the configuration of custom approve and reject buttons on task forms and allows you to experiment with different customization options.

View the "Custom Approve Button" Template

With custom approve and reject buttons on the Yeeflow approval task form, you can enhance your approval workflows significantly. The ability to configure unique actions and collect custom comments adds flexibility and efficiency to the approval process. By following the steps outlined in this guide, you can seamlessly set up custom buttons and actions, leading to a more streamlined and collaborative approval experience.