Data analysis software finereport Tutorial: [5] Parametric interface JS (full) _javascript tips

When you use a report tool to design a report, when using a parameter control, sometimes we want some of the parameter controls to not appear when the condition is not met, and then show when the condition is met, and then I'll teach you how to do it!

How the table software controls whether a parameter control is displayed based on conditions

One: Problem description

When using a parameter control, sometimes we want the partial parameter control to not be displayed when the condition is not satisfied, and then display when the condition is satisfied, as shown in the following illustration: Only after the previous dropdown section has selected the content, the next Drop-down box control is displayed:

II: Solutions

First, the controlled control is initialized to be invisible or unavailable, then the edit End event is added on the conditional control, and the control control is visible or available through the JS script, and the corresponding JS method is as follows:

Setenable (Boolean): setting is available, True is available, false is unavailable;

SetVisible (Boolean): setting is visible, true is visible, false is not visible;

Three: Example

Open Template%fr_home%\webreport\web-inf\reportlets\doc\parameter\mutivalue.cpt

We use area in this template as a conditional control, province as a controlled control to describe the setup process.

Four: Initialize the controlled control to be invisible

Click on the province control, select the property sheet > Basic properties will be visible tick off, as shown below:

Five: Event settings for a conditional control

To add an edited event to an area control, call the JS method to set the province control to visible, with the following specific code:

Select the Drop-down box control for the parameter area, select the event panel for the property sheet, and add an edit-close event, as shown in the following figure:

The code in the diagram reads:

Where the code is:

.  var province=this.options.form.getwidgetbyname ("province");                                      var area=this.options.form.getwidgetbyname ("area"); 
.  var Thislen = this.getvalue (area). length; 
.  if (Thislen) province.setvisible (true); 
.  

Date control Checksum JS

One: Overview

The built-in parameter query interface can do some data verification, for example, there are two parameters: start date and end date, below we want to verify that the start date and end date can not be empty, the end date must be after the start date and the end date must be after the start date of a period of time, otherwise prompted the relevant information, You can add events to the Query button on this. Below is a description of the specific settings below.

The concrete effect chart is as follows:

Step Reading

See the effect of the specific error to repay the wrong warning.

Two: Open the template

Open Template:%fr_home%\webreport\web-inf\reportlets\doc\parameter\timescale\timescale.cpt.

The following diagram parameter interface:

III: Increased events

To the query button to increase the Click event, the specific JS code is as follows:

