Power Apps Rating Control – How to Use

In this Power Apps tutorial, We will discuss the Rating control in PowerApps, its properties, and how to add a Rating control in Power Apps.

As far as we know, Power Apps has various controls to work with canvas apps; apart from that, Rating control is a user interface component within the app that allows users to input and display ratings.

Also, we will discuss various Power Apps Rating control examples and Power Apps rating control SharePoint list.

Moreover, I will let you know some more stuff like:

  • How to Calculate 5 Star Rating Average in Excel
  • Power Apps average rating
  • Power Apps reset rating
  • Power Apps coalesce

Power Apps Rating Control

Power Apps Rating Control is a type of control where the user will indicate the value between 1 and a maximum number that the user will specify.

The Power Apps Rating control looks like a star icon. A user can indicate how much he/she liked something by selecting the number of stars.

Whenever you add a Rating control to the app, it shows a maximum 5-star rating by default. However, you are allowed to set the minimum and maximum stars in the rating control for some properties. Look at the below image.

powerapps rating control

Power Apps Rating Control Properties

Next, I will show you what are the properties of the Rating control. Have a look at the below table.

PropertyDescription
MaxIt defines the maximum value to which the user can set a slider or a rating
DefaultIt specifies the initial value of a control before it is changed by the user
DisplayModeIt defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled)
OnChange It defines when the user changes the value of a control (for example, by adjusting a slider), then the actions performed
OnSelectIt defines when the user taps or clicks a control, then the action performs 
RatingFillIt represents the color of the stars in a rating control
ReadOnlyIt defines whether a user can change the value of a slider or rating control
Reset It defines whether a control reverts to its default value
ShowValueIt defines whether a slider’s or rating’s value appears as the user changes that value or hovers over the control
TabIndexIt specifies the keyboard navigation order in relation to other controls
VisibleIt specifies whether a control appears or is hidden

Add Power Apps Rating Control

To add a Power Apps Rating control, follow the below steps. Such as:

1. On the Power Apps Screen, insert a Rating control [+ Insert > Inputs > Rating]. Once you click on it, the control will appear like a star symbol. You can also provide the rating using the star marks.

Refer to the below screenshot:

rating control in powerapps

2. By default, the rating control shows five stars in the app, and three stars will be selected for them. You can increase your stars by using the Max property of the control. You can make the star selection by using the Default property of the control.

powerapps coalesce

Power Apps Rating Control Example

In Power Apps, there is a Rating control and a Text input control. When a user gives a product 2 stars, the text control will display, “Any suggestion to do better?“

Similarly, when the user will give more than 2 stars (like 3, 4, and 5 stars), then the text will display as “Which product you liked the most?

You can also use the text input control to enter any text or service feedback. The output is shown in the screenshot below.

Power Apps Rating Control Example

To work around this example, follow the below steps. Such as:

1. On the Power Apps Screen, insert a Rating control and rename it to ServiceRating.

rating control in Power Apps app

2. Next, add a Text input control under the Rating control and Set its Default property to blank (” “).

power apps coalesce

3. At last, Select the text input control and apply the below code on its HintText property as:

HintText = If(
    ServiceRating.Value > 2,
    "Which product you liked the most?",
    "Any suggestion to do better?"
)

Where,

  • ServiceRating = Power Apps rating control name
powerapps tabindex

4. Save and Preview the app. When you select a star, the text input control value displays that star’s selection.

star power app

Power Apps Rating Control SharePoint list

In this section, I will explain how to use the Power Apps rating control from the SharePoint list.

Scenario:

  • I have a SharePoint list named “PowerApps Rating,” which contains two fields.
Column NameData Type
TitleIt is a default single line of text
PowerApps Service RatingA single line of text
powerapps rating control sharepoint list
  • Next, we will customize this list using Power Apps. To do so, click on the Integrate tab -> Power Apps -> Select Customize forms, as shown below.
power apps rating control sharepoint list
  • Once you click on Customize forms, the screen below will open in PowerApps. All the SharePoint fields, including an attachment control, will appear on the Power Apps screen.
  • Now insert a Rating control below the Attachments control and rename it RatingNumber. By default, the rating value will display as 3 stars.
