Forum Academy Marketplace Showcase Pricing Features

How to create a Star Rating System

I attempted to use the star rating plugins but they don’t provide nearly as much flexibility as I would want from such a plugin…mostly about sizing issues, otherwise it seems pretty cool, especially since you can do 1/2 star ratings.

However, to get something more customized and flexible for my app I had to create my own. I used a reusable element to do so. There are some conditionals that need to be set, some custom states and workflows. Also needed are some ‘hidden’ shapes to help out with all the functionality. Below are screen shots to help you along.

Here is the element itself as seen in the editor
Screen Shot 2020-04-04 at 4.37.10 PM

Here is the element tree to see. Only 5 icons (labeled by number) and 5 shapes

Screen Shot 2020-04-04 at 4.36.58 PM

Here is the custom state on the reusable element to hold the numeric value of the rating

Here are the conditionals and the custom states on the star icons themselves.

Screen Shot 2020-04-04 at 4.30.44 PM

Here are the conditionals on the shapes…these are used to assist with getting the stars to change from filled or not filled if you have already selected a higher value and hover over a lower value.

Screen Shot 2020-04-04 at 4.41.00 PM Screen Shot 2020-04-04 at 4.40.55 PM Screen Shot 2020-04-04 at 4.40.50 PM


Screen Shot 2020-04-04 at 4.41.33 PM

Here are your workflow events

Screen Shot 2020-04-04 at 4.30.16 PM Screen Shot 2020-04-04 at 4.29.59 PM Screen Shot 2020-04-04 at 4.29.50 PM

Here is the result

stars

12 Likes

Wow @boston85719, that is an awesomely cool solution. I battled for ages a while ago and came up with this:

Yours is way cooler. But now that mine is stable, I’m gonna stick with it. I might upgrade if my app takes off though. Thanks for the share.

1 Like

Looking at what you did there I could see it being a pretty cool user experience if the user is clicking the star icon and the drop down with value selection is displayed underneath the star icon.

The feature is a rating system for sports matches. So the user rates the match itself and then each team, and they get a point (check out the right side of the screen) each time that they capture a rating. And then once they’ve captured all 3 ratings, they get to see the average ratings from everyone.

ezgif.com-video-to-gif (5)

Nice, that looks pretty cool.

1 Like

This is actually great! thank you
But i have a question, How can i store these values in the database then later show the rating results on a page using the same way

The very first screen shot of this posting shows that the star rating value is held in a custom state and all the workflows set up to change the rating value are changing that custom state value.

To save to your database the value you will save the custom state value.

Simple set up is if you have a datatype of “Restaurant” and on it has a data field rating (number type) then use a workflow to make changes to the restaurant rating and make it equal to the custom state value.

I used this for a review system. So my ratings get saved to a specific review.

When I want to show a rating for a single review it is simple, just show the rating for that review.

When I want to show a rating for a restaurant, which is a sum of all review ratings divided by the number of review I have a dynamic expression to do that math…

Do a search for reviews constraint is restaurant ID = this restaurants ID : rating: sum / Do a search for reviews constraint is restaurant ID - this restaurants ID:count

On my review data type I have a text data field that is the restaurants ID so I can easily know which restaurant the review is for. In my example the ‘this restaurant’ might come from a page or a repeating group cell.

1 Like

Ohh thank you! let me try using this and see how far i can go

1 Like

This is awesome, thanks a lot!!!

(post withdrawn by author, will be automatically deleted in 1 hour unless flagged)

Just added a video based tutorial for creating the star rating system

Bonus to this is access to the tutorial editor for easy copy and paste into your own application. Tutorial provides video demonstrating the copy and paste step by step as well as video detailing how things are setup if you want to make it on your own.