JS Dynamically Display Current Time

1.1 Requirement

The report only display static current time by inputting formula. How to display dynamic real time by inputting JS code?

1.2 Solution

Get the real time, refresh the cell every second, and display the real time in a certain cell.

Note

You can also use digital clock widget and plug-in to display real time. 

2.1 Sample 1

1) Get the real time and refresh the cell every second. Here the real time is displayed in C4, as shown below:

2) Click Template> Web Attributes>Data Entry Settings, select [Individually set for the template], and add an After-loading Event in the Event Settings Pane, as show below:

Input the JS code:

// Refresh the report every second
setInterval(function() {
        // Assign current time as the value to M
    var M = FR.remoteEvaluate('FORMAT(now(),"yyyy-MM-dd HH:mm:ss")');
    // Assign M as the value to C4
    contentPane.setCellValue("C4", null, M);
}, 1000);

2.2 Sample 2

Similarly, click Template>Web Attributes>Data Entry Settings, select [Individually set for the template], and add an After-loading Event in the Event Settings Pane, as show below:

Input the JS code:

function Appendzero(obj) {
   if(obj<10)
         return "0" +""+ obj; 
          //Check if obj is less than 10. If it is less than 10, append “0”before the first number.
   else 
          return obj;
}
FR.CLOCK = function(cell) {
   var cl = $('[id^='+cell+']');
     // Get A1 handle by calling FR.CLOCK('A1').
   setInterval(function(){
        var date=new Date();// Get the date
        var format=date.getFullYear()+"-"+Appendzero(date.getMonth()+1)+"-"+Appendzero(date.getDate())+" "+Appendzero(date.getHours())+":"+Appendzero(date.getMinutes())+":"+Appendzero(date.getSeconds());
//Format is a number string which combines hour, minute, second and dd-mm-yy and calls the function of Appendzero () to append “0” before the number which is less than 10.
        cl.html(format);
  // Display the data in the cell where cl points to by calling the HTML function.
   },1000);
 //1000ms=1s, namely, the report is refreshed every second
};
FR.CLOCK('A1'); // A1 is the cell to which the CLOCK function passes.

2.3 Sample 3

Above samples have introduced how to display the real time in the report in cpt file format. So how to display the real time in the report in frm file format?

Input the formula =now() in A1:

Then input the JS code to refresh the current report block every second.

Input the JS code:

var form = this.options.form;
setInterval(function() {
     form.getWidgetByName('report0').gotoPage(1,"{}",true);
}, 1000);

2.4 Preview

Save the template and select [Data Entry Preview]. The preview effect on a PC is shown as below:

2.4.1 Sample 1

Note

The advantage of this solution is that only the specified cell rather than all contents in the page is refreshed every second.

2.4.2 Sample 2

2.4.3 Sample 3

Note

You will find a load icon when previewing the JS code of Sample 3. 

3.1 Sample 1

Dynamically Display Current Time_1.cpt

3.2 Sample 2

Dynamically Display Current Time_2.cpt

3.3 Sample 3

Dynamically Display Current Time_3.frm