I wrote previously about how to adjust the journal table so that dates do not show the UTC values recorded as data changes against a ticket. That previous post was back when the grid was a SLXGrid and control and the code contained an example of how to convert the time based on the server’s time zone. not ideal since your users are likely not in the the same timezone as the web server.
The Ticket Hisotry tab in Infor CRM 8.2 now utilizes as Editable SData based grid control. These grids are constructed client side using Dojo and are populated via a client side SData feed. The good news with that is now we can work with javascript to get the user’s timezone and adjust the dates. Let’s take a look at how to do that.
The Editable grid has a Columns collection exposed. Opening this we can see the columns listed in the grid.
Each text based column has a Custom Format Property. Since we want to change both the OldValue and NewValue columns so they display the local date/timew rather that the UTC date/time, we will want to modify the Custom Format Function of each column. The workflow is exactly the same for both so I am just going to walk though changing one. When you do it you will need to do it to both columns.
Opening the Custom Format Function of the OldValue column we can see existing code in place.
At the very end of the code you will see a block of case statements:
switch (fieldName) { case "STATUSCODE": return formatPicklistid("Ticket Status", value); case "ASSIGNEDTOID": case "RECEIVEDBYID": case "COMPLETEDBYID": return formatSdata("owners", value); case "ACCOUNTID": return formatSdata("accounts", value); case "CONTACTID": return formatSdata("contacts", value); } return value;
We want to add additional conditions, to check for our date fields. There are several, so we can do something like this:
switch (fieldName) { case "STATUSCODE": return formatPicklistid("Ticket Status", value); case "ASSIGNEDTOID": case "RECEIVEDBYID": case "COMPLETEDBYID": return formatSdata("owners", value); case "ACCOUNTID": return formatSdata("accounts", value); case "CONTACTID": return formatSdata("contacts", value); case "ASSIGNEDDATE": case "COMPLETEDDATE": case "RECEIVEDDATE": return formatTime(value); } return value;
For my new case statement I am returning the result of a new function called formatTime. Lets see that:
var formatTime = function(time) { var formatTime = function (time) { var date = new Date(time + ' UTC'); return date.toLocaleDateString() + ' ' + date.toLocaleTimeString(); };
Remember this function needs to be declared before it is first used, so this has to be placed above our case statements. This new function takes the date value and simply adds UTC to the end of it. Then we can case that to the local equivalent date and time using toLocaleDateString and toLocaleTimeString, which for me looks like 01/20/2010 12:35 PM.
The final complete code:
(function () { var cache = {}; return function (value, inRowIndex, cell) { // Special format for some of the history fields var item = cell.grid.getItem(inRowIndex); var fieldName = cell.grid.store.getValue(item, "FieldName").toUpperCase(); if(cache[fieldName + "/" + value]){ return cache[fieldName + "/" + value]; } var formatPicklistid = function (pickListName, itemid) { var deferred = new dojo.Deferred(); var result = itemid; var config = { pickListName: pickListName, // Required storeMode: "id", displayMode: "text" }; this.pickList = new Sage.UI.Controls.PickList(config); this.pickList.getPickListData(deferred); deferred.then(dojo.hitch(this, function (data) { dojo.forEach(data.items.$resources, function (pickListItem, index, array) { //console.log(item.id + ' === ' + id); if (pickListItem.$key === itemid) { result = pickListItem.text; } }, this); }), function (e) { console.error(e); // errback } ); return result; }; var formatSdata = function (resourceKind, id) { console.log("Format sdata: " + resourceKind + " / " + id); var def = new dojo.Deferred(); dojo.xhrGet({ url: "slxdata.ashx/slx/dynamic/-/" + resourceKind + "('" + id + "')?format=json&select=Id", handleAs: "json", load: function (data) { cache[fieldName + "/" + value] = data.$descriptor; def.resolve(data.$descriptor); } }); return def; }; var formatTime = function (time) { var date = new Date(time + ' UTC'); return date.toLocaleDateString() + ' ' + date.toLocaleTimeString(); }; switch (fieldName) { case "STATUSCODE": return formatPicklistid("Ticket Status", value); case "ASSIGNEDTOID": case "RECEIVEDBYID": case "COMPLETEDBYID": return formatSdata("owners", value); case "ACCOUNTID": return formatSdata("accounts", value); case "CONTACTID": return formatSdata("contacts", value); case "ASSIGNEDDATE": case "COMPLETEDDATE": case "RECEIVEDDATE": return formatTime(value); } return value; }; })()