Unified Interface Controls – The Star Rating ⭐

Today we’re going to take a look at another number based control, but possibly my favourite of all the UI controls – ⭐ the star rating ⭐. If you’re not already familiar with how to add a control to a field on a form, I recommend reviewing my previous blog post.

Using the Star Rating – The Facts:

  • Must be used with a whole, number field.
  • Must specify a number of stars to display, 5 being the max.

Implementing this control is, as we have seen with other number controls, very simple. In our scenario today, I am going to implement a star rating to display how “hot” a lead is. The higher their lead score, the more stars we will display. This gives the end user a really quick visual on whether or not it’s time to take their lead nurturing to the next level.

To implement, select the form you wish to add the control to and then select the relevant field. You should have access to the following screen:

Once selected, we’ll have access to set a very small number of parameters:

The Value field will default in a “value” and cannot be changed, it’s just displaying what field we’re adding the control to. Aside from that the only customisation we can make is to set the max value of stars to display with the max value being 5.

To make this field more valuable, I decided to implement a Business Rule that would set the star rating based on the lead’s score. Let’s take a look at that.

First off, we need to determine what star rating is applied to what range of lead score values. If Lead Score is:

  • Less than or equal to 10 – 1 star
  • Between 10 and 20 – 2 stars
  • Between 20 and 30 – 3 stars
  • Between 30 and 40 – 4 stars
  • 41+ – 5 stars

With that model established, we can build out a Business Rule that will allow us to change the star rating in line with the above values! Here’s a look at what I built:

Checking for conditions

If the Lead Score field is less than or equal to 10, we set the star rating to 1. We continue this trend all the way down until we’ve set a star value for each subset of lead score values described above.

Setting the value

The end result should look something like this:

Once this has been implemented, we will now automatically see the star rating update as the score fluctuates!

And there you have it, a really nice little control that can have a huge visual impact!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.