Overview
Version
| FineReport Version | App Version | HTML5 Mobile Display Plugin Version | Functional Change |
|---|---|---|---|
V11.0 | V11.0 | V11.0 | / |
V11.0.25 | V11.0.90 | V11.0.90 |
|
Function Description
In mobile templates, the radio button group can help you display multidimensional data. However, the style of the radio button group is monotonous.
In this case, you can customize the mobile style of the radio button group to Inline Button, Capsule Button, or Graphic Button.
Widget Introduction
Application Scenario
This style setting only takes effect on mobile templates and is supported on both the DataAnalyst app and HTML5 terminals.
Procedure
1. Open a dashboard in the FineReport designer and drag Radio Button Group Widget to the template.
2. Select radioGroup0 on the right Component Settings panel. If you deselect Allow Null under Attribute > Validation, the effect will remain unchanged when you click the same tab repeatedly on the mobile preview page, as shown in the following figure.
3. Add a data dictionary for the radio button group on the right Attribute panel and set the default value for the widget, as shown in the following figure.
4. Select radioGroup0 in Component Settings, click Mobile Terminal, and set the style of the radio button group in Style Template, as shown in the following figure.
5. Set the value of Max Displayed Rows to determine the number of display rows if the button needs to be displayed in multiple rows, as shown in the following figure.
6. Set conditional attributes to allow the report content to be changed with button switchover.
Button Style
Default
Click Default to customize the button effect. The following figure takes the DataAnalyst app as an example to show the mobile effect.
Inline Button
Click Inline Button to set its attributes. The following figure takes the DataAnalyst app as an example to show the mobile effect.
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 takes the DataAnalyst app as an example to show the mobile effect.
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 | |
Button Layout | 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 takes the DataAnalyst app as an example to show the mobile effect.
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. |
Example
This document provides a dashboard with three report blocks and demonstrates how to add the radio button group in the Inline Button style to achieve the effect of the report block change with the button switchover.
You can download the sample template Sample Report-EN.frm.
Adding the Radio Button Group Widget
1. Open a dashboard in the FineReport designer and drag Radio Button Group Widget to the template.
2. Select radioGroup0 on the right Component Settings panel. If you deselect Allow Null under Attribute > Validation, the effect will remain unchanged when you click the same tab repeatedly on the mobile preview page, as shown in the following figure.
Adding the Data Dictionary
Select radioGroup0 and set Widget Value in Attribute to 1. The Brand Analysis button is selected by default.
Click the icon behind Data Dictionary, set Type to Custom on the popup setting page, and add three actual values (1, 2, and 3), which separately correspond to Brand Analysis, Store Analysis, and Member Trend in Display Value, as shown in the following figure.
Setting the Button Style
Select radioGroup0 on the right Component Settings panel, click Mobile Terminal, and click the icon behind Style Template.
Click Inline Button and set its attributes, as shown in the following figure.
Setting the Condition Attribute
You can set the row height of the other two report blocks to 0 through condition attributes to display only the report block corresponding to the current button when you click a button. You can refer to the following specific setting.
1. Double-click report1 to go to the report block edit page and merge cells in column H.
Select column H, add a condition attribute on the right Condition Attribute page, and set the formula to $radioGroup0 = 2 or $radioGroup0 = 3, which means that when the formula is satisfied, the row height value is 0. In this way, you can achieve the effect that when the button value is 1, the report block report1 is displayed.
After completion, hide column H by right-clicking.
1. Double-click report2 to go to the report block edit page and merge cells in column J.
Select column H, add a condition attribute on the right Condition Attribute page, and set the formula to $radioGroup0 = 1 or $radioGroup0 = 3, which means that when the formula is satisfied, the row height value is 0. In this way, you can achieve the effect that when the button value is 2, the report block report2 is displayed.
After completion, hide column H by right-clicking.
3. Double-click report3 to go to the report block edit page and merge cells in column J.
Select column J, add a condition attribute on the right Condition Attribute page, and set the formula to $radioGroup0 = 1 or $radioGroup0 = 2, which means that when the formula is satisfied, the row height value is 0. In this way, you can achieve the effect that when the button value is 3, the report block report3 is displayed.
After completion, hide column H by right-clicking.
Effect Display
The following figure shows the preview effect on the mobile terminal.
Template Download
You can download the completed sample template Radio Button Group Widget.frm.
Notes
The App Relayout function has an impact on the display effect of the radio button group, as shown in the following figure.
If you select App Relayout, the widget will automatically adapt to the screen width and one row will display one widget. You can set the layout and display order of the widget.
If you deselect App Relayout, the size of the widget display area will depend on that of the component in the template. If the text size exceeds the widget display area, the text will be truncated for display.
