Introduction and Presentation
Hello everyone,
I'm Sebastiano Marchesini SAPUI5 and HANA's developer.
I currently work within the Padua Techedge Group’s division which is specialized in PPM (Project Portfolio Management).
Graduated in Computer Science, I undertook specifically the new technology path.
I worked closely with ABAP, producing simple functions linked to the data’s classification and query, although this is not my main task. In fact, I have been interested in web technologies, such as JavaScript language (SAPUI5 for FIORI) and a new collection of extensions to the Structured Query Language (SQL) of the database HANA, via SQLScript and CDS. I have also been approaching the software Lumira, used to create and develop reports.
I want share My Utilities.js file for improve my writing blog experience, knowing new colleagues/friends and for helping you where I have spent a great deal of time on to found that answers.
This is my first blog, don't be shy and for any questions ask !
Maybe, if the blog it's interesting, I will create a series with all scripts I've found or created in my projects. I want to teach all the steps for newcomers in Sapui5...
Are you ready ? Start...
Index
- First part answer the "4+1" W questions of Utilities.js “what”, “why”, “where”, “when” and “how”
From now on start the functions of personal library : - .formatDate // Format date to "normal" prints values
- .formatDashDateToDate // Format "dash date" to date
- .changeInfinityWithNull // Infinity to Null
- .createStringChangeOn // Create change one element
- .formatABAPDate //format ABAP date from JavaScript Date
- The end of blog with summary
1) What , Why, Where, When and How
What is Utilities.js file?
Utilities.js is in every way a JavaScript file for controlling the View and for lighten the master controller role. It's a library where we can put global variables and functions.
Why do we use Utilities.js?
This file is useful because contain a lot of functions that I don't considerate part of the main flow of application, but little scripts used to do some conversion or another simple tasks.
Where do we put Utilities.js ?
If we think of the architecture "Model View Controller" of our FIORI application it is obvious that utilities.js is in the Controller directory.
When do we call Utilities.js?
We call Utilities.js whenever we want, because is a personal and simple library. There aren't best practices for call that. Use it without any problems.
How to call Utilities.js ?
Maybe for the veterans is easy but I want be specific. The utilities.js is the classic sapui5 "class" like a controller file. This is the Header (or structure) of Utilities.js. The definition is standard and simple:
sap.ui.define([
"./Utilities"
], function () {
"use strict";
// class providing static utility methods.
return {
//where is the magic and the magic do stuff
};
});The major uses of the scripts is in the master controller. Where I built the core of manage application and I wouldn't overload of generic functions.
I want be clear:
util now is the variable then we use all the function in own master controller.
What functions ?
2) .formatDate // Format date to "normal" prints values
I know, you think there are format option DataFormat of XML and class but for easy conversion as you want I prefer the classical JavaScript and this function help me a lot of times for uses string in my view.
The input is JavaScript date vale ( like new Date(); ) and the output is the string date:
formatDate: function (date) {
var dd = date.getDate();
var mm = date.getMonth() + 1; //January is 0!
var yyyy = date.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
return mm + '-' + dd + '-' + yyyy;
},3) .formatDashDateToDate // Format "dash date" to date
In one of my application I want reconverted the "dash date".
I've created this function and if the years is 9999 I know is mining the date is 12-31-9999.
I founded the maximum date I can use in JavaScript and is in this script ( thanks stackoverflow )
formatDashDateToDate: function (sDate) {
var aDate = sDate.split("-");
if (aDate[2] === '9999') return new Date(253402214400000);
return new Date(aDate[0], aDate[1], aDate[2]);
},Input: date with 12-31-9999 format
Output: JavaScript date format
4) .changeInfinityWithNull // Infinity to Null
Where do we create an infinity number ? I don't know but Back End and the Coding is mysterious. I want protect our code, our view and users for the infinities numbers and I've created this simple function in memory of Buzz Lightyear.
changeInfinityWithNull: function (nNumber) {
var sNumber = String(nNumber);
return sNumber === "Infinity" ? null : sNumber;
},Input: infinity number like Number(1/0).
Output: null or number.
5) .createStringChangeOn // Create change on element
In our applications usually we manage an object ( we work with PPM module ) and the users want to know when and who changed it.
In this example there is a CDS calls and 2 important fields ChangedOnDate and ChangedOnTime in my case. I don't know if for you is really useful because usually there is only one field with timestamp type but for don't throw away anything it is the code:
createStringChangeOn: function (ChangedOnDate, ChangedOnTime) {
var dDate = new Date(Date.UTC(
ChangedOnDate.getFullYear(),
ChangedOnDate.getMonth(),
ChangedOnDate.getDate(),
window.parseInt((ChangedOnTime / (1000 * 60 * 60)) % 24),
window.parseInt((ChangedOnTime / (1000 * 60)) % 60),
window.parseInt((ChangedOnTime / 1000) % 60)));
var sHours = dDate.getHours();
var sMinutes = dDate.getMinutes();
if (sHours.length === 1 || sHours < 10) {
sHours = "0" + sHours;
}
if (sMinutes.length === 1 || sMinutes < 10) {
sMinutes = "0" + sMinutes;
}
return this.formatDate(dDate) + " " + sHours + ":" + sMinutes;
},First we create a date with UTC function because the back end system don't know where we are.
If the server is in Berlin at 00:30 on 1st of April, and we open app in London the first part of function create the 23:30 on 31st March. Only for this task I am taking charge with UTC conversion.
After that is only for layout of timing. I'm using the 24-hours clock format.
Look, in the return I recall the formatDate method n°1 in this blog!
Input: ChangeOnDate (JavaScript Type) and ChangeOnTime (ms Type).
Output: String 12-31-2019 20:30
6) .formatABAPDate //format ABAP date from JavaScript Date
In this blog I've harvested a lot of conversion Date function and I want to close the blog with the best format date in the world : the ABAP format.
For the SAP System, ABAP date is the blood and this is the simple function for convert the JavaScript date to ABAP.
There aren't complication, only simple code.
formatABAPDate: function (date) {
var d = new Date(date),
month = "" + (d.getMonth() + 1),
day = "" + d.getDate(),
year = d.getFullYear();
if (month.length < 2) {
month = '0' + month;
}
if (day.length < 2) {
day = '0' + day;
}
return year + month + day;
},Input: JavaScript Date Format
Output: String ABAP Date Format 20190401
7)
As you may know there are easier and more effective methods to complete the tasks and achieve the same result... but in the "everyday life" I believe those are enough.
In this blog we learned:
- what is and how to use Utilities.js;
- create in JavaScript a pretty date for view;
- reconvert the date in point 2 to JavaScript date type;
- be focus on infinity (date, integer, etc);
- convert date and time in string type using universal time instead of the local time;
- to form ABAP date from JavaScript date type.
In the next chapter I'm going to talk about Guid conversion, split of elements and other magic stuff.
Please tell me any advice and be proud of your code!
- SAP Managed Tags:
4 Comments
