Rating component
Rating component
| Core structure | Description |
|---|---|
instanceId | The unique identifier for the rating component. |
icon | The icon used for each rating step (for example, a star). If omitted, the default rating-star icon is used. |
label | Provide a label/name for the rating input. Label is displayed as a placeholder when no value is provided. |
maximum | The maximum rating value. This typically controls how many icons are shown, for example, 5. |
| Other options | Description |
|---|---|
align | The rating component's alignment within its container can be set to left, center, or right. The default is center. An expression can also be configured to set the alignment of the rating icons. |
color | Sets the color of the rating's icons. Color conditions using the when property enable dynamic color options. First evaluated to be true will be used. |
errorText | Add text, string, or expressions to show text under the rating indicating an error/invalid value in the field. ErrorText is shown in isNegative styling. |
helperText | Add text, strings, or expressions to guide users by displaying text beneath the rating. HelperText is displayed only when there is no errorText property set. |
initialValue | The value that the rating will load with when the screen initially loads. Use this to preset a default score. |
isHidden | If true the rating will be hidden on the form. If set to false the field will be shown. |
isIgnored | When true, the field will be ignored during data save, and the rating value will not be stored. This property is only applied when using the submit-form action. |
isRequired | Set to true when the field is required, which is indicated by a grey asterisk. Set to false, the rating is optional. |
style | The following property setting is available:
|
value | The value to show for the rating. This is typically a numeric value representing the selected score. The value to show in the rating when the form initially loads. This can be combined with the isDisable style to preset the value that cannot be changed. |
| Actions | Description |
|---|---|
onChange | The action is triggered when the value in the rating is changed. Use IntelliSense (ctrl+space) to see the list of available actions. |
| State Configuration | Key | Notes |
|---|---|---|
=@ctx.component.state. | value | State is the variable of the component. |
Basic rating component
Rating on a form
Rating with icons & color
# Book Reviews
# Purpose: Display a list of books with ratings and allow users to rate each book
# Shows book cover, title, author, current rating, and provides access to rating
# form as a modal.
title: Book reviews
type: jig.default
header:
type: component.jig-header
options:
height: small
children:
type: component.image
options:
source:
uri: https://cdn.pixabay.com/photo/2016/10/22/15/19/book-1760998_1280.jpg
# ============================================
# MAIN CONTENT: Scrollable list of books
# ============================================
children:
- type: component.list
options:
# Data source binding - pulls from books datasource.
data: =@ctx.datasources.books
maximumItemsToRender: 8
item:
# LIST ITEM- Defines how each book appears in the list.
type: component.list-item
options:
title: =@ctx.current.item.title
subtitle: =@ctx.current.item.author
# List rating property used to display the rating value from the datasource.
# NOTE: This is not the rating component itself. It displays the value
# selected in the rating component in the Book Rating jig and saved to the database
rating:
value: =@ctx.current.item.rating
ratingIcon:
icon: book-star
color: warning
maximum: 5
isContained: true
# Book cover image.
leftElement:
element: image
text: ""
uri: =@ctx.current.item.image
resizeMode: center
size: regular
shape: square
# RIGHT ELEMENT: Rate button. Opens rating modal when pressed.
rightElement:
element: button
title: Rate this book
onPress:
type: action.go-to
options:
# Navigate to book-rating jig.
linkTo: book-rating
# Open as modal overlay (doesn't leave current screen).
isModal: true
inputs:
# Send book title to display in rating form.
book-title: =@ctx.current.item.title
# Send book ID to associate rating with correct book.
bookId: =@ctx.current.item.id
Rating with helperText
Rating with initial value
Rating icon & color set dynamically
Rating in a card component