Workflow Sample: Episode 534: Devising to Prevent Date Input Errors

Too many input errors?

In the workflow system, "input errors" in human steps can not be avoided.

For example, if it is a workflow step that requires input of two date values "Bill issuance date" and "Payment due date", mistakes tend to occur such as;

Enter the date of one year ago as leaving the date after duplicating data
Enter Bill issuance date and Payment due date inversely

(You'd better to calculate the actual occurrence rate, occasionally.)

Of course, it may be careless of the person in charge who made mistake. Alternatively, if you were highly concentrated, you could enter without making mistakes during that moment. However, I have to say it is rather difficult to keep on doing 100 cases or 1000 without mistakes. If you have numerous input items, it may be difficult even for 5 or 10 cases without mistakes.

Configure initial values

If it is possible to set "Initial value" as a function of the system, you should actively use it.

In the Cloud-based workflow, "Questetra BPM Suite", you can set "Three days after today" and "last day of the next month" as the initial value of Date data items. Although it is ineffective in the case of "data duplication", it is a very effective method when flowing new Issue data to the business process.

＜Setting screen＞

[Date Input Form Test]

Indicate an Input support button

In the case where the input value can be patterned, it is effective to use "Input support button".

For example, if most of the input values of "Bill issuance date" are "Today" or "Tomorrow" or "The first of the next month", the occurrence rate of aforementioned mistakes can be reduced to closely to zero.

Even though knowledge of JavaScript is required in the Cloud-based workflow "Questetra BPM Suite", but you should positively consider it if you have people with knowledge about "rewriting HTML with JavaScript" around you. (You must be careful as there is a risk of making the system unstable if you write JavaScript excessively.)

* "Now" button is equipped as standard function.

Example of setting "Input support button" as decoration (HTML/JavaScript)

<button type='button' id='my2decoTomorrow'>Tomorrow</button> 
<button type='button' id='my2decoFollowingMonth'>The first of the next month</button> 
<script type='text/javascript'> 
  jQuery("#my2decoTomorrow").on("click",function(){  
    var myTomorrow = new Date(); 
    myTomorrow.setDate( myTomorrow.getDate() + 1 ); 
    var y = myTomorrow.getFullYear(); 
    var m = myTomorrow.getMonth() + 1; 
    var d = myTomorrow.getDate(); 
    var tmp = y + '-' + ('0' + m).slice( -2 ) + '-' + ('0' + d).slice( -2 ); 
    jQuery("input[name='data\\[2\\].input']").val( tmp );}); 
  jQuery("#my2decoFollowingMonth").on("click",function(){  
    var myFM = new Date(); 
    myFM.setDate(1); 
    myFM.setMonth( myFM.getMonth() + 1 ); 
    var y = myFM.getFullYear(); 
    var m = myFM.getMonth() + 1; 
    var tmp = y + '-' + ('0' + m).slice( -2 ) + '-01'; 
    jQuery("input[name='data\\[2\\].input']").val( tmp );}); 
</script>

Indicating a Validation button

"Validation button" for self-checking after input may be effective.

This is a button just to display the entered date value as "n days before / n days after, and day of the week". But you can reduce the risk of typing errors greatly, by simply adding a habit of clicking "Validation button" after input.

Although this setting requires knowledge of JavaScript as well, it is a very effective mistake prevention measure to the input form for "Payment due date", for example, which basically a future date to be entered .

Example of setting "Validation button" as decoration (HTML/JavaScript)

<button type='button' id='my3deco'>Check</button> <script type='text/javascript'> 
  jQuery('#my3deco').on('click',function(){  
    var myToday = new Date(); 
    var targetDate = new Date( jQuery("input[name='data\\[3\\].input']").val() ); 
    var dayStr= new Array("Sun","Mon","Tue","Wed","Thu","fri","Sat"); 
    var myDiff = targetDate.getTime() - myToday.getTime(); 
    var myDiffDays = Math.floor( myDiff / ( 1000 * 60 * 60 * 24 ) ) + 1; 
    var tmp = ""; 
    if( myDiffDays < 0 ){ tmp = "<font color='red'>" + myDiffDays + "days before (" + dayStr[ targetDate.getDay() ] + ")</font>";  
    }else{ tmp = myDiffDays + "days after (" + dayStr[ targetDate.getDay() ] + ")"; } 
    jQuery('#my3decoView').html( tmp ); 
  }); 
</script> <span id='my3decoView'><font color='gray'>(e.g. 25 days after (Wed) )</font></span>