Realizing Widget Linkage and Query in the FVS Report

Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

Note: Mobile devices are not supported.

Versions

Application Scenarios

Due to business needs, in many cases, you may need to filter information under certain conditions to display useful information.

Implementation Method

Manage the visibility of the widget through setting the visible() and invisible() properties in JS:

var value = duchamp.getWidgetByName("Widget Name").getText();//Get the display value of the widget

duchamp.getWidgetByName("Widget Name").setVisible(true); //Set the widget to be visible

duchamp.getWidgetByName("Widget Name").setVisible(false); //Set the widget to be invisible

Preparing the Template

1. Click File > New FVS Report in the top left corner of the FineReport Designer, and customize the template name and size.

2. Create the database query named ds1 and enter the following SQL query statement:

SELECT * FROM order where 1=1 ${if(type=="daily"," and date(order date)='"+ date +"'",

if(type=="monthly"," and strftime('%m',order.order date)='"+ month+"'"+" and strftime('%Y',order.

order date)='"+ year+"'"," and strftime('%Y',order.order date)='"+ year+"'"))}

Designing the Table Component

Click Text > Table in the left component area and add it to the canvas. Select the table component, click Content > Edit Component in the configuration area on the right side, and enter the table editing page.

Drag the fields Order date, Delivery date, Shipper, Owner, Owner address, Owner city, Owner Province from the ds1 dataset into the cells, and modify Data Setting of the Order date field to List.

After settings are complete, click the top left corner Back to Editor to return to the canvas.

Designing Widgets

1. Adding Widgets

Enter the FVS report, add four Textbox widgets, three Drop-downBox widgets, and one DateTime widget.

2. Setting TextBox Widgets

Select four TextBox widgets respectively, and set the widget names to report type, years, month, and date in Content > Name. The default values are report type: , years: , month: , date: .

Untick Editable in Permission for all widgets except report type.

3. Setting Drop-Down Box Widgets

a. Select the first drop-down widget from left to right, set the widget name to type, and set the data dictionary type to Custom. The Actual Value and Display Value are the same, respectively daily, monthly report, annual report, and tick Editable in Permission.

b. Select the second drop-down widget from left to right, set the widget name to year, and set the data dictionary type to Custom. The Actual Value and Display Value are the same, respectively 2010 and 2011, and untick Editable in Permission.

c. Select the third drop-down widget from left to right, set the widget name to month, and set the data dictionary type to Custom. The Actual Value and Display Value are the same, respectively 01 to 12, and untick Editable in Permission.

4. Setting the DateTime Widget

Select the DateTime widget, set the widget name to date, and select Custom Date Time and 2010-01-01 in Default Value. In Date Range, select Custom and set 2010-01-01 in Start Date, and select Custom and set 2011-12-31 in End Date, and untick Editable in Permission.

Adding Edit Finish

Select the drop-down widget with the name type, add the Edit Finish event for it in Interaction > Add Event, customize Event Name as report type, and input the JavaScript.

The JavaScript code is as follows:

var value = duchamp.getWidgetByName("type").getText();//Get the current parameter, namely the display value of the type parameter.

//Determine the current widget's display value, and show or hide other widgets based on the determination result.

if (value == "daily")

{

duchamp.getWidgetByName("date").setVisible(true); //Modify it to the widget name

duchamp.getWidgetByName("month").setVisible(false);

duchamp.getWidgetByName("year").setVisible(false);

duchamp.getWidgetByName("date").setVisible(true);

duchamp.getWidgetByName("month").setVisible(false);

duchamp.getWidgetByName("year").setVisible(false);

}

else if (value == "monthly report") {

duchamp.getWidgetByName("date").setVisible(false);

duchamp.getWidgetByName("month").setVisible(true);

duchamp.getWidgetByName("year").setVisible(true);

duchamp.getWidgetByName("date").setVisible(false);

duchamp.getWidgetByName("month").setVisible(true);

duchamp.getWidgetByName("year").setVisible(true);

}

 

else if (value == "annual report") {

duchamp.getWidgetByName("date").setVisible(false);

duchamp.getWidgetByName("month").setVisible(false);

duchamp.getWidgetByName("year").setVisible(true);

duchamp.getWidgetByName("date").setVisible(false);

duchamp.getWidgetByName("month").setVisible(false);

duchamp.getWidgetByName("year").setVisible(true);

}

else {

duchamp.getWidgetByName("date").setVisible(false);

duchamp.getWidgetByName("month").setVisible(false);

duchamp.getWidgetByName("year").setVisible(false);

duchamp.getWidgetByName("date").setVisible(false);

duchamp.getWidgetByName("month").setVisible(false);

duchamp.getWidgetByName("year").setVisible(false);

}

Click to download the template:

FVS widgets interaction JS application.zip