Workflow Sample: Episode 562: Reason for Not Using Cloud Expense Management System (4)

Operation: Reporting and Reimbursement of Expense

We have realized systematization of "Expense report flow" in cloud based Workflow! (see Episode 559: Reason for Not Using Cloud Expense Management System)

We have introduced a mechanism to realize "multilateral grouping" (clustering)! (see Episode 560: Reason for Not Using Cloud Expense Management System (2))

We have implemented a mechanism for real time appending to Spreadsheet! (see Episode 561: Reason for Not Using Cloud Expense Management System (3))

Challenge: Unawared Date mistake

However, "challenges to be solved" appears one after another...

"Input mistake" began to be prominent from about the third month after implementation, when people got accustomed to expense reporting. It might be because they make reports by reusing past data, "date errors" are found frequently.

The president would wonder "How could the date be remained mistaken? Despite confirmed by the section chief, the director, and the accounting!"

Certainly, "the date of payment" is a very important data item. It also serves as the data for determining the aggregation month of the monthly trial balance. Nonetheless, a section chief or department manager have plenty of check items to check... Even if "2017-11-20" was mistaken as "2016-11-20", they would "approve" it not noticing the mistake. There are only "6 items". So it's quite conspicuous if the date is wrong. (It sure is a trouble!)

A) Payment date
B) Record month
C) Accounts classification
D) Settlement amount
E) Assignment of claimer
F) Decision ID

[Expense Report flow-Input Check]

Solution: Admonition by JavaScript

In the field of "Date of payment" on this application form, there is a note that "Attention to input errors at reusing data". And if a past date earlier than 30 day ago such as " 2017-01-01 " was entered, this notation will be switched to the warning display in red letters which saying "You are entering date of 318 days before! Please be careful of input errors". An applicant will notice "appearance different from usual", if an old date has been entered in the "Date of payment".

Dynamic annotation messages with JavaScript like this, its "noticeability to users" goes lower as its number increases. Also "load on the browser" becomes matter of concern. The amount of messages to be set varies depending on the work. However, it can be said that JavaScript message is effective for the solution, when "input mistakes" occur frequently in actual operation.

※ <Decoration setting sample of Date input form (HTML / JavaScript)> is at the end of this article.

Incidentally, in this workflow, a link to the "Digest" is also displayed in the guide panel on the screen for applicant, approver and final decision. Incidentally, in this workflow, a link to the "Digest" is also displayed in the guide panel on the screen for applicant, approver and final decision, so that they can perform their tasks in aware of the Spreadsheet which the president will browse.

<Setting example of Decoration in Guide panel (HTML/JavaScript)>

<iframe height='240' width='98%' frameborder='0' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vTEO5O4QLHaQQVB9z8w9xNrJocGTH07ReXQJhXTVA3YdDxdKCkVQID0if0fvvv_29iPe4otUo8mOJ5s/pubhtml?gid=0&single=true'></iframe>
<br/>
<a href="https://docs.google.com/spreadsheets/d/18hRh-L9ZjX5Giv50HkeUKNVkyugSW7FyfTh1Kkmc4Tk/edit#gid=0">The Digest (Google Spreadsheet)</a>

Discussion: Limitation of JavaScript decoration

Decoration of input screen using JavaScript / jQuery has various restrictions.

In the case of the cloud-based workflow "Questetra BPM Suite", not all jQuery events can be accurately acquired since the product itself uses jQuery extensively. Particularly, the jQuery event of the input form which has a complicated structure such as "Date type form" and "Search select" is also very complicated. To keep being fully compatible with future specification changes is not easy either.

In this example, the change event of the text form "Title" which is a relatively simple structure is used as a trigger to check the date of payment.

== Setting example for Decoration in Date input form (HTML/JavaScript) ==

<span id='my5deco'><span style='color:#0000FF;'>Attention to input errors at reusing data</span></span> 
<script type="text/javascript"> 
jQuery("input[name='title']").on('change', function(){ 
var formStr = jQuery("input[name='data\\[0\\].input']").val(); 
  if( formStr !== "" ){ 
    var formDate = new Date( formStr ); 
    var myToday  = new Date(); 
    var myDiff   = Math.ceil( ( myToday.getTime() - formDate.getTime() ) / 86400000); 
    var myMsg = ""; 
    if( myDiff >= 30){ 
      myMsg = "<span style='color:#FF0000;'>\""; 
      myMsg += formDate.toISOString().slice(0,10); 
      myMsg += "\" is a date of"; 
      myMsg += myDiff; 
      myMsg += " days before！Attention to input errors"; 
      myMsg += "</span>"; 
      jQuery('#my5deco').html( myMsg ); 
    }else if( myDiff < 0){ 
      myMsg = "<span style='color:#FF0000;'>\""; 
      myMsg += formDate.toISOString().slice(0,10); 
      myMsg += "\" is a future date！Attention to input errors"; 
      myMsg += "</span>"; 
      jQuery('#my5deco').html( myMsg ); 
    } 
  } 
}); 
</script>

[Expense Report flow-Input Check:"1. Report" screen]