IBM Business Automation Workflow Using DateTimePicker in Tables

Stop errors from showing in the client log when working with DateTimePicker in tables.

Wilfred Iven © stocksnap.io

Authors: Leonard Blunt, Greg Ekaprana, Okka Sudaryanto, Diorella Mari Tom

Introduction

The DateTimePicker view is a BAW UI toolkit component that creates an input text field and a calendar to select date and time data. This article details how to avoid somewhat harmless but confusing errors when using the DateTimePicker within a data table.

Note: For performance in a larger table, it's better to use an Output Text with a formatted date for showing the date. To update the Date in a large table, it's better to add an icon in the cell that will open a modal that consists of DateTimePicker view.

If we assign a Date variable to the DateTimePicker when the data is empty, the ‘Console’ tab will not show any error and it will work smoothly.

If we fetch another date and update the Business Object that already contains a date inside it, the front-end date will change the new value. But, the ‘Console’ log in the browser will show several errors as shown in Figure 1.

Figure 1. Error of DateTimePicker when updating the Business Object

Through investigation we observed that this error only occurred if we use and update the business object that has a nested date property. If the DateTimePicker is used in a form, it only showed once when we update the Business Object.

To avoid this type of error occurring the developer should

• In the case that the DateTimePicker is part of an input form, when fetching the data from database or other data source, it’s better to parse the result to TWDate() type rather than Date() type.

//DTPExample is the object
tw.local.dataOuput = new tw.object.DTPExample();
var date = new TWDate(tw.local.date1);
tw.local.dataOutput.myDate = date;
...

• In case that the DateTimePicker in a table, it’s advisable to assign to the DateTimePicker directly to DateTimePicker in each row and column rather than assign it to the Business Object.

...
for(var i = 0; i < numberOfData; i++){
 console.log(data[i].data1, data[i].data2);
 var parsedDate = CheckDate.parseDate(data[i].data2);
 console.log("Data number " + i, parsedDate);
 _this.ui.get('dtpExample/dtp', i).setDate(data[i].data2);
}
...