Javascript Date function and dynamic coloring

[Jaiswal_Shubham]

While working in SAP adobe form, developers come across a situation where they need to calculate the arrears based on the creation date and payment date of a document. Also, there could be some requirements to color a particular cell based on the values populated. With the help of Javascript we can achieve these requirements in on premise system as well as on public cloud. 

In an on premise system the arrear days calculation can be handled using the ABAP code but while working in SAP Public cloud we need to make use of scripting language to achieve such requirements. 
In the below example I have demonstrated to use the Date function in javascript to calculate the arrears. Also the dynamic coloring of cells based on the value populated.

To demonstrate the example I have taken invoices from invoice table DFKKINVDOC_H.

Step 1: Create an adobe form interface in SFP T-code and do the relevant data select. Data can be selected as per the business requirements, but here for the simplicity I have selected all the invoices corresponding to a customer.

Step 2: Create the form layout in SFP T-Code and use the interface created in the previous step.

 

Step 3: I have added a column called as Arrears to calculate the date difference between the invoice creation date and net due date. 
Let's first generate the pdf and see the current output. 

Step 4: Now, we need to calculate the arrear days between the dates. We can do it using ABAP also but javascript helps us in public cloud.
To do so, select the Arrears column and then select the Calculate event and also select the Language as Javascript.

Step 5: Let's write the Javascript Code to calculate the difference between the dates using date function.

Now, when we have written the code in javascript, let's generate the pdf now and see if the data is coming for Arrears.

( Please ignore some of the values here as it is a development system and it can have data discrepancies. Our purpose is to use the Date function to calculate the difference )

var creationDate = this.parent.CRDATE.rawValue  // Creation date of the record
var dueDate = this.parent.FAEDN.rawValue;        // Invoice due date
// Split the raw value and get the correct date format. JS has this format YYYY-MM-DDT00:00:00
var invoiceCrDate = (creationDate.split("T")[0]).split("-");  // -> This will convert date format from YYYY-MM-DDT00:00:00 to YYYY-MM-DD
var invoiceDueDate = (dueDate.split("T")[0]).split("-");
// Get the Date, Month and Year individually for invoice Creation Date
var invCrYear = parseInt(invoiceCrDate[0]);
var invCrMonth = parseInt(invoiceCrDate[1]) - 1;  // Javascript Months are 0 index based and hence -1 is required
var invCrDate = parseInt(invoiceCrDate[2]);
// Get the Date, Month and Year individually for invoice Due Date
var invDueYear = parseInt(invoiceDueDate[0]);
var invDueMonth = parseInt(invoiceDueDate[1]) - 1;  // Javascript Months are 0 index based and hence -1 is required
var invDueDate = parseInt(invoiceDueDate[2]);
// Create a new Date object to find the difference
var startDate = new Date(invCrYear, invCrMonth, invCrDate, 00, 00, 00, 00);
var endDate = new Date(invDueYear, invDueMonth, invDueDate, 00, 00, 00, 00);
// Calculate the values of one day
var oneDay = 24 * 60 * 60 * 1000;  // here multiply with 1000 else the value will come in decimal
// calculate the difference
this.rawValue = Math.round((startDate - endDate) / oneDay);

Let's proceed further to color the cells accordingly. For example, we will color the cell with red if the arrear days is less than 0, color the cell with green if the arrear days is greater than 0, and keep the cell color as it is if the arrear days is equal to 0.

Step 6: First we need to find the RGB value of colors which are going to be used. We can find it easily on the internet. For our case we need RGB value of Red and Green color. 

( Based on your requirement and color combination, you can find the rgb value accordingly )
Red -> rgb(255, 0, 0)
Green -> rgb(0, 255, 0)

Just add the below additional code in the previous code( code written in step 5 )

// Let's assume that the arrears' cell with value greater than 0 should be colored with green color 
// And the cell value less than 0 should be colored with red and for 0 no color
if ( this.rawValue < 0 ){
      this.fillColor = "255,0,0", this.rawValue;
}
else if ( this.rawValue > 0 ){
       this.fillColor = "0,255,0", this.rawValue;
}

Step 7: Now, let's generate the pdf once again and see the output.

With the help of above steps we can achieve our arrear calculation as well as dynamic coloring of cell according to the value. This is one of the use cases of Date function in Javascript, you can have different scenarios to use the date function.

** One small bonus trick in JS, many of you might be knowing but this is also a kind of common requirements. The user may ask the developer to put the symbol of currency dynamically in the amount field **

Step 8 :  Select the Amount field and select the calculate event and then write the below code.

// Write the symbol of currency based on the recods.
var currKey = this.parent.TOTAL_CURR.rawValue;
if ( currKey == 'EUR' ){
      this.format.picture.value = "num{'€' z,zzz,zzz,zz9.99}", this.rawValue;
   }
else if ( currKey == 'USD' ){
      this.format.picture.value = "num{'$' z,zzz,zzz,zz9.99}", this.rawValue;
}
else {
      this.format.picture.value = "num{z,zzz,zzz,zz9.99}", this.rawValue;
}

Step 9: Let's generate the pdf once again and see the current output.

You may want to minimize the width of Curreny field( in our scenario it is the last column if you intent to show only the amount with symbol ).

Please let know if you have any other solutions for the above mentioned requirements. It will be helpful to all the ABAP developers.

Happy Learning !!!

Thanks,
Shubham