Star Rating

Display a number as a star rating and/or allow users to set a rating.

Simple Guide

First, make sure you've installed the star rating component from the Adalo Marketplace, then click the plus button in the left panel, find the star rating component and drag it on to a screen in your app.

For the star rating component, you can drag to adjust the width of the component. As you make it wider or narrower the spacing between the stars will automatically adjust so that the stars equally spaced.

In the left panel, you can adjust the following:

• Can the users set a rating?

  • No, they can only view a rating

    • Choose this option if you don't want the star component to be interactive. This is a common choice of the stars are representing an aggregation of scores via Magic Text such as Current Product > Ratings > Average Score

    • When this option is chosen, you can set the rating value via Magic Text.

  • Yes

    • Choose this option if you want the component to be interactive such as when a user is leaving a review or rating their experience

    • When this option is chosen, you can select with database property the component sets such as Current Review > Rating

• Number of Stars

  • You can choose whether the number of possible stars is 5 or 10

• Active Color

  • This is the color of stars that have been selected

• Inactive Color

  • This is the color of stars that have not been selected

• Star Size

• Click Actions

  • If you want to save the value of the number of stars the user has selects somewhere in addition to the property you selected above, this number of stars chosen is available in the Magic Text menu for any Actions you add to this component.

Video

How to Use the Rating Component in Your Adalo Apps

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!