I’ve been working a lot with Notes and Timelines on the Portal recently, and it just so happens that I had a recent comment on one of my old posts asking about customizing how dates are shown when displaying notes. The code didn’t end up being too long, but it involves a couple different techniques that I thought were worth exploring a bit more in depth.

In the original post I provided some code that modified the Handlebar template used to display notes on Power Apps Portals. This was pretty straight-forward because all we needed to do was simple modifications to the template. However, I was then asked how we can customize the date and time format, which by default uses the timeago plugin to display not a date and time, but something like “2 days ago” or “15 minutes ago”.

Instead, they wanted to show the actually date stamp, in a specific format (dd mmm yyy hh:mm:ss).

There are no settings that I’m aware of to change the way those dates and times are displayed on the portal, or even to turn off the timeago plugin. If you look at the Handlebars template, you’ll see that the CreatedOnDisplay is the variable being displayed in a <abbr> element, which has a class of timeago. So, what happening is really two things:

• The Handlebars template displays the date in a common date and time format (yyyy-MM-ddThh:mm:ssZ).
• The timeago plugin is then called to convert that date and time into the timeago format.

So, to accomplish what we want to do, we need to do two things:

• Disable the timeago plugin so that it doesn’t overwrite the text.
• Convert the date and time format to the desired format.

The first thing is simple. If we remove the timeago class from the element, the plugin won’t be able to target it. So, we do this:

$('#notes-template').html( $('#notes-template').html().replace(/timeago/g, 'nottimeago'));

This code replaces the timeago class with nottimeago. If you just include this code, you’ll see the date and time in the original format:

Now, we need to convert that format to the one that we want. This is a bit trickier because it involves transforming data, not the template. To accomplish this, we can create a Handlebars helper function, and update the template to pass the data through the helper function before it is displayed. So, something like:

Handlebars.registerHelper('formatDate', function (aString) {
    return moment(aString).format('DD MMM YYYY HH:mm:ss');
});
 
$('#notes-template').html( $('#notes-template').html().replace(/timeago/g, 'nottimeago').replace(/CreatedOnDisplay}}<\/abbr>/g, 'formatDate CreatedOnDisplay}}</abbr>'));

First, the code registers a new Handlebars helper called formatDate, which takes in a single parameter and uses moment.js (which is included in Power Apps Portals) to format the string to the desired format (see this for more formatting options).

Next, the code replaces the timeago class as per above, and then adds the call to the formatDate helper when the CreatedOnDisplay variable is used. I’ve added the closing of the <abbr> tag to the search string so it only targets the display text and leaves the other attributes as they were.

This code gives us something like:

Which (I believe) is exactly what was wanted.