SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software
Development resources, articles, tutorials, code samples, tools and downloads for SAP HANA and ABAP, HANA Database, SQLScript, SAP UI5, Screen Personas, Web Dynpro, Workflow


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.

SAP Personas Javascript code for last week start and end dates

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
Code

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.

Javascript code for current month for SAP Personas layout developer

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
Code

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.

SAP Personas script codes for last month begin and end date range

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
Code

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.



SAP HANA and ABAP

Install SAP Free
CRM Companies List
Web Based CRM Software


Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.