JS Hide Elements of a Dashboard

1.1 Requirement

How to hide the elements of a dashboard? How to hide or show these elements through JavaScript in addition to hiding or showing them through attributes setting?

1.2 Solution

Hide or show the elements of a report block by inputting the following JS code:

this.options.form.getWidgetByName('report0').setVisible(boolean); //Show or display the report block

2.1 Create a new template

Open the template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Dashboard\Income Analysis.frm, drag two Button widgets into the template, and name them Hide and Show respectively, as shown in the figure below:

2.2 Add a Button Click event

2.2.1 Hide

Click [Hide] and add a Click event, so that the elements of report0 will be hidden simply by a click, as shown in the figure below:

Input the following JS codes:

this.options.form.getWidgetByName('report0').setVisible(false);  //Hide the report block

Note

report0 represents the name of the report block. If you want to hide a chart block, input the name of the chart block.

2.2.2 Show

Click [Show] and add a Click event, so that the elements of report0 will be shown simply by a click, as shown in the figure below:

Input the following JS codes:

this.options.form.getWidgetByName('report0').setVisible(true); //Show the report block

Note

When the Button widget is functioned in the body, the above JS code applies to the above Click event. When the Button widget is functioned in the parameter pane, you should input the following JS code:

_g().getWidgetByName('report0').visible(); //Show 
_g().getWidgetByName('report0').invisible(); //Hide

 2.3 Preview

Income Analysis.frm