How to custom display Date fields in a DataTable widget

If you ever wondered how to custom display Date fields in a DataTable this article is for you.

When calling an External API, dates are displayed following this format : yyyy-MM-dd HH:mm:ss.SSS other than this one : yyyy-MM-ddTHH:mm:ss.SSS (ISO 8601).

This raises the problem that these dates can't be used with a filter to change how they're displayed (dateVariable|uiDate:'dd/MM/yyyy' for example displays 17/08/1990 other than 2019-08-17 12:00:00.000).

Resolution

For a date that has to be displayed in a Textfield, a Javascript variable for example can set the date into the right format. After this, you can use this variable with the specific uiDate filter that suits the most your need.

Here's a little example :

var datelastconnection = $data.userConnected.last_connection; 
return datelastconnection.replace(' ','T'); 

In the other hand when using a DataTable you're operating a large number of fields and generally this is done using a External API directly.

Here are the steps to follow if you want do do the same for a DataTable :

1) Create a new External API variable (humanTaskData for example);
2) Paste the link to your API (../API/bpm/humanTask?c=10&p=0&f=state=ready&d=processId&d=caseId&d=assigned_id) ;
3) Create a new Javascript variable (humanTaskDataFormatted);
a. Get the content of the first variable humanTaskData;
b. Get the fields that will be displayed into you DataTable;
c. Change the form of the dates as the previous example :

var dataTasks = $data.humanTaskData; 
var recordsList = []; 
var record = {}; 
for(var i in dataTasks) { 
var datelastconnectionIso = dataTasks[i].assigned_id.last_connection.replace(' ','T'); 
record = { 'firstname': dataTasks[i].assigned_id.firstname, 'dateFormatted': datelastconnectionIso}; 
recordsList.push(record); 
} 
return recordsList; 

4) Change the Data source of your DataTable using this time humanTaskDataFormatted;
5) Display "columns key" using uiDate for your fields of type Date.

Here is an example of a page using customized Date fields in a DataTable :
https://drive.google.com/file/d/18j2mkjhnFPHRV5q_ig4UnLmlCHEtmD83

Hope this little article helped you.