Power Apps Rating Control [With Examples]

Recently, while working on a Power Apps form, I had to use the rating control to submit the user provided rating to a SharePoint list. This inspired me to write a post about the rating control in a tutorial.

In this Power Apps tutorial, I will explain a brief overview of the Power Apps Rating Control along with its properties.

Furthermore, you will learn how to utilize the rating control in Power Apps and also how to bind the Power Apps rating control to SharePoint list.

Power Apps Rating Control

The Power Apps Rating Control allows users to provide feedback and ratings withing their applications by selecting a value between 1 and a maximum number, as specified by the user.

Typically, it is represented by a star icon, that enables users to rate something based on their performance in an interview or provide feedback on a product or service.

By default, the control displays a maximum of 5 stars, but users can adjust the minimum and maximum values through the control’s properties.

Power Apps Rating Control

This is the overview of Power Apps Rating control.

Power Apps Rating Control Properties

In this section, I will explain the properties of the Power Apps Rating control.

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”]
DefaultWhen the user opens the app, we can specify the value.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
MaxThe maximum value that a user can set on a rating.
OnChangeWhen the user changes a value, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
RatingFillThis property utilizes color to represent the rating of stars.
ResetResetting the controls to their default value can be beneficial.
ShowValueConsider displaying the value of a rating control during a user’s interaction or when they rate it.
VisibleHere, we can specify whether the rating control can be visible.

These are the properties of a Power Apps rating control.

How to Use Rating Control in Power Apps

This section will show you how to use a Power Apps rating control.

Example 1:

I have created a Power Canvas app and then added a Rating control. I have set the maximum value as 10; whenever the user provides the rating, the text label will display the user-set value as shown below:

How to use Power Apps rating control

Let me show you how to achieve this:

  • Sign into your Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Rating control.[Click on +Insert -> Expand Input -> Select Rating].
Rating Control in Power Apps
  • Select the Rating Control -> Set its Max property to:
10
Add Rating control in Power Apps
  • Now, I will rename the Rating control to “rtg_UserSelection” as shown below:
How to add Power Apps Rating control
  • Insert a Text label -> Set its Text property to:
rtg_UserSelection.Value

Where,

  1. rtg_UserSelection = Rating control name
Using Power Apps Rating Control
  • Once the app is ready, SavePublish, and Preview the app. The text label will display the values based on the user-provided rating.
How to work with a Power Apps rating control

Example 2:

On the Power Apps screen, I have added a Text label and Rating control. Whenever the user provide the rating more than five, the text label will say “Good“; if it is less than five, it will say “Poor” as shown below:

How to use rating control in Power Apps

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Rating control as shown below:
Using Rating Control in Power Apps
  • Insert a Text label -> Set its Text property to:
If(
    rtg_Comparative.Value >= 3,
    "Good",
    "Poor"
)

Where,

  1. rtg_Comparative = Rating control name.
Add Power Apps Rating control
  • Once the app is ready, SavePublish, and Preview the app. The text label will display the text as “Good” when the user provides a rating greater than 5; otherwise, the text label will display “Poor.”
How to work with a rating control in Power Apps

This is how we can work with a Power Apps rating control.

How to Bind Power Apps Rating Control to SharePoint List

This section will show how to bind Power Apps rating value to a SharePoint list.

For Example, I have a SharePoint Online list [Employee Monthly Performance] that has various columns like:

Column NameData Type
Employee IDTitle
Employee NameSingle line of text
Employee PerformanceNumber
How To Bind Power Apps Rating Control To SharePoint List Column

On my Power Apps screen, I have inserted an Edit form connected to the above SharePoint list.

I have replaced the text input control of the number column with a Rating control. When the user provides a rating in the form and click on the Submit button, the provided data will be saved to the above SharePoint online list as shown below:

Rating control using SharePoint list in Power Apps

After submitting the data to SharePoint online list, it will look like as shown below:

Power Apps bind rating control to SharePoint list column

Follow the below steps to achieve this:

  • On the Power Apps screen, insert an Edit form -> Set its Data source property to:
'Employee Monthly Performance'

Where,

  1. Employee Monthly Performance = SharePoint online list name
Power Apps Rating Control SharePoint list
  • The form contains the text input control of the number column; replace it with Rating control as shown below:
Bind Power Apps Rating Control To SharePoint List Column
  • Insert a Button control -> Set its OnSelect property to:
Patch(
    'Employee Monthly Performance',
    Defaults('Employee Monthly Performance'),
    {
        Title: txt_EmployeeID.Text,
        'Employee Name': txt_EmployeeName.Text,
        'Employe Performance': rtg_EmployeePerformance.Value
    }
)

Where,

  1. Employee Monthly Performance = SharePoint online list name
  2. Employee ID = SharePoint list title column
  3. txt_EmployeeID = Text-input control name
  4. Employee Name = SharePoint list column name
  5. txt_EmployeeName = Text-input control name
  6. Employee Performance = SharePoint list number column name
  7. rtg_EmployeePerformance = Rating control name
How to bind rating control to SharePoint list in Power Apps
  • SavePublish, and Preview the app. Provide all the details, including the rating control, and then click the Submit button.
Bind rating control to SharePoint list in Power Apps

The provided data will be saved to the below SharePoint online list.

How to use rating for SharePoint List in PowerApps

Conclusion

In this tutorial on Power Apps, the focus is on the “Power Apps Rating Control.” This feature allows users to rate items, such as interview performance or product/service feedback.

You have learned the properties of a Power Apps Rating control and how to utilize the Power Apps rating control through two examples.

To conclude, I have explained how to bind Power Apps rating control to the SharePoint list.

Moreover, you may like some more Power Apps tutorials: