SAP Screen Personas Javascript Code for Date Ranges
If you are developing SAP Screen Personas flavors using javascript code to set predefined date ranges like last month, this month or last week programmers can find sample codes for this task.
On a SAP Personas flavor, I have a filter section with two date fields: one for begin date and the other for end date.
To make it easier for the SAP Personas user, developers can create script buttons which runs javascript codes and set correct dates for the user in the selection fields.
This option will help the user gain time without opening the calendar and choosing from the popup calendar screen saving at least a few more clicks.
I prepeared three date range setting Javascript block; one for the last week or for last seven days, an other is for this month or for the current month, the last script is for the last month or for the previous month.
Please note that I formatted the date representation of each calculated date string in "dd/mm/yyyy" format which is suitable for Turkish. SAP Personas flavor developer can modify the javascript code where field text attributes are assigned accordingly.
To make it easie for the developers to visualize the need, I have attached screenshots from the SAP Screen Personas flavor filter area.
SAP Personas Javascript Code for Last 7 Days or for Last Week
As seen in below screenshot, for the Date criteria I want to enable SAP Screen Personas user easily set last week or last 7 days as the search criteria. When the Personas flavor user presses "Last Week" script button following Javascript code is executed.
To summarize the below Javascript code for identifying the begin and end dates for the last week, I start with getting today and going back to 7 days in timeline. Then after I got the 7 days earlier than today, I store it in javascript variable named last. Following step is to parse the date into days, months and years for displaying in a desired format on the input date field.
wnd[0]/usr/ctxtS_ERDAT_LOW is the begin date input field.
wnd[0]/usr/ctxtS_ERDAT_HIGH is the end date input field. I set todays parsed and concatenated parts to this field.
var days = 7;
var date = new Date();
var last = new Date(date.getTime() - (days * 24 * 60 * 60 * 1000));
var day = last.getDate();
if(day<10){
day = "0" + day;
}
var month = last.getMonth()+1;
if(month<10){
month = "0" + month;
}
var year = last.getFullYear();
session.findById("wnd[0]/usr/ctxtS_ERDAT_LOW").text = day + "." + month + "." + year;
var date = new Date();
var last = new Date(date.getTime());
var day = last.getDate();
if(day<10){
day = "0" + day;
}
var month = last.getMonth()+1;
if(month<10){
month = "0" + month;
}
var year = last.getFullYear();
session.findById("wnd[0]/usr/ctxtS_ERDAT_HIGH").text = day + "." + month + "." + year;
//session.findById("wnd[0]/usr/btnPersonas_1464781235531").press(); // press list button
I commented the button press action which enables me automatically setting and then directly searching with changed date criteria.
Javascript Code for Current Month Begin and End Dates
In this section, I assume the flavor user wants to search on the transaction for the current months values. So I created a javascript which finds the start date of the current month. For the last date, I set current date just like in previous javascript code.
var date = new Date();
var last = new Date(date.getTime());
var day = "01";
var month = last.getMonth()+1;
if(month<10){
month = "0" + month;
}
var year = last.getFullYear();
session.findById("wnd[0]/usr/ctxtS_ERDAT_LOW").text = day + "." + month + "." + year;
var date = new Date();
var last = new Date(date.getTime());
var day = last.getDate();
if(day<10){
day = "0" + day;
}
var month = last.getMonth()+1;
if(month<10){
month = "0" + month;
}
var year = last.getFullYear();
session.findById("wnd[0]/usr/ctxtS_ERDAT_HIGH").text = day + "." + month + "." + year;
//session.findById("wnd[0]/usr/btnPersonas_1464781235531").press(); // press list button
Set Last Month Start and End Dates using Javascript Code for SAP Personas
Assume that the SAP user wants to filter data for the last month period which means for the whole month before the current month. In this Javascript code, we find the first date of the previous month and set it to the first inputbox. For the second input text, we find the end date of the previous month.
Here is the Javascript code block for defining start and finish dates of previous month
var date = new Date();
var last = new Date(date.getTime());
var year = last.getFullYear();
var day = "01";
var month = last.getMonth()+1;
if(month===1){
month = "12";
year = year - 1;
} else {
month = month - 1;
}
if(month<10){
month = "0" + month;
}
session.findById("wnd[0]/usr/ctxtS_ERDAT_LOW").text = day + "." + month + "." + year;
var m;
if(month==12){
m = 1;
} else {
m = month;
}
var FirstDay = new Date(year, m, 1);
var lastMonth = new Date(FirstDay);
lastMonth.setDate(0);
var day = lastMonth.getDate();
session.findById("wnd[0]/usr/ctxtS_ERDAT_HIGH").text = day + "." + month + "." + year;
//session.findById("wnd[0]/usr/btnPersonas_1464781235531").press(); // press list button
I hope ABAP programmers who have just started using new SAP UX technologies like SAP Screen Personas and new to Web development languages like Javascript can find shared sample Javascript codes useful for setting predefined dates on Personas flavors.
