Overview
Version
| FineReport Version | App Version | HTML5 Mobile Display Plugin Version | Functioal Change |
|---|---|---|---|
V11.0 | V11.0 | V11.0 | / |
V11.0.25 | V11.0.90 | V11.0.90 | Allowed you to customize the style of the checkbox group widget for mobile terminals. |
Function Description
In templates on mobile terminals, the checkbox group can help you display multidimensional data with simple styles.
In this case, you can optimize the display effect by customizing the mobile style of the checkbox group to Inline Button, Capsule Button, or Graphic Button.
Function Introduction
You can download the example template Checkbox Group Widget.frm.
Application Scenario
This style setting only takes effect on mobile templates and is supported on both the DataAnalyst app and HTML5 terminals.
The style setting function is not applicable to general reports.
Only Component Background in Common Attribute is effective for expansion styles. If you enable the Widget Display Enhancement plugin, all setting items in Common Attribute are not effective for expansion styles.
Function Entry
1. Open a dashboard in the FineReport designer and add Checkbox Group Widget to the template.
2. Select checkBoxGroup0 in the right Component Settings area and click Mobile Terminal, as shown in the following figure.
Style Template: allows you to set the style of the checkbox group widget to Default, Inline Button, Capsule Button, or Graphic Button.
Max Displayed Rows: allows you to set the maximum number of to-be-displayed rows when the checkbox group is displayed in multiple rows.
3. You can determine the display location of the Select All button. If you select Support Select All under Attribute > Advanced, the Select All button is first displayed in the expansion styles of the checkbox group by default, as shown in the following figure.
Style Pattern
Default
Click Default to customize the button effect. The following figure shows the effect on mobile terminals.
Inline Button
Click Inline Button to set its attributes. The following figure shows the effect on mobile terminals.
The following table describes the settings of Inline Button.
| Attribute | Note |
|---|---|
Component Background | Allows you to set the background (transparent by default) of the component. |
Widget Padding | Allows you to determine the distance from the widget border to the component border, which can be set to Top, Bottom, Left, or Right. Default value: Top and Bottom: 15 px Left and Right: 0 px |
Button Layout | Allows you to use Natural Layout or Equal Layout.
|
Button Background | Allows you to set Initial Filling and Selected Filling. |
Border | Allows you to set Line Type, Initial Color, and Rouded Corner. |
Character | Allows you to set the size, initial color, and selected color of the character. |
Capsule Button
Click Capsule Button to set its attributes. The following figure shows the effect on mobile terminals.
The following table describes the settings of Capsule Button.
| Attribute | Note | |
|---|---|---|
Component Background | Allows you to set the background (transparent by default) of the component. | |
Widget Padding | Allows you to determine the distance from the widget border to the component border, which can be set to Top, Bottom, Left, or Right. Default value: Top and Bottom: 15 px Left and Right: 0 px | |
Layout Method | Single-Line Display | Natural Layout: allows you to align the button to the left. Justification: allows you to horizontally fill the button group. |
Autofill | Allows you to set the button width to be self-adaptive to the text length and supports line wrapping if buttons cannot be displayed in one row. | |
Fixed Column Quantity | Allows you to fix the number of columns where buttons are displayed. The width of a single button results from the formula Component Quantity/Column Quantity. Line wrapping is supported if buttons cannot be displayed in one row. For example, if you have set Fixed Column Quantity to 3 when nine buttons are required, the buttons will be displayed in three lines. However, if you set Max Displayed Rows under Attribute > Advanced to 2, only the buttons in the first two rows can be displayed. | |
Button Background | Allows you to set Initial Filling and Selected Filling. | |
Border | Allows you to set Line Type, Initial Color, and Rouded Corner. | |
Character | Allows you to set the size, initial color, and selected color of the character. | |
Graphic Button
Click Graphic Button to set its attributes. The following figure shows the effect on mobile terminals.
The following table describes the settings of Graphic Button.
| Attribute | Note |
|---|---|
Component Background | Allows you to set the background (transparent by default) of the component. |
Widget Padding | Allows you to determine the distance from the widget border to the component border, which can be set to Top, Bottom, Left, or Right. Default value: Top and Bottom: 15 px Left and Right: 0 px |
Layout Method | 1. Single-Line Display Allows you to use Natural Layout or Equal Layout. 2. Autofill Allows you to set the button width to be self-adaptive to the text length and supports line wrapping if buttons cannot be displayed in one row. 3. Fixed Column Quantity Allows you to fix the number of columns where buttons are displayed. The width of a single button results from the formula Component Quantity/Column Quantity. Line wrapping is supported if buttons cannot be displayed in one row. |
Icon | Allows you to set Initial Icon and Selected Icon. Allows you to upload custom images. |
Character | Allows you to set the size, initial color, and selected color of the character. |
