193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 4
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 4
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 5
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 8
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 6
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 4
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 3
Top 10
Changing the Search Behavior of a Dojo Filtering Select in XPages
Tue, Jul 22nd 2014 10
Gridx in XPages – 4: Loading Live Data via a REST Service
Mon, Nov 10th 2014 10
Gridx in XPages – 18: Formatting Date and Currency Columns
Thu, Dec 18th 2014 10
Passing Parameters to SSJS from a Client-side partialRefreshGet()
Mon, Jul 14th 2014 9
Gridx in XPages – Creating a Simple Grid
Thu, Nov 6th 2014 9
Gridx in XPages – 8: Column Sorting with a Local Data Store
Tue, Nov 18th 2014 9
Updating Select2 Styling to Match Bootstrap Fields
Tue, Aug 11th 2015 9
Gridx in XPages – 27: Exporting to Excel
Thu, Jan 22nd 2015 8
Set Focus on a Field when Showing a Bootstrap 3 Modal
Wed, Aug 6th 2014 8
Gridx in XPages – 19: Column Group Headers
Tue, Dec 23rd 2014 8


Gridx in XPages – 18: Formatting Date and Currency Columns
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Brad Balassaitis    

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.

Gridx 18 A

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.

Gridx 18 B

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.

Gridx 18 C

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)

Gridx 18 D

Here’s the same data with the currency set to EUR:

Gridx 18 E

Date and currency conversions are a great example of why it is extremely handy to have a JavaScript framework like Dojo available.




---------------------
http://xcellerant.net/2014/12/18/gridx-in-xpages-18-formatting-date-and-currency-columns/
Dec 18, 2014
11 hits



Recent Blog Posts
4
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 7:08a   Brad Balassaitis
A
4
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 7:07a   Brad Balassaitis
A
5
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 7:07a   Brad Balassaitis
A
8
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 7:07a   Brad Balassaitis
A
6
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 10:15a   Brad Balassaitis
I recently spent some time investigating a client’s reports of unexpected behavior with the duration of browser sessions while testing an application on a test server. From time to time, they were required to login even while actively using an application. In this post, I’ll highlight the difference between an idle session timeout and an […]
4
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 6:06a   Brad Balassaitis
A
3
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 6:06a   Brad Balassaitis
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition