Who designed the power symbol

Shape controls and icons for controls in Power Apps

  • 3 minutes to read

Graphics whose properties, such as appearance and behavior, can be configured.

description

These controls include arrows, geometric shapes, action symbols and symbols whose properties such as filling, size and position can be configured. You can also use the property OnSelect configure the app to respond when the user selects the control.

Key properties (symbols and shapes)

Fill - The background color of a control.

OnSelect - How the app reacts when the user selects a control.

Key properties (symbols only)

symbol - The type of symbol to be displayed (e.g. Down arrow or Shopping venture).

rotation - The number of degrees by which to rotate the symbol.

colour - The color of the symbol by name or RGBA values.

Additional properties

AccessibleLabel - Name for voice output.

DisplayMode - Specifies whether the control allows user input (To edit), whether only data is displayed (Show) or whether the control is deactivated (Disabled).

FocusedBorderColor - The border color of a control when the control is the focus.

FocusedBorderThickness - The border thickness of a control when the control is the focus.

Height - The distance between the top and bottom of a control.

HoverFill - The background color of a control when the user hovers the mouse pointer over it.

PressedBorderColor - The border color of a control when the user selects the control.

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

TabIndex - Keyboard navigation order in relation to other controls.

Visible - Indicates whether a control is shown or hidden.

width - The distance between the left and right edges of a control.

X - The distance between the left edge of a control and the left edge of the parent container (from the screen if there is no parent container).

Y - The distance between the top of a control and the top of its parent container (from the screen if there is no parent container).

Related functions

Navigate( ScreenName, ScreenTransition )

example

  1. Name that Screen-Standard control aim, insert LabelControl, and then set the textProperty so tight that aim is shown.

    Would you like to know how to add and configure a control?

  2. Insert Screen-Add control and name it source.

  3. Paste in source a shapeControl and set its OnSelect-Feature fixed to this formula:

  1. Press F5 and then select the shapeControl element.

    The ad aim is displayed.

  2. (optional) Press ESC to return to the default workspace, paste shapeControl too Line and insert the OnSelectProperty of shapeControl to this formula:

Accessibility guidelines

Color contrast

The following only applies to graphics that are used as buttons or that are not used solely for display purposes.

For symbols:

For shapes with a frame:

  • BorderColor and the color outside the control
  • FocusedBorderColor and the color outside of the control when it is used as a button

For shapes without a frame:

  • filling and the color outside the control
  • PressedFill and the color outside of the control (if this is used as a button)
  • HoverFill and the color outside of the control (if this is used as a button)

Screen reader support

  • AccessibleLabel must be set to a non-empty string if the graphic is used as a button, not just a decoration.

  • AccessibleLabel must be empty or the empty string "" if the graphic provides redundant information or is only used for decoration. This value is the reason that the graphic is ignored by the speech output.

For example, you could use the AccessibleLabel Property of a symbol Settings on Settings establish. This symbol is not used as a button. It's next to one instead Labelthat too Settings reads. Screen readers read both the symbol and the label as Settingswhich is unnecessarily verbose. So the symbol doesn't need any AccessibleLabel-Property.

Important

Screen readers read a symbol or shape as a button, if AccessibleLabel is set to an empty string and TabIndex is set to zero or higher. Such symbols or shapes are rendered as buttons.

Keyboard support

  • TabIndex must be zero or greater when a graphic is used as a button. If you set this value on an icon or shape, keyboard users can navigate to it.

  • Focus indicators must be clearly displayed if the graphic is used as a button. FocusedBorderColor and FocusedBorderThickness can help you achieve this result.

    Note

    If TabIndex is zero or greater, the icon or shape is rendered as a button. This does not change the visual appearance, but the screen reader recognizes the image correctly as a button. Is TabIndex less than zero, the symbol or shape is recognized as an image.