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

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

Like

Introduction

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

https://momentjs.com/downloads/moment.js

https://momentjs.com/downloads/moment-timezone-with-data.js

Step 2: Create a new coach view

Create a new process app/Toolkit either from the legacy ProcessCenter or from the newer WorkflowCenter landing page.
Add the 2 files we just downloaded to the project "web file" category.
Create a new “View” from the submenu User Interface. Let’s call it “momentDate”
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).
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".

Add following code in the "Inline Javascript"

var _this = this;
//On Load Function
this.onLoad = function() {
  console.log('onLoad');
 
  var date = !!_this.context.binding ? _this.context.binding.get("value") : undefined;
  var timezone = !!_this.context.options.timezone ? _this.context.options.timezone.get("value") : undefined;
  if(date!==null){
               // 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() {
  console.log('beforeUnload');
  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());
}

Call this function inside the 'OnLoad" event.
```
this.onLoad();
```
Add "Date" Control and bind business data and configuration variable to it.
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.

me.ui.getParent().beforeUnload();

Step 3: Create CSHS and test the coach view

Create a CSHS and let’s call it “Moment Date Control Test”.
In the coach editor, add one "Date/time picker" control from UI Toolkit and map date variable to it
Add newly created coach view with moment.js functionality
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
Call the same event on unload of the page to reset the date offset with required timezone information.
In this example, we are publishing event on click of the OK button.
```
bpmext.ui.publishEvent("TestEvent");
```