PowerApps Pen input control (PowerApps signature)

In this PowerApps Tutorial, We will discuss what is the Pen input control in Powerapps, What are the important PowerApps Pen input control properties and we will discuss on PowerApps signature.

Also, By taking some simple scenarios, We will see these below things that are related to PowerApps Pen input control as:

• Add Pen input control in Powerapps
• How to use Pen input control in PowerApps
• How to Add a signature by using the PowerApps Pen input control
• Provide Powerapps pen input background image
• Save Powerapps pen input to SharePoint List or Powerapps save signature to SharePoint list
• Save Powerapps pen input control to OneDrive or Powerapps save signature to onedrive
• Powerapps pen input base64
• How to validate the Powerapps pen input control or Powerapps pen input validation

PowerApps Pen input control

PowerApps Pen input control is a type of control that behaves like a normal pen. By using a normal pen, a user can write text, draw diagrams on a paper or a whiteboard, etc.

Similarly, By using the Powerapps Pen input control, a user can write the words, draw the signatures, draw the diagrams on a whiteboard that can be converted to typed text.

You can erase the text or diagram that you have drawn and also, can highlight the image areas.

• How to use forall function in PowerApps?

PowerApps Pen input control properties

Below are represents some important properties of PowerApps Pen input control as:

• Color: It defines the color of input strokes.
• Mode: This property specifies whether the input control is in Draw or Erase mode.
• DisplayMode: It specifies whether the input control allows user input (Edit), only displays data (View), or is disabled (Disabled).
• Fill: It defines the background color of the Pen input control.
• Input: This is Deprecated. It defines whether the input supports mouse, pen, or touch inputs. The Default value is “7” that supports all three.
• OnSelect: When the user clicks the pen input control, it specifies how the app responds.
• ShowControls: When a user enable 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.
• Size: It represents the text font size that appears on the Pen input control.
• Visible: It specifies whether the Pen input control appears or is in hidden mode.
• Width: It defines the distance between a control’s left and right edges.

Add Pen input control in PowerApps

Here, I will show you how you can insert a Pen input control in PowerApps screen.

• Sign in the PowerApps app with your credentials.
• Create a blank new Canvas app and choose any one Layout either Tablet or Phone.
• On the Powerapps Blank screen, Insert a Pen input control (Insert -> Input -> Pen input) and rename (optional) it.

• The Pen input control will look like the above screenshot. Also, you can see there are some icons (Pen icon, Erase icon, Cancel icon, etc) available in the Pen input control.
• If you don’t want to see all these icons, then you can set the ShowControls property as false otherwise true as shown below:

PowerApps Add signature

Suppose, you want to add a signature by using the Powerapps Pen input control. Also, you want to store the signature (that you have drawn in the control) in the Powerapps Collections. Then, we need to do these below things as:

• Add a Pen input control and rename it to “MySignature“.
• Insert a Button and rename it to “btnAddSignature“. Set its Text property as “Add Signature“.
• Select the Button (Add Signature) and apply the below formula on its OnSelect property as:

OnSelect = ClearCollect(SignatureCollection, {Signatures:MySignature.Image})

Where,

• ClearCollect = This function helps to create a Powerapps collection where always it clears the previous value and stores the new one.
• SignatureCollection = Collection name
• Signatures = Collection column name under where the signature will store
• MySignature.Image = Pen input control name and its stores as an image

Next, Preview (F5) the app. Add your signature inside the Pen input control box and click on the Add Signature button.

Go to the Powerapps Collections (View -> Collections) and click on the collection name (SignatureCollection). You can see your signature has been stored as like below screenshot.

PowerApps pen input background image

As you can see, When you are inserting the Pen input control in the PowerApps screen, By default the background color is transparent or [RGBA(255, 255, 255, 1)].

But sometimes what happens is, the Pen input control background image is going to completely black. In that case, you need to change the pen input background image to white, then it should work. Also, you can change the pen color to white.

To change the Pen input control background as white, Select the control and set its Fill property as White as shown below: (This is the solution only for the Black color background)

PowerApps save signature to SharePoint

Here, We will see how we can save the Powerapps signature in a SharePoint. You can save the signature in a SharePoint List and as well as in a SharePoint Document Library. Follow these below steps to do so:

I have a SharePoint Document Library named “Signature Library“. This library has these below columns as: (By default, all these column will be there while creating a SharePoint Document Library)

