Edit

Share via

Rating control in Power Apps

  • Article

A control with which users can indicate a value between 1 and a maximum number that you specify.

Description

In this control, the user can indicate, for example, how much they liked something by selecting a certain number of stars.

Key properties

Default – The initial value of a control before it is changed by the user.

Max – The maximum value to which the user can set a slider or a rating.

Additional properties

AccessibleLabel – Label for screen readers.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – The distance between a control's top and bottom edges.

OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).

OnSelect – Actions to perform when the user taps or clicks a control.

RatingFill – The color of the stars in a rating control.

ReadOnly – Whether a user can change the value of a slider or rating control.

Reset – Whether a control reverts to its default value.

ShowValue – Whether a slider's or rating's value appears as the user changes that value or hovers over the control.

TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Average( Value1, Value2, ... )

Example

  1. Add a Rating control, and name it Quantitative.

    Don't know how to add, name, and configure a control?

  2. Add a Text input control, name it Qualitative, and move it below the Rating control.

  3. Set the Default property of the Text input control to "", and set its HintText to this formula:
    If(Quantitative.Value > 3, "What did you especially like?", "How might we do better?")

    Want more information about the If function or other functions?

  4. Press F5, and then click or tap either four or five stars in the Rating control.

    The hint text in the Text input control changes to reflect the high rating.

  5. Click or tap fewer than four stars in Quantitative.

    The hint text in the Text input control changes to reflect the low rating.

  6. To return to the default workspace, press Esc.

Accessibility guidelines

Color contrast

There must be adequate color contrast between:

  • RatingFill and Fill

This is in addition to the standard color contrast requirements.

Screen reader support

  • AccessibleLabel must be present.

    Note

    Screen readers treat the Rating control as radio buttons.

Keyboard support

  • TabIndex must be zero or greater so that keyboard users can navigate to it.

  • Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.

  • Consider using a different control if there are too many stars. It can be tedious to navigate with a keyboard and difficult to select accurately with a touch screen.

    Note

    The same keyboard interactions for radio buttons can be used on Rating.