Overview
Application Scenario
After setting the data dictionary for the radio button widget, the display effect is relatively monotonous. Is there any way to assign different colors to each option, making the overall look more beautiful and layered?
Implementation Effect
You can use HTML tags to achieve the effect, as shown in the following figure.
Example
Report Design
The cell design is as follows. Insert a radio button group widget in cell B2.
Data Dictionary Setting
Select cell B2, and set the data dictionary (set Type to Formula).
Note:In actual use, you can set Type to Database Table or Data Query as required. However, Display Value needs to be set to Formula.
Actual Value: ["Apple","Banana","Durian"]
Display Value: "<span style='color:#fff;padding:1px 5px;border-radius:10px;background-color:" + switch($$$,"Apple","red","Banana","#f5c13c","Durian","green") + "'>" + $$$ + "</span>"
Parsing of HTML attributes in Display Value:
| Attribute Setting | Description |
|---|---|
color:#fff | Text color: white |
padding:1px 5px | Top and bottom padding:1 px; left and right padding: 5 px |
border-radius:10px | Shape: rounded corner with a radius of 10 px |
background-color:red | Setting the background color of the span tags according to the values calculated by the formula switch($$$,"Apple","red","Banana","#f5c13c","Durian","green") |
Note:Effect Preview
Click Save, and click Data Entry Preview. The following figure shows the effect.
PC:
Note:The effect cannot be previewed on mobile terminals.
Template Download
Download the template by clicking Displaying Radio Button Options in Different Colors by JS.cpt.
Previous：One-Click Clear of Data Entry Content by JS
