PowerApps Pen Input – Have issues? Problem solved! (Sharepoint and Dataverse)

Controls, PowerApps 2 Minutes

PowerApps Pen Input

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.

  1. Pen Input 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)
  2. Pen input to Microsoft Flow through a 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)
  3. Pen Input saved using Azure Blog Store: https://poszytek.eu/en/microsoft-en/office-365-en/flow-en/powerapps-hand-written-signature/

The new easy and multi-purpose solution

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.

Save Pen Input to CDS as Entity Image

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.

PowerApps Pen Input

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

Published by Jensk

My focus and personal jet fuel are Process Improvement and -innovation to build bridge between people, processes, businesses, and systems.

Published

14 thoughts on “PowerApps Pen Input – Have issues? Problem solved! (Sharepoint and Dataverse)”

  2. Thanks for this.
    I was trying to use “Add Picture” to get image and save the 64 bit in sharepoint as multiple lines of text and retrieve it from Sharepoint to PowerApp – without using Flow.
    I didn’t use the Flow finally. This is what I did (added all in one under a single button):
    =============

    Set( PenVar, JSON( UploadedImage1.Image,JSONFormat.IncludeBinaryData ) );
    Set( PenInput64Bit, Mid(PenVar, 2 ,Len(PenVar) – 2 ));
    Patch(ImageSaving,{Title: TextInput1.Text, ImageData: PenInput64Bit})

    =============
    ImageSaving is the name of my sharepoint list.
    I just changed “24” to “2” to just get rid of the ” at the beginning and end. It worked like a charm.
    Thanks a lot…

    Reply

    1. I have saved the Image (pen input) to the sharepoint list my problem now is displaying it…Kindly help NIZAM

      Reply

  3. Hey gues thanks for all your post and suggestions,

    but why should we use Flow when we just could store the Binary64 string in any datasource. For my project I store the string in SharePoint Online and use it inside my PowerApps with the normal call on the items.

    This code worked for me

    Set( PenVar; JSON( PenInput2.Image;JSONFormat.IncludeBinaryData ) )
    Set( PenInput64Bit; Mid(PenVar;24;Len(PenVar) – 24 ) )

    Set the Image.Image to ->

    Concatenate(“data:image;application/octet-stream;base64,”;PenInput64Bit)

    Reply

    2. Hi Denis

      I saved the PenInput64Bit to a multiline field in my SharePoint list. How do I now display this value for a record in my PowerApp without using a Flow? Thanks

      Reply

  4. Hi,

    My requirement was to save the Signature from the Pen control to D365 Notes entity. To achieve this, I modified this solution to upload the Pen control image to D365 Notes entity. Here’s the solution:

    Firstly, save the pen image in JSON format while including the binary data
    Set(PenVar,JSON(Signature.Image,JSONFormat.IncludeBinaryData)); // Where Signature is the PenControl name.

    Next, strip the JSON data while leaving the 64-bit image
    Set(PenInput64Bit,Mid(PenVar,24,Len(PenVar)- 24));

    Save the note to the CRM notes entity
    Patch(Notes,Defaults(Notes),subject:Title.Text,filename:”Signature.jpg”,isdocument:true,documentbody:PenInput64Bit});

    Reply
  5. Pingback: Fun with Power Apps! - Joseph C. Markovich

Leave a Reply