Show a Numeric Rating as Rich Text Icons

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

Goal

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 a SAIL component.

images:SAIL_Recipe_Inline_Star_Rating.png

Expression

load(
  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"
            )
          )
        )
      )
    }
  )
)

Test it out

  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

  • 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