How to use the Star Rating element in Bubble.io

Adding a Star Rating to Your Bubble App

Here's how to add a star rating to a page on your Bubble app. In this case, it's a product page in a marketplace app that I'm working on, so you know it's quite common to see a star rating on a page like this. First of all, I need to add in a plugin and Bubble has built one. There's a number of other ones but I'll be using just this default one. We can see it's very popular.

Placing the Star Rating Element

Okay, and then I need to add it into my page. In fact, let's put it below the add to cart button. Okay, we can see here that it hasn't been updated for the new responsive engine but we can probably get away by just putting in values that are going to work for us in here. Let's make it nice and big so nothing's obscured by these fixed width and height values.

Configuring the Star Rating Settings

So let's have a look at the settings on appearance. Yeah, minimum value zero, max five, steps of 0.5. You can adjust the size there and the colors. Let's have a look at that on the front end. Okay, so what you see as a user when I put my mouse over it, it moves in those 0.5 of a stars. If I click, then it remembers it, but if I refresh the page nothing is saved to the database.

Saving Ratings to the Database

So how do I save it to the database? Well, I could use autobinding but I'm not going to cover that in this video. We've got other videos on auto binding. For that exact reason, I'm going to show how to do it a different way. So when elements value is changed, the star rating, then data to change make changes to a thing. Current page as product, the reason I can select that is that if I click onto the page we have our page selected type of content as product, so I can feed off that data from any element in the page and then we add in rating and this is a number value because it will give us a number between 0 and 5 in 0.5 increments and hit create. This star ratings value okay let's try that if I go in for 2.5 and I click.

Debugging the Workflow

Ah right, it's not working because I've missed this. I'm on a demo page. If we look at the URL up top, it's I'm not actually viewing a product in my database so I think I need to go back to. I've got a just a simple repeating group on the index page I'm building to click through. Okay, right now I'm actually viewing a product in my database which then means that if I cause the workflow to create a change to that product. Ah okay, so what's going on there? Let's debug it. I thought that really thought that would work.

Fixing the Initial Value

So clicking on there make changes to product. Okay, yes right so let's debug it. I know it's going ahead but this is all part of the process. If I go to products you can now see it has a 2.5 rating. Now in my haste to show you how to get this to work I completely overlooked something and it's really worth me showing and pointing this out which is that there is no initial value here which means that when I refresh the page this element here it's got no content to display. So fix that I go to current pages products rating. Now yes there we go now it's gone to the 2.5 and so let's take up to 4 and now it saves to 4.

Limitations of the Current Implementation

Okay, so that works but that's not going to work in practice with my app because I want multiple users to be able to save ratings and whereas at the moment if another user came along and they say oh we don't like this let's rate it at 0.5 then that overrides it. Really what I want to be displaying here is an average of ratings and now I could do that using a list value on ratings but that also has a shortfall because the list values aren't going to be attached to the identity of the person who's leaving that value so if they wanted to change it in the future there's no way of doing that. I would just end up with a series of averages for every single rating that was given regardless of whether that rating was changed or replaced.

Next Steps

Check out the follow-up video about star rating to see how we can tackle this one.