Shape controls and Icon controls in PowerApps

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 clicks or taps the control.

Key properties

Fill – The background color of a control.

OnSelect – How the app responds when the user taps or clicks a control.

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 taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks 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)
  4. Press F5, and then click or tap the Shape control.

    The Target screen appears.

  5. (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 only applies 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 present, if the graphic is used as a button or is otherwise not just for decoration.
  • AccessibleLabel must be empty or the empty string "", if the graphic is purely for decoration. This causes screen readers to ignore the graphic.
  • AccessibleLabel can be empty or the empty string "", if the graphic provides redundant information.

    • For example, a Settings icon with its AccessibleLabel set to Settings. This icon is not used as a button. It is next to a Label that also says Settings. Screen readers will read the icon as Settings, and the label as Settings again. This is unnecessarily verbose. In this case, the icon does not need an AccessibleLabel.

      Important

      Screen readers will always read icons or shapes that have TabIndex of zero or greater, even if AccessibleLabel is empty. This is because they are rendered as buttons. If no AccessibleLabel is provided, screen readers will simply read the graphic as button.

Keyboard support

  • TabIndex must be zero or greater, if the graphic is used as a button. This allows keyboard users to navigate to it.
  • Focus indicators must be clearly visible, if the graphic is used as a button. Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    Note

    When TabIndex is zero or greater, the icon or shape is rendered as a button. There is no change to the visual appearance, but screen readers will correctly identify the image as a button. When TabIndex is less than zero, the icon or shape is identified as an image.