Signature using Pen Input control in PowerApps

In this power apps blog, we will discuss what is the Pen input control in Power Apps, what are the important Power Apps Pen input control properties and we will discuss on Power Apps signature.

We will see these below things that are related to Power Apps Pen input control as:

• Power Apps pen input control properties.
• Draw signature using pen input.
• Check pen input value is blank or not.
• Store signature to SharePoint list.
• Display and update signature in Power Apps from SharePoint.

Power Apps pen input control properties:

The user can use this control like a whiteboard, drawing signature, drawing diagrams, and writing words that can be converted to typed text.

Key properties:

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.

ShowControls – When a user enables or set to true, it shows all the icons that present in the Pen input control. For example, it shows a pen icon for drawing, an eraser for erasing that you have drawn, a clear icon, a volume slider, etc.

OnSelect – Actions to perform when the user taps or clicks a control.

Draw Signature using pen input:

Here, let’s create simple SharePoint list “Information” with columns Name, Contact, Address, Sign (multiple line text). We want to store information of person along with signature in SharePoint list.

• Create simple canvas power apps, add edit form control on screen, connect Information list as data source of the form.
• Add pen input control to the Sign_DataCard1 of form.

After entering some sample data our form will look like above screenshot.

1. Before submitting form to SharePoint list, we need to check whether pen input control is blank or not. For that write this code on the OnSelect property of pen input control- UpdateContext({penInputData:Self.Image})
2. If form pen input control is not blank, then only we are going to store PenInput1.Image to SharePoint list otherwise we are sending “” empty string to Sign field.
3. Now on OnSelect of Save button of screen write following code:

Set(varSign,If(penInputData=PenInput1.Image, Substitute(

JSON(

PenInput1.Image,

IncludeBinaryDataz

),

“”””,

“”

),””));

SubmitForm(SignForm);

• On update property of Sign_DataCard1 write varSign instead of DataCardValue2.Text

Store signature to SharePoint:

On form submission, record will get store to SharePoint list which is data source of the form. Here, signature drawn using pen input control in PowerApps get stored as multiline text in SharePoint list “Information”.

Display and Update Signature in Power Apps:

Now we want to show signature stored in SharePoint list to Power Apps again.

Follow these steps:

• Create new screen in Power Apps, add edit form to it, connect form to SharePoint list “Information”. Set item property of form selectedRecord(record which is selected from another view screen, where we have a gallery or a table with all records from Information list).

• To display signature previously stored, add one image control inside Sign_DataCard1_2 of edit form. Set image property of image control to – LookUp(Information,ID=SelectedRecord.ID,Sign). See following screenshot which shows record along with signature.

• Now someone may want to edit this form and wants to draw new sign, for that after clicking on edit icon make pen input control visible and show cancel icon like below:

• Onselect of cancel icon write – Reset (PenInputEditSign); Set(varResizeImage,true).

Onvisible of EditScreen write –

Set(isEdit,false);

If (IsBlank (LookUp (Information,ID=SelectedRecord.ID,Sign)),Set(varResizeImage,true),Set(varResizeImage,false))

• Now set width and height property of image control which is used for displaying signature.

Width – If (varResizeImage,0, PenInputEditSign.Width – CancelIcon.Width)

Height – If (varResizeImage,0, PenInputEditSign.Height – CancelIcon.Height)

X – PenInputEditSign.X

Y – PenInputEditSign.Y

When we click on cancel icon, image’s width-height will reduce to zero  and pen input will get reset, we can draw new signature and submit form.

Conclusion:

By using pen input control, we can draw signature in Power Apps, store that signature to SharePoint, retrieve signature from SharePoint and display it in Power Apps, update signature and can save it again.

I hope you found this blog helpful.