·

,

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

screenshot 75 e1570882294149

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.


Discover more from Jens Kofod

Subscribe to get the latest posts sent to your email.


// about the author

Jens Kofod, Senior Solution Engineer at Microsoft Denmark

Jens Kofod

Senior Solution Engineer at Microsoft Denmark. Writes about Power Platform, Copilot Studio, and Dynamics 365. About → · LinkedIn ↗

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

  1. Sneh Swaroop Avatar
    Sneh Swaroop

    It didn’t work for me for “Add picture” control. Any idea ?

    1. Jensk Avatar

      See comment from NiZAM 🙂

  2. Nizam Avatar
    Nizam

    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…

    1. Steven Gee Avatar
      Steven Gee

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

      1. Jensk Avatar

        You need to save The image as a file and add The file URL as a picture column in your sharepoint list… see here how to get started https://blog.mydock365.com/how-to-save-signatures-from-powerapp-to-sharepoint-lists

      2. yoshimitsu411 Avatar
        yoshimitsu411

        Hi Steven, did you figure this out without using a Flow?

  3. Denis Avatar
    Denis

    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)

    1. Nadeem Usmani Avatar
      Nadeem Usmani

      Thanks, this is exactly what I was looking for!

    2. yoshimitsu411 Avatar
      yoshimitsu411

      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

  4. Swetha Adappa Avatar
    Swetha Adappa

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

    1. Jensk Avatar

      Nicely done.. will try this tonight

  5. […] and a response from Jens Kofod, there was a forum thread that kept coming up in my searches about converting and saving the pen input. So, I tried it, messed around with the code and IT […]

  6. Wik Avatar
    Wik

    Saved my bacon….Thanks!!!

    1. Jensk Avatar

      your welcome to send some bacon my way… .are not all the way to plant based diet yet 🙂

Leave a Reply

Discover more from Jens Kofod

Subscribe now to keep reading and get access to the full archive.

Continue reading

Discover more from Jens Kofod

Subscribe now to keep reading and get access to the full archive.

Continue reading