PowerApps hand written signature
Customer asked me if this is possible to add handwritten signature to a PDF generated using tools available in Office 365. My first thought was “no”, then I checked that there is “Pen input” control in PowerApps, so it was like “yes”. Then again, after searching “how” this signature can be put inside a document, I thought this is a “no”.
Basically because the behavior of the “Pen input” control is way different than “Camera”: its data is not stored as base64 string, but as a hyperlink to a local blob storage (appres://blobmanager/) that is available only for a current instance of the application.
Therefore, when trying to pass that value to Microsoft Flow, process cannot access the contents of the image, because is only given its URL and is ending up with various errors related to it, ex.:
My general idea was to limit usage of 3rd party apps and Azure Functions. Also, to make it as simple, as possible. I found bunch of solutions, like:
- Suggesting to save signatures into a collection and then write them to SharePoint (https://powerusers.microsoft.com/t5/General-Discussion/Save-Signature-to-SharePoint-List/td-p/76661) – I couldn’t make it work. Signatures from collection were still URLs to blobmanager.
- Second one was quite interesting, telling to send signature as an attachment using Outlook connection (https://powerusers.microsoft.com/t5/Creating-Apps/PowerApps-Digital-Signature-to-Sharepoint-List/m-p/153702/highlight/true#M4252) – it actually work, what surprised me – why it is possible to send that signature as an image attachment, but is impossible to pass it to Flow? 🙂
- The one, most advanced was using custom connector based on the OpenAPI (https://powerusers.microsoft.com/t5/General-Discussion/Pen-input-save-image-to-SharePoint/m-p/82215/highlight/true#M31819) – that one I haven’t tried, but I see no reason, why it wouldn’t work.
But in my opinion they were all to complicated. The one with e-mail was also way to slow – sometimes I had to wait over 5 minutes for the Outlook trigger to start my Flow.
The purpose of the application is to allow mobile user to write an inspection report and sign it, so that both the data from report and a signed PDF file are then saved to SharePoint. For my needs I decided to try using Azure Blob Storage as the place where I’m saving the signature and from where it is later being picked up by the process. And the process is as following:
- User fills in a report form
- User sign the form
- Form is being saved to SharePoint
- In the “OnSuccess” event of the form submission there is a set of action added, to save signature to Blob Storage and then to trigger Microsoft Flow, passing it data from the submitted form.
- Microsoft Flow pics signature, creates HTML with it.
- Then converts it to PDF
- Attaches PDF to the created, in the 3rd step, item.
Create blob storage
The blob storage is quite cheap. I think it will cost my customer 0 for the expected traffic (https://azure.microsoft.com/en-us/pricing/details/storage/blobs/). To create your own storage, go to Azure Portal and create new storage account:
Once created, open your resource and then go to “Storage Explorer” to create new “Blob container”:
P.S. You can do this as well using “Azure Storage Explorer” (https://azure.microsoft.com/en-us/features/storage-explorer/) – free desktop tool from Microsoft.
Create PowerApps app
Next create your app. Add “Pen input” control where you want it. And a submit button. Also, add new “Data source” that is “Azure Blob Storage”. When creating, you’ll be asked to provide Azure Storage account name and account access key:
This information can be obtained again in the created resource’s dashboard, in the “Access key” menu:
Copy one of the keys, paste to the connection form and done.
Now you can add a function to the “submit button” that creates new file in the blob storage account:
AzureBlobStorage.CreateFile("files", "TestFile.png", PenInput1.Image);
- “files” – this is name of the created “blob container”
- “TestFile.png” – name of the file, that will be created with the image from the Pen input control.
- PenInput1.Image – contents of the file that is going to be created.
Now the Flow, that is going to combine data into a HTML file and convert to PDF. Microsoft Flow is called in my case after the creation of the file in Blob Storage is completed – both functions are being triggered by the same “OnSuccess” event, but are divided with semicolon, thus second one will start after first is completed:
AzureBlobStorage.CreateFile("files", "TestFile.png", PenInput1.Image); SignDocument.Run(Form1.LastSubmit.Location, Form1.LastSubmit.Customer, Form1.LastSubmit.ReportComments, User().FullName, "/files/TestFile.png", Form1.LastSubmit.ID);ResetForm(Form1);Reset(PenInput1)
The “/files/TestFile.png” is the parameter that Flow is then using in “Get blob content” action. After it gets it, it then builds the HTML contents, adding the signature as an image, using the following expression:
<p><img width="200" src="dataUri(body('Get_blob_content'))" /></p>
Next I’m using “Create file” action from “One Drive” set of actions, using the HTML contents as the file contents. Next I’m converting the file to PDF. After that, I’m attaching converted file to the created SharePoint list item record. It’s ID is passed as a parameter form PowerApps to Flow:
For my needs and as the proof of concept the whole solution works like a charm. See yourself!
Please leave your comments and questions below!
For comparison purposes, see how you can add signature to PDF documents using Nintex Forms: https://poszytek.eu/nintex-en/mobile-en/how-to-use-nintex-mobile-signature-in-document-generation/
Well done! I’m using this in process in app now – and it works great! Thank you kindly for the tricks.
Now I’m just trying to get my collection images ready for the PDF form… https://powerusers.microsoft.com/t5/General-Discussion/Collection-with-Camera-Images-to-appear-in-HTML-which-is-then/m-p/213565
Thanks again – and well done!
Can you explain me the flow in detail please
What part of the workflow you don’t understand?
the first step get signaturefilename i don’t know what is the parameter in input and when i launch the flow i have a message in poweraps : Number of agrument invalid one for 6
And i don’t have the function : AzureBlobStorage.CreateFile this is my function :StockageBlobAzure.CreateBlockBlob(“files”; “TestFile.png”; PenInput1.Image);;SignDocument.Run(Form1.LastSubmit.Titre; Form1.LastSubmit.CUSTOMER; Form1.LastSubmit.COMMENTS; User().FullName;”/files/TestFile.png”; Form1.LastSubmit.ID);;ResetForm(Form1)
Christophe, please reach mi using contact form and I will try to help you that way.
What did you put for GetSignatureFileName and Get Related Item ID part? Did you have to hard code it?
No, these are just “Compose” actions in which I put expression “Ask in PowerApps” – then the parameter name looks nicer 🙂
In the end, when I am calling Flow from PowerApps, I am passing these two values. They are the name of the signature image stored in Azure Blob Storage and the ID of the item saved by the form:
“/files/TestFile.png” and Form1.LastSubmit.ID.
Thank you very much for this valuable article. I have a requirement of take a photo using power Apps and then using pen input or using finger user will be able to mark on the photo and then upload the marked photo in to SharePoint list.
Can you please help me on this , or can you give me guidance on this.
Hi! I see there is no way to anyhow merge these files OOTB. I mean – you can make a photo, then overlay it with drawing, however in the end you must somehow merge it and save as a new image or pdf. For pdf to image there is a paid Muhimbi action. For merging two images I think the easiest is to use Azure Function. I am working now on app, that is doing that.
Have you been able to merge two images yet? One image of the pen input and the other the original image?
Kevan, you can find it here: https://poszytek.eu/en/microsoft-en/office-365-en/powerapps-en/sketch-noting-in-powerapps-and-merging-images/. I hope this is what you were searching for. You can get the solution from here: https://powerusers.microsoft.com/t5/Community-Apps-Gallery/App-for-taking-photos-and-adding-notes/m-p/289368#M186
Hi Tom, Great post – I am struggling with the .Run() as powerapps will only allow 2 arguments? i must be doing something wrong as in your demo you pass through more data to your html form?
Hi! That is basically up to you how many arguments you expected to be passed. An argument when triggering a Flow from PowerApps is any value that you configured in Flow using the “Ask in PowerApps” property. If you need other properties simply create a variable (or use Compose action) and ask for its value in PowerApps.
I am trying to get this working, but get an Bad Request error on GetBlobContent
“message”: “The specifed resource name contains invalid characters.\r\nclientRequestId: 445f090f-cfd0-4249-9f81-8ab89bbc190d”,
Hi! I don’t know what name for your blob you gave, but maybe try with something easier for the beginning. No spaces, no special characters.
Please follow the naming requirements you can find here: https://docs.microsoft.com/en-us/rest/api/storageservices/Naming-and-Referencing-Containers–Blobs–and-Metadata?redirectedfrom=MSDN
Thank you for the reply…
I write the Pen Input to the blob successfully.
It is just when I try to read the blob from my flow
My Azure storage account is ejobcard, and the Blob container is sigs
My apologies… I’m a newby with flows Azure and Apps..
Could you by any chance expand the whole flow to show all steps in detail.
Thank you for the great working solution. I am following the steps and am getting an error for ‘SignDocument.Run’. Is this because SignDocument is the name of your powerapps?
That is because it is a name of my Flow 🙂 If you name your Flow using the same name, it will work.
Thanks for the solution. However when i convert it to PDF, it is showing red cross sign and no Image. HTML is showing the correct image though. Any idea?
Hi. This is because process doesn’t have access to the file or the image’s contents are passed incorrectly. Be sure you store the image somewhere from where you can get its binary content. It is Azure Storage in my example, but you can use SharePoint or OneDrive as well.
Hi Tomasz, great post, thanks very much!
Can I ask for your your advice, please. Is there a way to make the signature area on a mobile phone screen to open in a pop up window for convenience, so that there is more room to write, and then, once signature is written to mirror it in the main screen of the app, and then save it in storage. I have not been able to work out whether it is possible, but I am a novice in PA’s, I have to say.
Sure, you can follow idea from fellow MVP, Matt Devaney: https://matthewdevaney.com/capture-a-signature-with-power-apps-pen-input-and-save-to-sharepoint/.
Pingback: PowerApps Pen Input - Have issues? Problem solved! (Sharepoint and CDS) - #PowerApps #PowerAutomate #Dynamics365
Great article, thank you.
May I ask a question about guetting a signature ? I am wondering how to send an email to a guest and let him put his signature (either with mouse or finger) and get the response back in powerapps (Dataverse) ? Any suggestions ?
Honestly if you think of using Power Platform for that, you’d need to have that person as a guest account in your tenant. Either in SharePoint or Teams.
Optionally you can think of using Power Apps Portal, but that’s not something I can help you with 🙂