powerapps rating control in sharepoint list
  • Now, select the Power Apps Service Rating Data Card and unlock it once (Advanced -> Unlock), as in the screenshot below.
powerapps data card default value
  • Then click on the Advanced tab (of the PowerApps Service Rating Data card) and replace the Update property from DataCardValue2.Text to RatingNumber.Value, as shown below.
Update = RatingNumber.Value

Where,

  • RatingNumber = Rating control name that you have added
power apps rating control in sharepoint
  • Finally, Select the text box of the Power Apps Service Rating field and set its Visible property to false. Then, drag the Rating control to its place. Save and Publish the app to SharePoint and go back to the SharePoint List.
powerapps rating control from sharepoint
  • In the SharePoint list, create an item, provide the service rating of your choice, and then Save it. Once you refresh the list, you can see the new record with its service rating, as shown below.
power apps dashboard from sharepoint list

How to Calculate 5 Star Rating Average in Excel

Let’s see how to calculate a 5-star rating average in Excel using the SharePoint Online list [Product Details]. This list contains the fields below.

Column NameData Type
Product NameIt is a default single line of text
ManufacturerChoice
PriceCurrency
QuantityNumber
Purchase DateDate and time
RatingRating
How to Calculate 5 Star Rating Average in Excel

Now, I would like to export this list to Excel and calculate the 5-star rating average. To do so, follow the below steps.

1. On the SharePoint Online list, expand the Export dropdown and select the Export to Excel option, as shown below.

5 star rating average in Excel

2. On the Excel Spreadsheet, provide the AVERAGE function using Rating column values, like below.

=AVERAGE(F2:F9)
Calculate 5 Star Rating Average in Excel

3. Once it is done, click on the enter button to get the Average value of the 5 star rating control.

Output:

Calculate 5 Star Rating Average using Excel

This is how we can work with how to calculate 5 star rating average in Excel.

Power Apps Average Rating

In this topic, We will see how we can view the average rating of an item in Power Apps from a SharePoint List.

  • The screenshot below represents a SharePoint List named Image Rating. There are three fields: TitleImage Name, and Image Rating.
  • This list also includes some records or images, including their image ratings. Now, using Power Apps, I want to view the average rating for each image file present in this list.
PowerApps average rating

To workaround with this, Insert a Label control and set the below formula on its Text property as:

Text = "Image Rating: " & Average(
    Filter(
        'Image Rating',
        'Image Name' = "Cat.jpg"
    ),
    Rtg_Average
)

Where,

  • ‘Image Rating’ = SharePoint list name
  • ‘Image Name’  = SharePoint image control name
  • Rtg_Average = Power Apps rating control name

Save and Preview the app. In the text label control, you can see the average rating of that specified image, as shown in the screenshot below.

Power Apps average rating

Power Apps Reset Rating

In this example, I will show you how to reset the Power Apps rating control.

In the Power Apps app, there are three rating controls and a Button control. Now, I would like to reset all these rating controls using a Button control. That means that when a user presses the reset button, all the ratings will clear, as shown below.

powerapps reset rating

To do so, Select the Button control (Reset) and apply the below code on its OnSelect property:

OnSelect = UpdateContext({ResetRatings: true});
UpdateContext({ResetRatings: false})

Where,

ResetRatings = Specify the context variable name

Power Apps reset rating

Next, apply the context variable (ResetRatings) to all the Rating’s Reset properties as:

Reset = ResetRatings
powerapps reset rating control

Power Apps Coalesce

In Power Apps, there is an Edit form where the user enters the data. This form contains a rating control, where the user can rate a specific item.

But what happens is that every time the user opens the app, the rating control displays 3 stars by default, and that should not be the case. Instead of 3 stars, it should display blank stars using coalesce.

coalesce powerapps

To achieve this, select the rating control and apply the below code on its Default property:

 Coalesce(
    Parent.Default,
    0
)

Where,

  • Coalesce() = The Coalesce function returns the first value that isn’t blank or an empty string
coalesce power apps

This way, you can work with the Power Apps coalesce.

Also, you may like:

I hope this Power Apps tutorial taught you detailed information about the Power Apps Rating control. If you have any requirements related to the Power Apps rating control, you can follow the the above different examples to do it.

  • Great post! Is there a way to disable a rating if rating has already been submitted to an employee from the gallery?

  • >