Note: This page applies primarily to the classic form designer.
When assigning user tasks to others, there is a box that allows you to add an optional comment explaining why you are assigning the task. This box can be customized using JavaScript or CSS, as demonstrated in the following examples.
Hiding the Comments Box
The following CSS rules will hide the comments box.
.approval-wrap #comments{display:none;}
.approval-wrap p{display:none;}Making Comments Required
By default, comments on user tasks are optional. However, you can make comments required using some custom JavaScript. The following snippet displays a custom error message when the user attempts to reject, approve, or submit a form without having entered comments. For the following JavaScript snippet to work, the custom error message should be added as a custom HTML element from the Layout page of the form designer and assigned the custom class error_comments.
$(document).ready(function() {
//hide error message when document first loads
$('.error_comments').hide();
//wait for user to reject/approve/submit form
$(document).on('click', '.Reject, .Approve, .Submit', checkComments);
//Display error if no comments provided
function checkComments(){
//if there are no comments
if($('#comments').val() == '')
{
//show red border around comments box and show error message
$('#comments').css('border-color', '#ba0000');
$('.error_comments').show();
return false;
}
}
//checks for user focusing on comment box
$(document).on('focus', '#comments', remove_checkComments);
//remove border style and comments when user focuses on comment box
function remove_checkComments(){
$('#comments').removeAttr('style');
$('.error_comments').hide();
}
});The snippet works by waiting for the page to load, then hiding the error message immediately, as it should be displayed only when the user tries to approve, submit, or reject the form. It then waits for one of the latter three actions, and calls the checkComments function when any of them happen. If there are no comments when the relevant event happens, it puts a red border around the comments box and shows the custom error message.
To avoid distracting the user when they are entering comments, the snippet also removes the error message and red border when the user focuses on the comments box to type in their comments.
The code snippet as it stands requires comments for any action the user chooses for the task, but you can easily customize it to require comments only for form rejections, for example, by replacing $(document).on('click', '.Reject, .Approve, .Submit', checkComments); with $(document).on('click', '.Reject', checkComments);.
Changing the Name of the Comments Box
By default, the comments box is labeled "Comments." To change this, use the following JavaScript snippet:
$(document).ready(function() {
$(".approval-wrap .comment-section > label").text("New Label");
});Replace New Label with your label of choice.