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
Here is the element tree to see. Only 5 icons (labeled by number) and 5 shapes
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.
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.
Here are your workflow events
Here is the result
16 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.
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.
Hey @boston85719, incredible tutorial!
One small issue - for some reason I can’t get the 5th star to fill in no matter what I do. I’ve gone over the instructions with a fine tooth comb and everything looks correct but the 5th star still won’t fill in (on hover or on click).
That is strange. Not sure why it wouldn’t be working for you. My assumption would be something is not set properly somewhere.
So a user can leave 3 star rating. Another a 2 star rating. I didn’t see a field that showed a 2.5 star average for the restaurant. Can the star icon be only half filled? Instead of a star can I use a pickaxe outline? Can I create a review page with say 30 questions each with a five star/pickaxe rating to right of question and user awards 1 out of 5 stars and then after all questions answered total stars received divided by # of questions creates the rating for the restaurant by that user?
Thanks for any and all help.
Yes. Just adjust the number values and the icon used.
Yes, just use the icon you want.
Yes, it can be done.
Hey, Boston I watched your video. Thanks for making this! I can’t seem to find the bubble editor for the copy & paste portion though.
Are you asking how to copy and paste?
I cant find the link to your editor so I can copy and paste
