BPM, Workflow, and Case

 View Only

IBM BAW- Date Control- Overriding timezone information in the BAW Date control with MomentJS

By Sachin Jain posted Wed December 27, 2023 12:05 AM



In this blog post, We will be overcoming issues and challenge faced by business users who need to view date and time information in a predefined timezone, irrespective of their location.

We have created custom coach view with the help of moment.js library to solve the issue.

Problem Statement:

The business user requires the ability to view date and time information in a predefined timezone, regardless of the user's current location. Unfortunately, the default Date/Time control currently displays information based on the browser's local timezone, creating a misalignment with the desired functionality.


Example:In a mortgage application, the disbursement date must be chosen and presented based on the market for which the application is created. This remains true regardless of the current working location of backend office users.


Solution: A custom coach view has been developed, utilizing the moment.js library, to dynamically update the date on the screen according to the market application's timezone specifications.


Technical Details:


During the load Event, we synchronize time to the market-specific timezone by employing the "moment().tz(String, Boolean)" function, with the second parameter set to true in above function. Setting the second parameter to true ensures that only the timezone (and offset) is modified, while the local time remains unchanged. This adjustment allows for accurate display within the BAW control.


It's essential to note that, as a consequence of this offset modification, the time now references a different point in time if the offset has changed. Therefore, when unloading the page, it becomes imperative to revert the offset to capture accurate time information in the market-specific timezone. To achieve this, the offset is updated again using the aforementioned function.

Steps to create Reusable Coach View:

Step 1: Download the required library files

Start by downloading Moment.js library as minified JavaScript files



Step 2: Create a new coach view

  1. Create a new process app/Toolkit either from the legacy ProcessCenter or from the newer WorkflowCenter landing page.
  2. Add the 2 files we just downloaded to the project "web file" category.
  3. Create a new “View” from the submenu User Interface. Let’s call it “momentDate”
  4. In the variables tab, we will create 5 configurations options: label (String), timezone (String), format (String), includeTimePicker (String) and subscriptionEventName (String). The bound data will be stored with the name “Date”(Date).
  5. In the behaviour tab, select the "Included Scripts" node and click the "+" button to add the 2 downloaded scripts. Make sure to select the script load style as “script tag".

  6. Add following code in the "Inline Javascript"
    var _this = this;
    //On Load Function
    this.onLoad = function() {
      var date = !!_this.context.binding ? _this.context.binding.get("value") : undefined;
      var timezone = !!_this.context.options.timezone ? _this.context.options.timezone.get("value") : undefined;
                   // convert to timezone
                   date = moment(date).tz(timezone).tz(moment.tz.guess(), true).toDate();
                   _this.context.binding.set("value", date);
     //Unload Function
    this.beforeUnload = function() {
      var date = !!_this.context.binding ? _this.context.binding.get("value") : undefined;
      var timezone = !!_this.context.options.timezone ? _this.context.options.timezone.get("value") : undefined;
      _this.context.binding.set("value", moment(_this.context.binding.get("value")).tz(timezone, true).toDate());
  7. Call this function inside the 'OnLoad" event.
  8. Add "Date" Control and bind business data and configuration variable to it.

  9. Add "Event subscription" and bind "subscriptionEventName" configuration variable to its bindings.

Also add following code under event section of the "Event Subscription" Event. This function will be called to reset the date value based on the defined timezone.


Step 3: Create CSHS and test the coach view

  1. Create a CSHS and let’s call it “Moment Date Control Test”.
  2. In the coach editor, add one "Date/time picker" control from UI Toolkit and map date variable to it
  3. Add newly created coach view with moment.js functionality
  4. Add configuration in the moment date coach view to pass required timezone, we are using timezone of "Europe/London".
    1. Label: Moment Date Picker (London Time)
    2. timezone: Europe/London
    3. subscriptionEventName : TestEvent
  5. Call the same event on unload of the page to reset the date offset with required timezone information.
  6. In this example, we are publishing event on click of the OK button.

Step 4: Run the CSHS and check the output

Example 1. Local timezone: Asia/Kolkata

Requited timezone: Europe/London

Both the date has marked has default and initialised with same time. while screen will display time based on

the set timezone in the configuration variable.

Example 2: Local timezone: Asia/Kolkata

Requited timezone: America/New_York

on click of OK button event will be fired and offset date time will be corrected if anything is changed in the

screen with the required timezone. The last step is very much required to be called else there can be

mismatch in the displayed time information and back end time data.

Co- Authors: 

This solution is developed and written with the help of following contributors:

1. Mukesh Verma

2. Sanjay Chembali

3. Sachin Kumar Jain

#BusinessAutomationWorkflow(BAW)#IBMBusinessAutomation #DateControl #IBMBAW

Alert Service Design