• Name
• File Size
• Modified
• Modified By

Refer the below screenshot:

Now coming back to the Powerapps screen,

• Add a Pen input control and rename it (optional).
• Insert a Button and set its Text property as “Save to SharePoint Library“.
• Next, Create a New Powerapps Flow (Action -> Power Automate -> + Create a new flow).

• Click on My flows (from left navigation) -> + New -> Select + Instant-from blank as shown below.
• Enter the Flow name (Save Signature to SharePoint) and choose the PowerApps option to trigger the flow. Hit on the Create button, then the flow will create.

Under the PowerApps, Insert a New step and choose an action as Create file (in SharePoint). Provide the below fields to this action as:

1. Site Address: Enter your SharePoint Site address URL where you want to save the signature.
2. Folder Path: Provide your SharePoint Document Library or List name that will store the Powerapps saved signature.
3. File Name: Specify the name of the file that you want to store in the Document library. As I want to save my signature file with the current date and time including a “.jpg” format. So I have written this below formula in the Expression tab as:

concat(utcNow(),'.jpg')

NOTE:

In the File name, When you are concatenating the .jpg extension, do not forget to specify it with ‘.jpg’ (single quote), otherwise, it may not work.
In the flow, you need to specify a string with a Single quote wherein Powerapps you need to specify a string with the Double quote.

4. File Content: Here, you need to specify or convert the file content to base64 to Binary format. For that, Go to Expression tab and apply this below formula as:

base64ToBinary(triggerBody()['Createfile_FileContent'])

Next, Save the Flow. Thats it for using the flow things.

Now come back to the Powerapps screen. You need to add this created flow (Save Signature to SharePoint) in the Powerapps button.

• Select the Button (Save to SharePoint Library) -> Go to Action -> Power Automate -> Click and add the flow (Save Signature to SharePoint) as shown below. Then the specific flow will be added to the button.

• Next, select the Button (Save to SharePoint Library) and apply this below formula on its OnSelect property as:

OnSelect = Set(
    PenVar,
    JSON(
        MySignature.Image,
        JSONFormat.IncludeBinaryData
    )
);
Set(
    PenInput64Bit,
    Mid(
        PenVar,
        24,
        Len(PenVar) - 24
    )
);
SaveSignaturetoSharePoint.Run(PenInput64Bit)

Where,

• PenVar, PenInput64Bit = Variable names
• MySignature = Pen input control name
• SaveSignaturetoSharePoint = Powerapps Flow name

Preview (F5) the Powerapps app. Add signature or text in the Pen input control and hit on the button (Save to SharePoint Library).

Go to the SharePoint Document Library (Signature Library) and refresh it. You can see the jpg file has been saved with the current date and time as shown below.

Select the file from the library and click the file link. In the Details pane, you can see the Powerapps signature image as like below screenshot.

PowerApps pen input control to onedrive

Like SharePoint, you can also save the Powerapps signature in your OneDrive. In the SharePoint, you are saving the Powerapps signature in a SharePoint list or library, but here you will save in an OneDrive folder.

This process is almost similar to the SharePoint save signature that explained in the above scenario. In this case, also, you will use the Powerapps flow. But the only difference is instead of taking the Create file in SharePoint action, here you need to take Create file in OneDrive for Business action.

• The below screenshot represents an OneDrive folder (SignatureFolder) where I want to save the Powerapps signature.

• Next, do the same thing for Powerapps flow as you have done in SharePoint. Create a new flow, enter the flow name, and choose the PowerApps option to trigger the flow.

• Under the PowerApps, Insert a New step and choose an action as Create file (One Drive for Business). Provide the below fields to this action as:

1. Folder Path: Provide your Onedrive folder name (SignatureFolder) that will store the Powerapps saved signature.
2. File Name: Specify the name of the file that you want to store in the Signature Folder. As I want to save my signature file with the current date and time including a “.jpg” format. So I have written this below formula in the Expression tab as:

concat(utcNow(),'.jpg')

3. File Content: specify or convert the file content to base64 to Binary format. For that, Go to Expression tab and apply this below formula as:

base64ToBinary(triggerBody()['Createfile_FileContent'])

That’s it for the flow things. Just Save the flow and come back to the Powerapps screen.

Next, you need to add this created flow (Save Signature to OneDrive) in the Powerapps button.

