Powerapps save pen input to sharepoint list

PowerApp “Pen input” control is different, like way more different than fx. Camera control. For the untrained eye that tries to extract its image, it seems that you only get access to a local blob storage URL (appres://blobmanager/).

A ton of blogposts has more or less Complex descriptions on how to partly solve the extraction of the image… and there are even multiple replies and comments that say it cannot be done. This has most properly been true back in time…  but it is not valid any longer.

Here is a sample list of people making historical, more or less complicated solutions to extract the image.

An easy and multi-purpose solution is found thanks to Shane Young, utilizing the addition of a PowerApps Json functionality added on 02/05/2019.

The Short description on how to make this work is 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 ) );

Then 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)

In 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'])

and that is it….see Shane Young demo how to save pen input to Onedrive, Sharepoint and use it in an Email and to include the pen input in a PDF.

If you have tried to save the Pen Input to an entity image in CDS you do not need any of the above conversion; just add the PenInput. Image directly to the Entity image attribute, and off you go.

But at first, glance does not seem to work as when viewed in a Model-Driven app the image is all black. What happens is that the pen input as default has a transparent fill color, which is not supported by CDS entity images. To make it work, set Pen input fill color to white or another color of your choice.

That is it.. you now do not have any excuses for not using the PowerApp pen input for all your signature needs.

ANNOUNCEMENT: this Forums service is now discontinued. keep a  lookout, because we're  in the process of launching an exciting new community offering .... #365ers!

Written by Sajin Sahadevan | 6/28/18 10:58 AM

There are a couple of electronic signature applications available in the market today. What if the client isn't willing to pay an additional fee for the same? We have come across similar scenarios where real estate companies dropped the plan of integrating electronic signatures to the forms.

We found a way to resolve this issue (partially, of course), but it’s worth it. We did this by integrating PowerApps with SharePoint Lists where the signature image can be captured using the Pen Input Control in PowerApps. This image can then be stored in the SharePoint Lists.

However, you cannot save attachments to SharePoint Lists as PowerApps supports only “read-only attachments”.

Support for adding attachments by selecting pictures from a gallery or taking one with a camera is expected to roll out in late June 2018.

However, other attachments improvements, including increasing the maximum file size for new attachments have been delayed and won't be expected to ship before September 2018.

Also Read:

Microsoft PowerApps Accelerate How Business Apps are Built

Creating set of images:

1. Add a Pen input control and call it Signatures, set its ShowControls property to true.
2. Next, add a Button control, move it below Signatures, and set Text property of Button control to show Add.
3. Set OnSelect property of Button control to:

Collect(Doodles, {Sketch:Signatures.Image})

By following the steps above, you can create a collection of signature images.

We can use Microsoft Flow to save these image collections from PowerApp to SharePoint. Let’s see on how to configure this:

As you may know, a flow can only accept strings as input and not collection of items from PowerApps. As a work around, we will link the data into one string and then split the data in Microsoft Flow.

This is how the data gets passed:

Monday, June 24, 2018SS.jpg|data:image/jpeg;base64,#

Monday, June 24, 2018TR.jpg|data:image/jpeg;base64,#

You can see that the beginning of the file name comes with a date followed by “|” for separating file name from base64 encoded image. The hash (#) separates each image from other.

Next, create a flow called “Saved Images”

Add a new step (PowerApps) with a compose step as shown below:

In Inputs field, write the following code (In the compose step, select Ask in PowerApps before doing this):

"@split(triggerBody()['Compose_Inputs'], '#')"

Rename compose action to “Split images”. This will help in splitting incoming strings on character #, creating an array with one item per image.

Please note that you need to include double quotes around the formula.

Add “Filter array” action below Split Images action. This will help in removing empty elements that you get at the end while creating data strings in PowerApps. Use Output from the previous step as From field. Once done, click “Edit in advanced mode” and add the below formula:

@not(equals(item(), ''))

This will help you to remove empty values.

Below Filter array action, add an apply to each loop, so the image gets processed when sent over.

Now, select Body output from Filter array step in Apply to each step.

In Apply to each section, add two compose steps. Rename one to “Filename” and the other to “File content”.

For filename add the expression:

"@split(item(),'|')[0]"

For file content add the expression: 

"@dataUriToBinary(split(item(),'|')[1])"

Finally, you need to add an action step for creating a file in Microsoft SharePoint.

The last part is adding an action step to create a file in SharePoint. Pick a site and library and assign the values from the previous compose steps.

Configuring your PowerApp

We have added a text field and a Pen Input control in this app as shown above. When the signature is captured, it converts into an image file and sent over to SharePoint.

Do you have additional questions about this process? For further explanation, send us an email at .

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.

Add Pen input control in PowerApps

• 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:

How to Add Pen input control in PowerApps

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

PowerApps Add signature

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

PowerApps Add signature using pen input control

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.

how to add Add signature in PowerApps

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 pen input background image

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:

PowerApps save signature to SharePoint

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).

Save Powerapps pen input to SharePoint List

• 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.

Powerapps save signature to SharePoint list

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.

How to Save PowerApps pen input to SharePoint List

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'])

How to save signature to SharePoint list in PowerApps

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.

PowerApps signeture

• 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

save signature to SharePoint library in PowerApps

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

How to save signature to SharePoint library in PowerApps

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.

Save Powerapps pen input to SharePoint

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.

Save Powerapps pen input to SharePoint library

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.

PowerApps pen input control to onedrive

• 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.

PowerApps pen input control to onedrive

• 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')

Powerapps save signature to onedrive

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'])

Save Powerapps pen input control to onedrive

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.

How to save powerapps signature to onedrive

• 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

How to Save Powerapps pen input control to onedrive

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

PowerApps pen input control 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 control to onedrive

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)

PowerApps pen input validation

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.

PowerApps pen input validation

Also, you may like these below Powerapps Tutorials as:

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

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com