Automatic star rating based on likes and dislikes

This trick is for the ones that want to make a rating mechanism that depends on the number of likes and dislikes of a given row.

Columns you’ll need:
[likes] - normal column - Decimal - hidden
[dislikes] - normal column - Decimal - hidden
[rating] - virtual column - Decimal - shown

Formula for the column [rating]: IF(AND( [likes]>0, [dislikes]>0), ([likes]/([likes]+[dislikes]))*100.00, 0)

So, based on that formula from above we’ll get a score between 0 and 100 wich is the percentage that the likes represent in the global sum of likes and dislikes (the 100% of ratings). If we divide 100 by 5 (the number of stars we want) we get 20 wich is the ratio of increase we set for each rule. So a score from 1 to 19 is true for 1star rule, 20 to 39 is true for 2stars rule and so on.

Format rules for [rating] column

  • 0stars - Highlight color: gray - text color: white - Formula: [rate]=0.00
  • 1 star - Highlight color: #FFD300 - Text color: white - Formula: [rate]>0.00
  • 2stars - Highlight color: #FFD300 - Text color: white - Formula: [rate]>20.00
  • 3stars - Highlight color: #FFD300 - Text color: white - Formula: [rate]>40.00
  • 4stars - Highlight color: #FFD300 - Text color: white - Formula: [rate]>60.00
  • 5stars - Highlight color: #FFD300 - Text color: white - Formula: [rate]>80.00

We use a custom color #FFD300 because the default yellow doesn’t look so good. And we use white for the text to hide the score. And You’ll get this in your detail view: image or this if it has no stars image

Actions:
like - Display inline into [rating] - Data: set the values from some columns - [likes]+1
dislike - Display inline into [rating] - Data: set the values from some columns -
[dislikes]+1

Formatting for like and dislike actions

  • like action - icon: smile - Highlight color: green
  • dislike action - icon: meh - Highlight color: red
    Yu’ll get this in your detail view: image

Select “No headings” in your detail view. And customize as you wish. Depending on what you’re doing, this is the final result:
chrome_ndlhCbtbda

I hope it helps! Would you like a sample app?

Hi @Francios, here’s the app but I don’t know how to make it a sample app.

10 Likes

That’s cool!

1 Like

Cool @Rene_Casana_Amaya. Sample app would be appreciated thanks.

1 Like

This is a nice implementation of ratings system @Rene_Casana_Amaya

Thank you

1 Like

Hi Rene,

Thanks! I understand that you use 5 formatting rules for 5 [rating] scenarios. But format rules, you can chose 1 star but not 5 consecutive stars… . See Picture

No, each formatting rule only shows up if the rating is above a certain number. Since 100 is above all
Of the set numbers for all 5 rules, 5 stars would show up, but if the value was only above 3 of the set values in the formulas, 3 stars show up.

1 Like

Yes! Got it! Just came back from a long travel. Need to warm up again to appsheet…Thanks!

Exactly, that’s why we make five formatting rules, because a single rule won’t give you all the stars you need, each star will show up depending on the score.

Let’s say our item to score has 343 likes and 299 dislikes, with the formula we get a score of 54. The first rule will trigger true and will show the first star because the score is major than 0, the second rule will trigger true too because the score is major than 20 and the third will trigger too because is major than 40, forth and fifth rule won’t trigger showing a star because the score is lower than the vale upon they trigger true wich is 60 and 80 respectively. And we get three stars.

Make sure that all five format rules are applied to the column [score].
I’d like to see the results.

Thanks @Rene_Casana_Amaya.

1 Like

@Rene_Casana_Amaya Thank you for sharing this Tipp.
You could add extra format rules to show also grey stars. So you will have also 5 stars in sum like this:
image

2 Likes

That was my first thought when I was making the formatting rules but unfortunately I think this is not possible because each formatting rule overrides the previous colors over the icons so when you apply the last rule all of the other icons adopt the same color, basically we end up with all gray stars.

Ready I make the app a sample.

1 Like