Show a Numeric Rating as Rich Text Icons

Goal

Copy link to clipboard

Dynamically show a star rating based on a numeric score.

This example uses a familiar set of star icons to display an aggregated value taken from many previous rating. To see how to capture and display an individual rating, see the Set a Numeric Rating Using Rich Text Icons recipe.

This scenario demonstrates:

• How to use a!forEach() within rich text.
• How to dynamically set a parameter within an interface component.

Expression

Copy link to clipboard

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a!localVariables(
  local!score: 5.88,
  local!limit: 10,
  a!richTextDisplayField(
    value: {
      a!forEach(
        items: enumerate(local!limit) + 1,
        expression: a!richTextIcon(
          color: "ACCENT",
          icon: if(
            fv!index <= local!score,
            "star",
            if(
              fv!index - 1 < local!score,
              "star-half-o",
              "star-o"
            )
          )
        )
      )
    }
  )
)
Copy

Test it out

Copy link to clipboard

1. Change the value of local!limit and click TEST to reload the interface.
   • Observe that the number of total stars will change.
2. Change the value of local!score and click TEST to reload the interface.
   • Observe that the number filled in stars will change.

Notable implementation details

Copy link to clipboard

• The calculation does no rounding on the score. Any score between a whole number will receive a partial star. This can be easily adjusted in the second if() statement, providing a different value than 1 when running the index comparison against local!score.

Feedback

Copy link to clipboard