Power Apps Rating Control - How to use

In this Power Apps Tutorial, We will discuss what is the Rating control in Power Apps and its all properties. Also, by taking some simple scenarios, We will cover these below topics:

How to add PowerApps Rating Control
PowerApps Rating Control Examples
PowerApps rating control sharepoint list
PowerApps average rating
PowerApps sharepoint rating
PowerApps reset rating
PowerApps clear rating

Table of Contents

What is PowerApps Rating Control

PowerApps 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.
In the Power Apps Rating control, it looks like a star icon where a user can indicate how much he/she liked something by selecting the number of stars.
Whenever you are adding a Rating control to the app, by default it shows with maximum 5-star control. Also there some properties where you are allowed to set the minimum and maximum stars in the rating control.

Check out Build a Calculator in Power Apps

PowerApps Rating Control Properties

Below represents some of the important key properties of the Power Apps Rating control. Such as:

Max = It defines the maximum value to which the user can set a slider or a rating.
Default = It specifies the initial value of a control before it is changed by the user.
BorderColor = It provides the color of a control’s border.
DisplayMode = It defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
Fill = It defines the background color of a control.
FocusedBorderColor = It represents the color of a control’s border when the control is focused.
FocusedBorderThickness = It defines the thickness of a control’s border when the control is focused.
Height = It specifies the distance between a control’s top and bottom edges.
OnChange = It defines when the user changes the value of a control (for example, by adjusting a slider), then the actions performs.
OnSelect = It defines when the user taps or clicks a control, then the actions performs .
RatingFill = It represents the color of the stars in a rating control.
ReadOnly = It 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.
ShowValue = It defines whether a slider’s or rating’s value appears as the user changes that value or hovers over the control.
TabIndex = It specifies the keyboard navigation order in relation to other controls.
Tooltip = It specifies the explanatory text that appears when the user hovers over a control.
Visible = It specifies whether a control appears or is hidden.
Width = It specifies the distance between a control’s left and right edges.

Read Create a canvas app from Excel in PowerApps

Add a PowerApps Rating Control

Next comes how we can insert a Rating control in the PowerApps. Follow the below instructions:

Go to Insert tab -> Select Input -> Click on Rating control. Once you will click on it, then the control will appear like the star symbol as shown in the below screenshot. Also, you can provide the rating by using the star marks.

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

Read How to share PowerApps with external users

Power Apps Rating Control Examples

Here let’s discuss a simple scenario of Power Apps Rating Control.

The below screenshot represents the diagramatical representation of the rating control in PowerApps. It specifies when a user will give the 2 stars of any product, then in the text control, it will display as “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?“
Also, you can enter any text or your service feedback in the text input control. To achieve this, follow the below processes.

At first, insert a Rating control and rename it to ServiceRating.

Next, add a Text input control under the Rating control and rename it to ServiceQuality as like the below screenshot.
Set the Default property of the Text input control to blank (” “).

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 = Rating control name

Save and Preview the app. When you will select the star as per your choice, then the text input control value will display as per the star selection.

Read PowerApps show hide fields based on Yes/No column

PowerApps rating control SharePoint list

Do you want to save or store the PowerApps Rating control in the SharePoint List? If so, then follow the below steps:

Step – 1:

I have a SharePoint List named PowerApps Rating. This list has two columns:

Title = By default this is a single line of text column
PowerApps Service Rating = This is also a Single line of text data type field

PowerApps rating control SharePoint list

Step – 2:

Next, We will customize this list by using PowerApps. Click on the Integrate tab -> Power Apps -> Select Customize forms as shown below.

Step – 3:

Once you will click on the Customize forms, then the below screen will open in the PowerApps. In the PowerApps screen, all the SharePoint fields will appear including an Attachments control.
Now insert a Rating control below the Attachments control and rename it to RatingNumber. By default, the rating value will display as 3 stars.

Power Apps rating control in SharePoint list

Step – 4:

Now select the PowerApps Service Rating Data Card and unlock (Advanced -> Unlock) it once as like the below screenshot.

Step – 5:

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

PowerApps rating control in SharePoint — PowerApps Rating Control Example

Step – 6:

At last, Select the text box of the PowerApps Service Rating field and set its Visible property to false. And then drag the Rating control to its place. Save and Publish the app to SharePoint and go back to the SharePoint List.

Step – 7:

In the SharePoint list, create an item, provide the service rating as per your choice and then Save it. Once you will refresh the list, you can see the new record with its service rating as shown below.

Read PowerApps update data table columns

PowerApps SharePoint rating

Do you want to create a Rating app using PowerApps to rate each image in your SharePoint Library? If so, then follow the below pretty and simple scenario.

The below screenshot represents a SharePoint Document Library called Images. This library contains two fields as Name and Modified. Aso, this library has some images with their specific image names (including extensions).

Next, create a SharePoint List named Image Rating. This list contains three columns as well. Such as:

