I. Overview
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
II. Sample
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