Assigning Values in a Specified Range to Parameters by JS-based Custom Button-FineReport Help Document

Last update：July 08, 2025

Overview

Expected Effect

It is cumbersome to manually select parameter values for data queries every time in weekly, monthly, quarterly, and annual reports. Therefore, you need a quick data filter method that allows you to quickly locate the data within an appropriate time range just by clicking a button, as shown in the following figure.

Effect one: You can obtain the time ranges of weekly, monthly, quarterly, and annual reports according to the system time.

Effect two: You can obtain the time ranges of weekly, monthly, quarterly, and annual reports according to custom date ranges.

Implementation Method

You can add a button to the parameter bar and add a Click event by JavaScript for the button to assign values to specified parameters.

Example

Example One

Designing the Report Style

1. Create a sheet and add two template parameters, namely, start_time and end_time, as shown in the following figure.

2. Insert the formulas $start_time and $end_time to cells B1 and B2, respectively, and design the report style, as shown in the following figure.

Adding Date Widgets

1. Switch to the parameter panel, add two label widgets, and set the widget values to Start Time: and End Time:, respectively, as shown in the following figure.

2. Add two date widgets and set the widget names to start_time and end_time, respectively, as shown in the following figure.

Adding Button Widgets

1. Add a button widget, and set the widget name to This Week, as shown in the following figure.

2. Add a Click event for the button widget This Week, as shown in the following figure.

The JavaScript code is as follows.

// Obtain the first day of the week where the current date is located.
var K1='${=dateInWeek(TODAY(),1)}';
// Obtain the last day of the week where the current date is located.  
var K2='${=dateInWeek(TODAY(),-1)}';
// Obtain the widget (start_time).
var state1 = this.options.form.getWidgetByName("start_time");
// Obtain the widget (end_time).
var state2= this.options.form.getWidgetByName("end_time");
// Assign a value to the widget (start_time).
state1.setValue(K1);
// Assign a value to the widget (end_time).
state2.setValue(K2);

3. Following the above-mentioned method, add the button widgets This Month, This Quarter, and This Year, and add Click events for the widgets, respectively.

The JavaScript code of the button widget This Month is as follows.

// Obtain the first day of the month where the current date is located.
var K1='${=DATEINMONTH(TODAY(),1)}';   
// Obtain the last day of the month where the current date is located.  
var K2='${=DATEINMONTH(TODAY(),-1)}';
// Obtain the widget (start_time).
var state1 = this.options.form.getWidgetByName("start_time");
// Obtain the widget (end_time).
var state2= this.options.form.getWidgetByName("end_time");
// Assign a value to the widget (start_time).
state1.setValue(K1);
// Assign a value to the widget (end_time).
state2.setValue(K2);

The JavaScript code of the button widget This Quarter is as follows.

// Obtain the first day of the quarter where the current date is located.
var K1='${=dateINQUARTER(TODAY(),1)}';
// Obtain the last day of the quarter where the current date is located.
var K2='${=dateINQUARTER(TODAY(),-1)}';
// Obtain the widget (start_time).
var state1 = this.options.form.getWidgetByName("start_time");
// Obtain the widget (end_time).
var state2= this.options.form.getWidgetByName("end_time");
// Assign a value to the widget (start_time).
state1.setValue(K1);
// Assign a value to the widget (end_time).
state2.setValue(K2);

The JavaScript code of the button widget This Year is as follows.

// Obtain the first day of the year where the current date is located.
var K1='${=DATEINYEAR(TODAY(),1)}';   
// Obtain the last day of the year where the current date is located.  
var K2='${=DATEINYEAR(TODAY(),-1)}';
// Obtain the widget (start_time).
var state1 = this.options.form.getWidgetByName("start_time");
// Obtain the widget (end_time).
var state2= this.options.form.getWidgetByName("end_time");
// Assign a value to the widget (start_time).
state1.setValue(K1);
// Assign a value to the widget (end_time).
state2.setValue(K2);

4. Finally, add a Query button. The following figure shows the final parameter panel style.

Effect Display

1. PC

Save the template and click Pagination Preview. Click the corresponding buttons to obtain the range values of weekly, monthly, quarterly, and annual reports according to the system time, as shown in the following figure.

2. Mobile Terminal

The following figure shows the preview effect on the DataAnalyst app and the HTML5 terminal.

Example Two

Adding Date Widgets

1. Create a template, add three date widgets, and set widget names to RQ, B_TIME, and E_TIME, respectively, as shown in the following figure.

2. Set Returned Value's Type to String and Format to yyyy-MM-dd for the date widget RQ, as shown in the following figure.

Adding Button Widgets

1. Add four button widgets and add Click events for the widgets, respectively, as shown in the following figure.

The JavaScript code of the button widget This Week is as follows.

Note:

The FR.remoteEvaluate API poses certain security risks. Use it as needed based on your situation. For details, see Global API - FR.

// Obtain the value of the widget RQ and assign the value to the parameter RQ.
var RQ=this.options.form.getWidgetByName("RQ").getValue();
// Obtain the first day of the week that contains the value of the parameter RQ and assign the obtained date to parameter s.
var s=FR.remoteEvaluate('FORMAT(DATEINWEEK("'+RQ+'",1),"yyyy-MM-dd")');
// Obtain the last day of the week that contains the value of the parameter RQ and assign the obtained date to parameter e.
var e=FR.remoteEvaluate('FORMAT(DATEINWEEK("'+RQ+'",-1),"yyyy-MM-dd")');
// Assign a value to the widget B_TIME.
this.options.form.getWidgetByName("B_TIME").setValue(s);
// Assign a value to the widget E_TIME.
this.options.form.getWidgetByName("E_TIME").setValue(e);

The JavaScript code of the button widget This Month is as follows.

var RQ=this.options.form.getWidgetByName("RQ").getValue();
var s=FR.remoteEvaluate('FORMAT(DATEINMONTH("'+RQ+'",1),"yyyy-MM-dd")');
var e=FR.remoteEvaluate('FORMAT(DATEINMONTH("'+RQ+'",-1),"yyyy-MM-dd")');
this.options.form.getWidgetByName("B_TIME").setValue(s);
this.options.form.getWidgetByName("E_TIME").setValue(e);

The JavaScript code of the button widget This Quarter is as follows.

var RQ=this.options.form.getWidgetByName("RQ").getValue();  
var s=FR.remoteEvaluate('FORMAT(DATEINQUARTER("'+RQ+'",1),"yyyy-MM-dd")');  
var e=FR.remoteEvaluate('FORMAT(DATEINQUARTER("'+RQ+'",-1),"yyyy-MM-dd")');  
this.options.form.getWidgetByName("B_TIME").setValue(s);  
this.options.form.getWidgetByName("E_TIME").setValue(e);

The JavaScript code of the button widget This Year is as follows.

var RQ=this.options.form.getWidgetByName("RQ").getValue();
var s=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",1),"yyyy-MM-dd")');
var e=FR.remoteEvaluate('FORMAT(DATEINYEAR("'+RQ+'",-1),"yyyy-MM-dd")');
this.options.form.getWidgetByName("B_TIME").setValue(s);
this.options.form.getWidgetByName("E_TIME").setValue(e);

2. Add a Query button. The following figure shows the final parameter panel style.