Tip: Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
GoalCopy link to clipboard
Save a numeric score using a set of clickable rich text icons.
This example uses a familiar set of star icons capture a user's sentiment. To see how to display an aggregated set of rankings rating, see the Show a Numeric Rating as Rich Text Icons recipe.
This scenario demonstrates:
- How to use
a!forEach()
within rich text. - How to set a parameter dynamically within an interface component.
- How to reset a value back to its initial value.
ExpressionCopy 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
24
25
26
a!localVariables(
local!rating: 0,
local!totalStars: 10,
a!richTextDisplayField(
value: {
a!foreach(
items: enumerate(local!totalStars) + 1,
expression: {
a!richTextIcon(
icon: if(
fv!index <= local!rating,
"star",
"star-o"
),
color: "ACCENT",
linkstyle: "STANDALONE",
link: a!dynamicLink(
value: if(local!rating=fv!index, 0, fv!index),
saveInto: local!rating
)
)
}
)
}
)
)
Copy
Test it outCopy link to clipboard
- Click on a random star. Notice that this and all previous stars will fill in.
- Click on another random star. Notice that the total number of stars will change.
- Click on the same star again. Notice that the stars will reset to zero.
Notable implementation detailsCopy link to clipboard
- The calculation does no rounding on the score. Any score between two whole numbers will receive a partial star. This can be easily adjusted in the second
if()
statement, providing a different value than1
when running the index comparison againstlocal!score
.
FeedbackCopy link to clipboard
Was this page helpful?