Title = Bydefault, it is a Single line of text column
Image Name = This is a Single line of text Data type column
Image Rating = This is a Number Data type column

Now open the PowerApps and connect the SharePoint List Data sources to the app.
Insert a Horizontal Gallery control and set its Items property to the SharePoint Library name.

Items = Images

Where,

Images = SharePoint Library Name

Within the first section of the gallery control, Insert an image control and apply the below code on its Image property as:

Image = ThisItem.'Link to item'

Similarly, add a Rating control under the image control, so that you can specify the ratings to each image present in the gallery.

PowerApps Rating in SharePoint library — power apps rating in sharepoint example

Next how we can save the images with their ratings in the SharePoint List. To do this, we will use the PowerApps Patch function.
Insert a Button control and rename it to SAVE. Set the below code on its OnSelect property as:

OnSelect = ForAll(
    Gallery1.AllItems,
    Patch(
        'Image Rating',
        Defaults('Image Rating'),
        {
            Title: "Rating Image App - " & Now(),
            'Image Name': 'File name with extension',
            'Image Rating': Rating2.Value
        }
    )
)

Where,

ForAll = PowerApps ForAll function helps to evaluate the formula and perform actions for all the records in the SharePoint List.
Gallery1 = Name of the Horizontal gallery where all the images present
Patch = PowerApps Patch Function is used to modify single or multiple records of the SharePoint list.
‘Image Rating’ = Specify the SharePoint List Name
Title = This is the SharePoint field where the image will store as Rating Image App with Today’s Date and Time
‘Image Name’ = This is the SharePoint column where all the image file will store with its extension
‘Image Rating’ = This is the SharePoint field where all the image ratings will save
Rating2 = Rating control name

Refer to the below screenshot.

That’s what to do in the app. At last, save and preview the app. Provide rates to each image in the gallery control and then click on the SAVE button.

Go back to the SharePoint List (Image Rating) where you wanted to store the image ratings. Once you will refresh the list, you can see all the images with their particular ratings as shown in the below screenshot.

This is how we can work with PowerApps SharePoint rating control.

Read How to use PowerApps Table() Function

PowerApps average rating

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

The below screenshot represents a SharePoint List named Image Rating. There is a total of three fields as Title, Image Name, and Image Rating.
Also, this list has some records or images including their image ratings. Now by using the PowerApps, I want to view the average rating for each image file present in this list.

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"
    ),
    Rating2
)

Where,

Average = PowerApps Average function helps to calculate the average, or arithmetic mean, of its arguments.
“Image Rating: ” = This is the text that will display in the label control
‘Image Rating’ = SharePoint List Name
‘Image Name’ = Specify the name of the SharePoint image field
“Cat.jpg” = Specify the name of the image that you want to view the average rating
Rating 2 = Rating Control name that you are given to each image (As I am taking this rating control from my previous example “PowerApps SharePoint rating“)

Save and Preview the app. You can see the average rating of that specified image in the label control as shown in the above screenshot.

Read PowerApps Functions Tutorial

PowerApps reset rating

Do you want to reset the Rating control in PowerApps? If so, then check out the below simple scenario.

In the below screen, you can see there are several rating controls present in the app. Now I would like to reset all these rating controls by using a Button control. That means, when a user will press the reset button, then all the ratings will clear as shown below.
At first, you need to make sure that the Default property of all the ratings control should be 0.

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

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

Where,

ResetRatings = Specify the Context variable name

As I wanted to reset the rating controls on the button click, that’s why I applied the formula on its OnSelect property. Otherwise, also you can write the code on Screen’s OnVisible property.

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

Reset = ResetRatings

This is how we can work with the PowerApps reset rating.

Read PowerApps Collection – How to create and use

PowerApps clear rating

Whenever you are inserting the PowerApps Rating control into the app, the Default value of the rating control has set to 3 stars always.
Sometimes what happens is, some PowerApps users do not want it that when he/she will open the app, they can see 3 stars by default. Instead of this, they want the stars should be clear or blank.
The below screenshot represents an edit form where user will enter the data. This form contains a rating control where the user can give the rating to that specific item.
But what happens is, everytime the user open the app, the rating control displays as 3 stars bydefault and that should not be. Instead of 3 stars, it should be display as blank stars.

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

Default = Coalesce(
    Parent.Default,
    0
)

The Coalesce function returns the first value that isn’t blank or an empty string. As in the above code Parent.Default is blank (as its a new form), it returns 0.

Refer to the below screenshot.

This is how we can clear the PowerApps rating control.

Also, you may like the below PowerApps Tutorials:

In this Power Apps Tutorial, We discussed what is the Rating control in PowerApps and its all properties. Also, by taking some simple scenarios, We covered these below topics:

How to add PowerApps Rating Control
PowerApps Rating Control Examples
PowerApps rating control SharePoint list
PowerApps average rating
PowerApps SharePoint rating
PowerApps reset rating
PowerApps clear rating

Bijay Kumar

I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com