Edit

Shape and Icon controls in Power Apps

  • Article

Graphics for which you can configure appearance and behavior properties.

Description

These controls include arrows, geometric shapes, action icons, and symbols for which you can configure properties such as fill, size, and location. You can also configure their OnSelect property so that the app responds if the user selects the control.

Key properties (icons and shapes)

Fill – The background color of a control.

OnSelect – Actions to perform when the user selects a control.

Key properties (icons only)

Icon - The type of icon to display (for example, ArrowDown or ShoppingCart).

Rotation - The number of degrees to rotate the icon.

Color - The color of the icon by name or RGBA values.

Additional properties

AccessibleLabel – Label for screen readers.

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

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.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

PressedBorderColor – The color of a control's border when the user selects that control.

PressedFill – The background color of a control when the user selects that control.

TabIndex – Keyboard-navigation order in relation to other controls.

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).

Navigate( ScreenName, ScreenTransition )

Example

  1. Name the default Screen control Target, add a Label control, and set its Text property to show Target.

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

  2. Add a Screen control, and name it Source.

  3. In Source, add a Shape control, and set its OnSelect property to this formula:

Navigate(Target, ScreenTransition.Fade)

  1. Press F5, and then select the Shape control.

    The Target screen appears.

  2. (optional) Press Esc to return to the default workspace, add a Shape control to Target, and set the OnSelect property of the Shape control to this formula:

Navigate(Source, ScreenTransition.Fade)

Accessibility guidelines

Color contrast

The following applies only to graphics that are used as buttons or are otherwise not just for decoration.

For icons:

For shapes with borders:

For shapes without borders:

  • Fill and the color outside the control
  • PressedFill and the color outside the control (if used as a button)
  • HoverFill and the color outside the control (if used as a button)

Screen-reader support

  • AccessibleLabel must be set for important graphics.

  • If the graphic is for decoration or provides redundant information, leave AccessibleLabel empty or set it to the empty string "" . Screen readers will ignore these graphics.

For example, you might place a Lock icon next to a Label that says This form cannot be modified. You don't need an AccessibleLabel for the icon because the Label already explains its meaning.

Important

When TabIndex is zero or greater, the icon or shape becomes a button. Its appearance doesn't change, but screen readers will treat it as a button. They will not ignore the control, even if AccessibleLabel is empty. When TabIndex is less than zero, screen readers treat the icon or shape as an image.

Keyboard support

  • TabIndex must be zero or greater if the graphic is used as a button. Keyboard users can then navigate to it.

  • Focus indicators must be clearly visible if the graphic is used as a button. Use FocusedBorderColor and FocusedBorderThickness to achieve this result.