From Yumi: Add a Star Rating Component to your screens

/0 Comments/in /by

About

If you are building a survey or a feedback form, you can use number or selection input components to get a rating from the user. Even though they will store the answer, they won’t look like the surveys that we are familiar with. However, you can use this custom Star Rating Component that lets the users select a star and stores the number of selected stars.

Star Rating Component

How to Use

Add the StarRatingComponent to the screen and give it a name.

Star Rating Component on flow screen

There are 3 input parameters that you can provide to the component.

  • Maximum Number of Stars
    This is the number of stars that the component will display to the user. It is required to enter a value.
  • Read Only
    This is a boolean parameter to make the component read only. By default, the value is false. However, you can enter {!$GlobalConstant.True} to make it read only.
  • Value
    This parameter stores the number of selected stars. If you provide a value as an input, Star Rating Component displays it as the default number of selected stars.

At the end, Value parameter stores the selected number of stars as an output.

Example

Read this post to see a customer satisfaction survey built with the Star Rating Component.

Experience Builder Considerations

This component works fine in the developer edition environments. However, it may not be able to load the star icons when it is used in an Experience site connected to a production/sandbox environment. In these cases, you have to override the css directly from the Experience Builder.

In this case, URL of the background image should be “/ExperienceSiteName/resource/fivestar/stars.svg” instead of “/resource/fivestar/stars.svg”.

Go to the Experience Builder and click Edit CSS from the Theme.

Enter this code and publish your changes.

.c-rating__item {
background-image: url(“/survey/resource/fivestar/stars.svg”) !important;
}

In this example, the name of the experience site is “survey”. Replace “survey” with the name of your Experience site.

Installation

V1.0 12/13/22 Production Sandbox 1st release

Do you want to try the component before installing it? You can use this link to test the component!

Customer Satisfaction Survey