PenInput Control In PowerApps

Introduction to PenInput Control

In this article, we will be focusing on the PenInput control available in PowerApps canvas app. This control is very much useful when we need to take handwritten input from the user directly from touch screen devices such as phone, tablet, and touch screen laptops. This control is mostly used to take the signature of the user.

Adding PenInput control

To add PenInput control, simply click on “Insert” menu, and under Input section, click on “Pen Input” and this will add Pen Input control on your PowerApps canvas app screen.

PenInput control looks like this

1. If this pen icon is selected, it means you can write anything in the input area.
2. If this eraser icon is selected, it means now when you try to write anything into the canvas area, it will erase the existing content.
3. When this cross is clicked, it will remove all the content written into the canvas area.

Change the pen size (font size)

To change the pen size, you have to click on 4 horizontal line icon in the PenInput control and then select the width of the line that will be drawn to the canvas area.

Change the pen ink color

By default, the pen ink color is Blank, so when you write anything into the canvas area, it will display in black color. If you need to change the color of the ink, you can simply click on Edit Pencil icon and it will display a color available, and you can choose any color from there and it will change the ink color as selected.

PenInput control has some properties and events. Let’s understand each of them in detail.

Properties of PenInput Control

Mode

PenInput control has two types of modes available.

• Draw: If PenMode.Draw is selected, then if we move the cursor into the canvas area with left mouse button clicked, it will start drawing.
• Erase: If PenMode.Erase is selected, then it will delete the existing drawing from the canvas.

Display mode

This controls the accessibility of the control. It has following values

• Edit: It means user can access the control and draw anything into it.
• View: If Display mode is set to View, the drawing will not be editable.
• Disabled: If Display mode is set as Disabled, the control will not be accessible also the control will be greyed out so the user can know this is disabled control.

Font size

We can set font size of the text displayed in the control. This can also be set using pen size directly from the PenInput control as mentioned in “Change pen size” section of this article.

Visible

This property is used to show/hide the control from the screen. If value is true, control will be visible on screen, if false, control won’t be shown on the screen.

Position

Using Position property, we can set the location of the control on the screen. It has two values, X and Y. X value represents the horizontal location and Y represents the vertical location. By the combination of X & Y values, we can set the location of the control over the screen.

Size

This property has two values, Height & Width, using Height we can control the height of the control and using Width we can control the width of the control.

Color

Using color property, we can set the values of the control. It has further 2 properties, Color and Fill.

Using color, we can set the color of the ink, this can also be done directly from the PenInput control by changing the ink color as mentioned in “Change the pen ink color” section of this article.

Using Fill, we can set the background color of the control. Here Fill color is set to the value green.

Border

This property is used to set the border of the control. It has furthermore properties

• BorderStyle: It is used to set the type of border for the control like Solid, Dashed, Dotted, and None.
• BorderThickness: It is used to set the width of the thickness of the border. It accepts a numerical value.
• BorderColor: It is used to set the color of the border. It accepts the name of the color, HEX code, or RGBA code.

Tooltip

This is used to display temporary text when a mouse hovers on the control. This can be used to display some small piece of information such as validation information.

For example, we have set the tooltip value as “This is tooltip”

And it will look like this when we hover the mouse on the control.

Advanced Properties of PenInput Control

Below are some advanced properties of the PenInput control.

ShowControls

This property accepts the value as true or false. If the value is set to true, the controls will be visible in the PenInput control.

If the value is set to false, the controls will be hidden in the PenInput control.

Here you cannot change the Pen Size, Ink Color, even if you cannot erase the content.

Reset

This property accepts the values “true” & “false”. This property is used to reset the state of the control. We can reset the state of the control by setting its value to “true”.

AccessibleLabel

This is another hidden and less used property. This property accepts the text value. The text written into this property will be only read by on screen readers. For example, if we enable the on-screen reader, it will read our description set into the AccessibleLabel property.

This property will be super helpful when we try to build a canvas app for blind people, because then, in that case, screen reader read the text and guide them on what value it accepts.

Common scenario where PenInput control can be used

PenInput control can be used in following scenarios

1. In delivery app where receiver’s signature is required to confirm the delivery
2. To draw some rough ideas on the canvas screen using digital pen or even a finger
3. Save your signature or drawing as a file in SharePoint/OneDrive folder.

Summary

In this article, we have seen what PenInput control is, why it can be used, what are the common properties of the control, and what are advanced properties of the PenInput control in detail. If you have any questions or suggestion related to the article, please let me know in the comment section.