var start = This.options.form.getWidgetByName ("StartTime"). GetValue (); 
var end = This.options.form.getWidgetByName ("Endtime"). GetValue (); 
if (start = = "" | | Start==null) {//To determine if the start date is null
 alert ("Error, start time cannot be null");//start date parameter is null prompt return
 false; 
if (end = = "" | | End==null) {//To determine whether the end date is null
 alert ("Error, end time cannot be null");//End date parameter is null prompt return
 false; 
if (Start > End) {//Determine whether the start date is greater than the end date
 alert ("Error, start time cannot be greater than end time");////start date is greater than End date prompt return 
 false; 
}
var startdate = new Date (start); Converts the start date to the date type
var enddate = new Date (end);//Convert the ending date to the date type
var subdate = (enddate-startdate)/(1000 *60 *60 *2 4); Converts the number of milliseconds from two dates to days
if (subdate>15) {//To determine whether the end date is 15 days after the start date
("Error, the end date must be within 15 days of the start date"); Prompt return False when the end date exceeds 15 days after the start date
;
}

Note: Although a checksum can also be set in a parameter control, the parameter control cannot be validated until it is clicked, so the parameter interface cannot be empty and the comparison checksum is set in the Query button.

Four: Effect view

Page Preview template, select Start time and end time, so that the difference between the two dates more than 15 days, the above dialog box will pop up.

Note: The above JS code in Firefox, Google IE9 and other browsers have no problem, but in IE8 and IE8 the following version of IE browser to determine the difference between the two date of the warning box will not work. The following code is available:

var start = This.options.form.getWidgetByName ("StartTime"). GetValue (); 
var end = This.options.form.getWidgetByName ("Endtime"). GetValue (); 
if (start = = "" | | Start==null) {//To determine if the start date is null 
 alert ("Error, start time cannot be null");//start date parameter is null prompt return 
 false; 
if (end = = "" | | End==null) {//To determine whether the end date is null 
 alert ("Error, end time cannot be null");//End date parameter is null prompt return 
 false; 
if (Start > End) {//Determine whether the start date is greater than the end date 
 alert ("Error, start time cannot be greater than end time");////start date is greater than End date prompt return 
 false; 
} 
var adate = Start.split ("-") 
var startdate = new Date (adate[1] + '-' + adate[2] + '-' + adate[0 ')//Convert to MM-DD-YYYY format 
   alert (startdate);
var adate = End.split ("-") 
var enddate = new Date (adate[1] + '-' + adate[2] + '-' + adate[0 ') 
alert (enddate); 
   var subdate= ((enddate-startdate)/1000/60/60/24)//Convert the difference in milliseconds to the number of days 
alert (subdate);
if (subdate>15) {//To determine whether the end date is 15 days after the start date 
alert ("Error, the end date must be within 15 days of the start date)"////End date is more than 15 days after the start date, prompt return 
false ; 
}

Empty (reset) condition

One: Problem description

When working with controls, sometimes we want to be able to quickly reset the contents of the control, or reset the contents of all the controls, as shown in the following illustration:

II: Solutions

When you reset the value of only one control, we can get the control to be reset in the JS event and execute the Reset () method to clear the contents of the control.

When we need to reset all the controls, we can get all the controls on the parameter interface by Form.name_widgets, and then iterate through each control and reset the code as follows:

$.each (This.options.form.name_widgets,function (i,item) { 
 if (item.options.type!== ' label ') {Item.setvalue (); Item.settext (); 
;

Three: Reset a button on the contents of a single control

In the above illustration, empty the vendor button as an example of how to reset the contents of a single control.

Create a New button control on the parameter design page, set its name to empty the supplier, and set the button click event to empty the supplier (SupplierID) control contents, the specific JS is as follows:

var SupplierID = this.options.form.getWidgetByName ("SupplierID"); Get the SupplierID control
supplierid.reset ();//Empty SupplierID control contents

Four: Reset all control contents
Create a New button control in the parameter interface, set its name to empty all, and set the button click event, the event JS script is:

$.each (This.options.form.name_widgets,function (i,item) { 
 if (item.options.type!== ' label ') {Item.setvalue (); Item.settext (); 
;

Hide parameter bounds facing up and down triangle buttons

One: Problem description

When we preview the template with the parameter panel, we find that there is a triangle button in the interface between the parameters and the main interface, so how do you hide the button?

Two: the solution idea

After the template is loaded, get the button element, then set it to hide, or simply remove it.

Hide button

$ ('. parameter-container-collapseimg-up '). Hide ();

Remove button

$ ('. parameter-container-collapseimg-up '). Remove ();

Three: Example

We use the GETTINGSTARTED.CPT template as an example to hide the triangle button of the parameter interface when the template is displayed.

Open the designer, double-click the template, switch to the parameters panel editing interface, click the blank space in the Parameters panel, select the Parameters panel, add an initialization event, the following figure:

Four: JS code is as follows:

settimeout (function () {
 $ ('. parameter-container-collapseimg-up '). Hide ();
}, 10);

Five: Effect view

Save the template, click the Preview, you can see the triangle button is no longer displayed, the following figure:

Parameter control Assignment

One: Overview

In the parametric interface, it is often necessary to control the values of other controls dynamically in one control, as shown below, when the username has a value, the state automatically becomes 1, otherwise it becomes 2:

II: Solutions

You can get the control by using the JS script to get the control's value and assign a value to the control.

Note: You cannot give the control a number of 0,js inside, 0 for false. And one control cannot set the number of display values for another control.

Three: Parameter interface

The following diagram parameter interface

The username control type is a Drop-down box, the data is customized, the actual value and the display value are: Jerny,anna,merry.

State control type Select radio button group, the data is also custom, the actual value and display values are: 1, 2.

Four: JS event settings

Add the edited event to the Username event edit, JS code as follows:

var state= this.options.form.getWidgetByName ("state");
var username = this.options.form.getWidgetByName ("username"). GetValue ();
if (!username) {
state.setvalue (2);
} else{
State.setvalue (1);
}

This code is used to set the number of state parameters, when username is empty, the!username is true, at this time the number of the State is 2, otherwise, when username has a value, the state number is 1.