• Select the Button (Save to OneDrive) -> Go to Action -> Power Automate -> Click and add the flow (Save Signature to OneDrive) as shown below. Then the specific flow will be added to the button.

• Select the Button (Save to OneDrive) and apply this below formula on its OnSelect property as:

OnSelect = Set(
    PenVar,
    JSON(
        MySignature.Image,
        JSONFormat.IncludeBinaryData
    )
);
Set(
    PenInput64Bit,
    Mid(
        PenVar,
        24,
        Len(PenVar) - 24
    )
);
SaveSignaturetoOneDrive.Run(PenInput64Bit)

Where,

• PenVar, PenInput64Bit = Variable names
• MySignature = Pen input control name
• SaveSignaturetoOneDrive = Powerapps Flow name

Preview (F5) the Powerapps app. Add signature or text in the Pen input control and hit on the button (Save to OneDrive).

Go to the OneDrive Folder (SignatureFolder) and refresh it. The Powerapps jpg file has been saved with the current date and time. If you will open the Details pane, then you can see the Powerapps signature image as shown below.

PowerApps pen input base64

In the above example (Powerapps save signature to SharePoint list), I have already discussed about to save the Pen input image as Base64 Binary format. Here, Let me explain this thing very shortly.

Suppose a user wants to save the Pen input image as base 64 format. Then in that case we can use the Powerapps JSON functionality. This helps to save the pen input image in a JSON format asking the JSON function to include Binary Data.

To save the pen input image in a JSON format asking the JSON function to include Binary Data:

Set( PenVar, JSON( PenInput1.Image,JSONFormat.IncludeBinaryData ) );

Next, strip the save JSON from the JSON format to only leave the 64 Bit encoded image.

Set( PenInput64Bit, Mid(PenVar, 24,Len(PenVar) - 24 ) );

Then post the raw image data to a Microsoft Flow function:

Sign_to_Sharepoint.Run(PenInput64Bit)

Now, in the Microsoft Flow then add the pen input image as an Email Attachment, Onedrive file, Sharepoint file, etc. by using base64ToBinary functionality to convert it into the needed Binary format:

base64ToBinary(triggerBody()['PenInput64Bit'])

PowerApps pen input validation

While you work with the PowerApps Pen input control, maybe a question comes in your mind that can we validate the signature or text that we have drawn in the control, if yes, then how we can validate it in Powerapps.

Coming to the answer to this question is, yes, we can do the Powerapps pen input validation by taking a Powerapps variable. Follow these below things that how you can do validate:

1. Insert a Pen input control and set its OnSelect property as:

OnSelect = Set(varSign,PenInput2.Image)

Where,

• varSign = Variable name
• PenInput2 = Pen input control name

2. Add one Label and set its Text property as:

Text = PenInput2.Image

3. Add another Label and set its Text property as:

Text = varSign

Where,

• varSign = Variable name that you have created in the Pen input’s OnSelect property

4. Preview (F5) the app and add or draw something in the Pen input control. When you will draw on it, you can see both the Labels (Pen input Image and Pen input Variable) will have the same value as shown below: (Where Pen input image is having the new item and Pen input Variable is having the new variable i.e. 216)

5. When you will cancel the text from the pen input control, then you can see both the value will be changed in labels. Here, 218 takes the new id and 216 takes the previous variable. If you will add something again in the Pen input control, then both the value will be the same.

Also, you may like these below Powerapps Tutorials as:

• Get users from SharePoint Group in PowerApps
• PowerApps Patch Function with examples
• PowerApps camera control + Save captured image in SharePoint
• PowerApps role based security SharePoint example (SharePoint Groups)
• PowerApps: Submit data to two SharePoint Lists
• Embed PowerApps in SharePoint modern page
• Show hide fields based on dropdown selection PowerApps
• How to use date time picker in PowerApps
• PowerApps toggle control + How to use with example

Here, we learned in details about the PowerApps pen input control and how to add signature in PowerApps using the pen input control and also discussed the below things:

• What is the Pen input control in Powerapps
• What are the important Powerapps Pen input control properties
• Add Pen input control in Powerapps
• How to Add a signature by using the Powerapps Pen input control
• Provide Powerapps pen input background image
• Save Powerapps pen input to SharePoint List or Powerapps save signature to SharePoint list
• Powerapps save signature to onedrive
• Powerapps pen input base64
• How to validate the Powerapps pen input control or Powerapps pen input validation