Pen input control in Power Apps
A control in which the user can draw, erase, and highlight areas of an image.
The user can use this control like a whiteboard, drawing diagrams and writing words that can be converted to typed text.
Image – Output property that represents the image drawn by the end user.
Color – The color of input strokes.
Mode – The control is in Draw or Erase mode. Select mode has been deprecated.
AccessibleLabel – Label for screen readers. Can be used to describe the purpose of the control as well as alternative methods of input.
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.
Height – The distance between a control's top and bottom edges.
Input – Deprecated. Whether the input supports mouse, pen, or touch inputs. Defalut value (7) supports all three.
OnSelect – How the app responds when the user taps or clicks a control.
SelectionColor – The text color of a selected item or items in a list or the color of the selection tool in a pen control.
SelectionThickness – The thickness of the selection tool for a pen-input control.
ShowControls – Whether an audio or video player shows, for example, a play button and a volume slider, and a pen control shows, for example, icons for drawing, erasing, and clearing.
Size – The font size of the text that appears on a control.
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).
Create a set of images
Add a Pen input control, name it MyDoodles, and set its ShowControls property to true.
Don't know how to add, name, and configure a control?
Add an Image gallery control, move it below the Button control, and shrink the width of the Image gallery control until it shows three items.
Set the Items property of the Image gallery control to Doodles, and then press F5.
Draw an image in MyDoodles, and then click or tap the Button control.
The image that you drew appears in the Image gallery control.
(optional) In the Pen input control, click or tap the icon to clear the image that you drew, draw another image, and then click or tap the Button control.
Remove a drawing by clicking or tapping it in the Image gallery control.
There must be adequate color contrast between:
- BorderColor and the color outside the control (if there is a border)
- Fill and the color outside the control (if there is no border)
Screen reader support
AccessibleLabel should be present.
Pen input is not accessible to screen reader users. Always provide an alternative form of input. For example, if a sketch is required, consider adding an Add picture control for users to upload an image. Both methods can be offered and the user can choose the one they are more comfortable with.
Pen input is not accessible to keyboard users. Always provide an alternative form of input. For example, if a signature is required, consider adding a Text input for users to enter their name. Both methods can be offered and the user can choose the one they are more comfortable with.