Top
PowerApps+Flow logo

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

Why?

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.

Pen input control in PowerApps
“Pen input” control in PowerApps

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

Error related to bad data format

Solutions

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:

  1. 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.
  2. 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? 🙂
  3. 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. 

My solution

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:

  1. User fills in a report form
  2. User sign the form
  3. Form is being saved to SharePoint
  4. 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.
  5. Microsoft Flow pics signature, creates HTML with it.
  6. Then converts it to PDF
  7. 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:

Creation of Storage account
Creation of Storage account in Azure Portal

Once created, open your resource and then go to “Storage Explorer” to create new “Blob container”:

Creating new blob container in Azure Portal
Creating new blob container in Azure Portal

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:

Required data to create Azure Blob Storage data source in PowerApps
Required data to create Azure Blob Storage data source in PowerApps

This information can be obtained again in the created resource’s dashboard, in the “Access key” menu:

Azure Blob Storage name and access keys
Azure Blob Storage name and access keys

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

Where:

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

Microsoft Flow

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:

Microsoft Flow used for adding signature to the PDF and attaching file to the SharePoint item
Microsoft Flow used for adding signature to the PDF and attaching file to the SharePoint item

The results

For my needs and as the proof of concept the whole solution works like a charm. See yourself!

Working solution

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/


Tomasz Poszytek

Hi, I am Tomasz. I am expert in the field of process automation and business solutions' building using Power Platform. I am Microsoft MVP and Nintex vTE.

21 Comments
  • Spencer

    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!

    February 7, 2019 at 9:45 pm Reply
  • christophe bezot

    Hello,
    Can you explain me the flow in detail please

    February 18, 2019 at 11:04 am Reply
    • Tomasz Poszytek

      What part of the workflow you don’t understand?

      February 18, 2019 at 11:12 am Reply
  • christophe bezot

    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)

    February 18, 2019 at 1:27 pm Reply
  • Tomasz Poszytek

    Christophe, please reach mi using contact form and I will try to help you that way.

    March 1, 2019 at 9:13 pm Reply
  • M B

    Hi,
    What did you put for GetSignatureFileName and Get Related Item ID part? Did you have to hard code it?

    March 22, 2019 at 5:01 pm Reply
    • Tomasz Poszytek

      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.

      March 22, 2019 at 5:49 pm Reply
  • Dineth

    HI Tomasz,
    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.
    Many thanks.

    April 1, 2019 at 12:54 pm Reply
    • Tomasz Poszytek

      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.

      April 3, 2019 at 8:45 am Reply
  • Kevan Smith

    Hi,

    Have you been able to merge two images yet? One image of the pen input and the other the original image?

    Regards,
    Kevan

    May 22, 2019 at 1:27 pm Reply
  • Mike

    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?

    June 6, 2019 at 10:01 am Reply
    • Tomasz Poszytek

      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.

      June 6, 2019 at 10:19 am Reply
  • Juan Slabbert

    Hi,

    I am trying to get this working, but get an Bad Request error on GetBlobContent

    {
    “status”: 400,
    “message”: “The specifed resource name contains invalid characters.\r\nclientRequestId: 445f090f-cfd0-4249-9f81-8ab89bbc190d”,
    “source”: “azureblob-ne.azconn-ne.p.azurewebsites.net”
    }

    June 24, 2019 at 9:57 am Reply
  • Juan Slabbert

    Tomasz,

    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.

    Thanx

    June 24, 2019 at 11:52 am Reply
  • Jackie

    Hi Tomasz,
    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?

    Thank you

    July 2, 2019 at 3:29 am Reply
    • Tomasz Poszytek

      That is because it is a name of my Flow 🙂 If you name your Flow using the same name, it will work.

      July 2, 2019 at 6:09 am Reply
  • Ashish Karanjavkar

    Hi Poszytek,

    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?

    September 11, 2019 at 5:24 pm Reply
    • Tomasz Poszytek

      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.

      September 11, 2019 at 7:33 pm Reply

Post a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.