I. Overview
1. Version
| Report server version | App Version | HTML5 Mobile display plugin | New features |
|---|---|---|---|
| 10.0 | 10.4.76 | V10.4.76 | Customize the style of the mobile widget |
2. Application scenarios
When users encounter the following scenarios, they need to adjust the widget style:
The heights of the wedgets in the template are different. For the aesthetics of the template, the heights of the wedgets need to be consistent.
Some wedgets do not need to set the wedgets border, such as radio button group wedgets.
In a non-light-colored background, the background color of the wedgets is not consistent with the background where it is located.
The font color of the wedgets does not match the overall effect of the template.
3 Function introduction
Users can customize the background color, border line type, border color, font size and other properties of the widget in theStyle Template of the widget.
II. Example 1: Set the widget style template
1. Effective range
| Report Type | Widget Location | Function Description |
|---|---|---|
| Dashboard | Parameter Pane | Only supports setting the font size |
| body | Widget background, border line style, widget font, etc. are all supported |
Note: Only the JAR package version after 2020-06-08 can achieve the effect
2. Template preparation
1) ClickTemplate>New Dashboard in FineReport Designer.
2) Drag in theDrop-down Box widget in the dashboard, and set the data dictionary in theAttributesTab page. As shown below:
3. Set the widget style
Select theDrop-down Box widget, clickMobile Terminal> Style Template, selectCustom for the attribute setting, and set the widget attribute. As shown below:
4. Effect view
The preview effect of App and HTML5 is shown in the figure below:
III. Example 2: Use JS statement to change the color of the widget value
Note: When modifying the color of the widget value, the attributes of the JavaScript statement is greater than the setting in the widget "style Template".
1. Template preparation
1) ClickFile>New Dashboard in FineReport Designer.
2) Drag aText Fieldwidget into the dashboard, the widget value is123, as shown in the figure below:
2 Add after initialization event
There are 3 types of JavaScript codes for modifying the color of the widget value, namely:
this.css("color","red");
this.css("color","#00ff00");
thia.css("color","rgb(0,0,255)");
Select theText Fieldwidget, clickEvent, and addAfter Initialization event. As shown below:
JavaScript 代码如下所示：
this.css('color','#33FF33')
3. Effect view
The preview effect of App and HTML5 is shown in the figure below:
Template download:
