Gridx in XPages – 18: Formatting Date and Currency Columns
Certain data types in the grid are not automatically formatted in the way that you’d prefer. In this post, I’ll show how to format date and currency columns in a grid using features built into Dojo.
Gridx Series
Gridx in XPages — Entire Series
Formatting Dates
By default, a rest service providing a Notes Date/Time will provide it in a much longer format than you probably want to see in the grid.
To format it, you can use a decorator
function (described previously in this post).
Include the dojo locale module in the require
statement: dojo/date/locale
Then add a decorator
function to format the date. (Make sure the column dataType
is set to date
.)
decorator: function(value) { try { if (value) { // NotesDateTime comes out in this format: 2014-10-21T14:47:38Z var parsedDate = value.substring(0, 10); // Create and format the date var dt = new Date(parsedDate); var dateString = locale.format(dt, { selector: "date", datePattern: "dd-MMM-yyyy" }); return dateString; } } catch (e) { console.error('error decorating date: ' + e.toString()); } }
Line 6 parses out the first 10 characters from the date string
Line 9 creates a date object from the parsed string.
Lines 10-14 use the dojo locale formatting functionality to format the date to the desired pattern.
Now the date column is formatted in a way that’s much easier to read.
Formatting Currencies
By default a numeric column will display as a plain number.
Similar to the previous example, we can use a dojo module to format the data. In this case, we’ll add dojo/currency
to the require
statement.
Here’s a decorator
function that will format the data. (Make sure the column dataType
is set to number
.)
decorator: function(value) { if (value) { var formattedCurrency = currency.format(value, {currency: "USD"}); return formattedCurrency; } }
Line 3 is the core of this logic. It uses the dojo currency module to format the data as a currency. The currency attribute defines the currency to use. (Other examples include “EUR”, “GBP”, etc)
Here’s the same data with the currency set to EUR:
Date and currency conversions are a great example of why it is extremely handy to have a JavaScript framework like Dojo available.
Trackbacks / Pingbacks