I. Description
In order to improve the visual effect of reports, JS can be used to dynamically switch the background color of the report.
II. Ideas
When designing the report, add a button widget in the parameter pane, and add a JS click event to the button to dynamically switch the background color of the report.
III. Examples
1) Open the sample report in the attachment, place a query widget in the left area of the parameter pane, insert the label widget and five buttons in the right area as shown in the figure below, and modify their widget names.
2) Set the Click events of the five buttons separately. Take LavenderBlush as an example, select the fifth button, add a Click event to the button, and write the following JS code:
setTimeout(function() {
$(".content-container").css("background-color", "LavenderBlush");
}, 100)
Note: "LavenderBlush"in the code is the color code of lavender blush, and for other buttons, you only need to modify the color code here. For example: to set a red button, just copy this code and change "LavenderBlush" to "Red".
IV. Effect preview
The preview effect on the PC side is shown in the figure below:
Note: Mobile terminal is not supported
Previous：JS Click a Button to Copy the Content of Textarea
