How to Save Signature from Pen Control in Canvas App to Dynamics 365 text field

11 Comments / By Debajit Dutta (Former 6x Business Solutions MVP, MCT) / March 16, 2019 November 13, 2020

Follow Debajit’s Power Apps & Dynamics 365 Blog on WordPress.com

This content has been update with the introduction of new capabilities in Canvas Apps. Please follow this link for updated content.

Debajit Dutta
Business Solutions MVP

11 thoughts on “How to Save Signature from Pen Control in Canvas App to Dynamics 365 text field”

kartikrocks
May 17, 2019 at 7:34 am

Hi Debajit,
Thanks for this wonderful trick. I got the string but when i load that base64 string with our dynamics 364 pen control, the image of signature is not loading correctly and it is just showing blank. Any idea? Even i tried with online base 64 to image converter but image is not showing correctly.
Thanks
1. Debajit
  May 17, 2019 at 7:55 am
  
  Hi Kartik
  thanks for your comments. in your saved string is it starting with data:image/png;base64, ?
  1. kartikrocks
    May 17, 2019 at 8:14 am
    
    Thanks for your quick response. yeah i have started it with data:image/png;base64,
kartikrocks
May 17, 2019 at 8:19 am

My Sample output is as below. sorry for pasting it too long text but i dont have option to attached the output.
data:image/png;base64,TFMxa05qUXdNamMxWVMwd01EZ3lMVFJtTlRVdE9USXdZaTFsTlRsaU5EUXlOemRtWW1FTkNrTnZiblJsYm5RdFJHbHpjRzl6YVhScGIyNDZJR1p2Y20wdFpHRjBZVHNnYm1GdFpUMGlabWxzWlNJN0lHWnBiR1Z1WVcxbFBTSm1hV3hsWHpaa1lXSTBZV0ZtTFRJeE0yTXROR0l6TWkwNE56TTFMVGxsTW1KalltSmlaRFJrTnk1d2JtY2lEUXBEYjI1MFpXNTBMVlI1Y0dVNklHbHRZV2RsTDNCdVp3MEtEUXFKVUU1SERRb2FDZ0FBQUExSlNFUlNBQUFCandBQUFUQUlCZ0FBQUU4Ry9VY0FBQWtiU1VSQlZIaWM3ZDI3cXlSWkhRZnczeDloYUdoa0lxSzVnaUFZaUtCaVlHQzJHSWlCSmdvN0prYXVHNGlDSWhxSUlMNFF4STBNQkhIQkIrajZRSFl4RUZkWFprZkIyWEZtMWxudVkvb2EzT2s3cDd0UFBVNVAzenFudWo0ZktKaTV4ZHorM1R2VjlldHZuYXB6SW1CYW40bUlWYkk5VTdjY0FPYmdJdGxXbFdzQllBWXV0amFwQTRCZXE1QTZBQ2l3M1Rpa0RnQjZuY2R1NDVBNkFPaTEzVGlrRGdCNjVTNVhYVlN0Q0lDbW5jYm1aYXIxbjg5cUZnVkEyN2JIT0tRT0FIcWx6U0lkTURkUURrQ250RmxJSFFBTTJoNFlsem9BNlBVd0hqZUxoMXQvZjdsaVhRQTByQ3QxdUdRRlFGWTZ0dkhsaUhnK05sTUlBR3pJM1ZGbG9CeUFYcm5MVXdiS0FlaVVlM3BjNmdDZzB5dVJUeGdHeWdIb2xHc1NaN0diUkFBZ0luYWY2Vmh6eVFxQVRsMlhwZ3lVQTVDVnBvdVRqcThEd0FhcEE0QWlhYnE0blh3OUhRUDVhNFc2QUdoWVY3cHdleTRBV1ducStGM3k5WFI2a3ZNS2RRSFFNS2tEZ0NKcDZ2aDQ4dldUNU90bXp3VmdnOVFCUUpHdTV6ZStIVzdQQmFCRFY0UHdVQ0FBV1gwTlF1b0FJRXZxQUtDSTFBRkFNYWtEZ0NKU0J3REZ4cVNPajB4ZEZBRHRram9BS05iVklOSnAxKzlPWFJRQTdScVRPZ3lVQTNEbFJuU25qblRhOWJPSjZ3S2dZVklIQUVWZWpPN1VjWnJzTSswNkFGZWtEZ0NLL0RlNlUwZWFTS1FPQUs3MEpRdFRrUUN3WTJnWldROEZBckJENmdDZ3lGbElIUUFVa2pvQUtDSjFBRkJNNmdDZ1NEcFBsZFFCd0NoOXFTT2RkdjNsS1lzQ29GMXBjempQN0RjVkNRQTd4cVlPMDY0REVCR2JBK0dubWYxU0J3QTcrcHBEZXV0dTduSVdBQXVVcG81Ym1mMVNCd0E3K202L3ZaM3NOKzA2QUJFeC9OQ2Zod0lCMk5HWE9wNGYyQS9BQWtrZEFCVHJTeFd2RCt3SFlJR0dVb1U3ckFEWThNZm9UeFZEVTdJRHNFQlNCd0JGVHFNL2RReE55UTdBQWcybENxa0RnQTFEcVdKb1NuWUFGa2pxQUtESVVLcXdYZ2NBTzZRT0FJb01wWXIwMXQwN0U5WUZRTVBHcGc3VGtBQVFFWnVwNHNIQS91OU1XQmNBRFJ0S0ZWSUhBQnZTVkhGallEOEFSSVRVQVVBaEN6MEJVRXpxQUtDSTFBRkFrV2VqUDFWOGVtQS9BQXNrZFFCUTVJM29UeFczQnZZRHNFQW1Qd1NneUZuMEwvUjBPckFmZ0FXU09nQW9razY1bmtzVlE4dlBBckJBVWdjQVJVcVdsNVU2QUlnSXFRT0FRdWtEZnllWi9VUEx6d0t3UUdNblA1UTZBSWlJemRUeDY0SDlweFBXQlVERHBBNEFpcFJNZnZqU1ZFVUIwRFlMUFFGUXBDUjFQRFZWVVFDMDZ4MGhkUUJReUVKUEFCUzVGMUlIQUlXR2JyMlZPb0NjTjBYRWc3aDgzdXVOdUZ4UjlHWkV2QkFSNzY1WEZsTVlXdWdwUXVvQWR2MGlOajk0Ym04L3FGY2FVNUE2Z0JMUHhlWjVZUlVSZjQrSUgwZkVNNCsyRDlZcWptbU1XY2hKNmdBaUluNFNtMDNqSWk3SFMxa2dxUU1ZNDZleGViNDRpNGhQVksySWFvWVdlb3FRT29EZHh2SEp1dVZRbTlRQjlQbFNiRjdhZGk1Z2NFcjFUNFhVQVV2MElMcnZuZ0twQTdpU0d3aFB0My9WSzQyV3BBZkpuekw3L3hCU0J4eTdwMk56M0RQZEhrYkVQK3FWUnFzczlBVEwxTmN3TGlMaWJyM1NhTjNRNWFqWFF1cUFZOU4zU1dvVkVkK29WeHB6SVhYQWNyd1NHZ1lITUpRNlRwUDlYVStiQS9Pd25UWTBEUFpTc3RDVDFBSHpkVDkyazhiVFZTdGkxb1pTeDVpWmRZRzJiVGVOazdybE1IZDNRK3FBWTNZU0h1ampHZ3dkVUdObTFnWGFjeU4ybTRaWmJqbUlrb1dlOXYyMGN2N29lMjl2Nzkzeis3RWNKNUUvZHRZYjNiYWYxM0JyUFFmejVoaHVET2tCT09iTit1ZTRQRWo3N2h0UE53MkUxUHRqL0xIanBKaVh1MFRsYVhBTzZwY3gzRHpHcEk3WG91ek5yb0dRT29ueWhxR0o3TG9YZmlkTTVGM3grRTJiU3hWajF2UFlubzU1KzhBZCsrL2V0OWRQd0J4OU9NWTFpNkdrKzN6UHYvMzNkUlRlcUp1Ui94MThyR1pSTEZ2SkphMzFtLzJiQmQ5L3U0RjhZTzlLbVlPK09aUFdIemIybloxMXFCa2Q0eTJwdjQzOHovcTlta1hCNStQeHdYaVcyYi85WnYzcW5xOWpJWm5qMTNkaVAvU2c5OUFjVGNmZ1c1SC8rWDVmc3loWTYzdG9jUHNOK3FRMGtPUFVkU0tmNGk2cHR6emFuc3E4L2x5YnlJY2kvL3Q4dFdaUnNLM3JqWGJveHJHMmZVbURlYm9UM1ovNlg2cFlWNjZSL2ExaVBhVnk5ZCt2V2hGMHlIMUt2TzVQYitrYlpLNmZEcGVxYXp5anRmL0gzRW00NWVkRmN2VWU0L2dOUnlJOUVheE5kVUxRUU9hbDY5SlV5LzkzdDZKN1hPVDFpblZGUlB3ejZsN3VneWVTSHJEYnozQk1jVkxRUU5yMmxlZyt3YzNwVS9IdDZCOWNmMkdDR2o0WHczZUtlUTh3RytsQlcrdVRqMDljN2NrOXVidytUcjVXc2E1RFNLZnA2VHVKcitMeWVMd2ZFYitLaUxmdThWcjNZMXpEK00zZVB3MVUwUFVteXQydWU5M1MxLzloaGRmbjBod3ZUVDJKUXozdHZtNDA1eU8rNXlvaS9qZkZEd2ZYSlhkZ2Y3MkJlbzcxUk5XeXBWOTdmeTRlbi9nUDBWQnlEZVBaeVg0YXVFYTUxRkZiK3FhVlBxYlJkYUs4VTdPb2h2MHNMbjgzUTQxbUZaZUQ5WEIwV21zY2E5TEhOSEludlZWRWZMWm1VVURiMHRUUjJrbGErcmhlWFUwRFlGRHJKNDNXNjVzalRRTjRJdXZVMGZLSlEvbzRqUGVFcGdFY3lQcVd3dFk1MGUzdnU2RnBBQXNsZlpSN01aYjFqQVpBbHBQZk9QOEpUUVBnU3BvK1BscTVsaFk5Q0UwRElNc0pjVmZYV3ZKekdNc0NtRVRmS29kTDA3V09ocVlCa0xIMDlMSDBlYWNBOXJMRTlQRnFITWM2R2dEVnZEMldrejc2bG5qOVM4VzZBR2FweFVrY0QrV2RzYngxTkFBbWNTK083MXAvMTExVEYxRm5RUzZBbzNRczZVUEtBSmhRT2g1d1dybVdVamZEWFZNQTFjd3RmUmdBQjJqQUhOTEgyOEtsS1lEbXRKbytESUFETkN4TkgrZVZhNG1RTWdCbW8vWkoyZ0E0d0F6OVBIWlAybCs0aHRmNWZsdzJnNjVHWVFBY1lJYTZsbHY5WXVIMytWR01heEl1VFFFY2lhN2JZUSs5cldJK2E4QURNTkpwbENjSFRRS0FLK3RHTW1iVEpBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQTRxUDhEeG1NTERsaThsalFBQUFBQVNVVk9SSzVDWUlJTkNpMHRaRFkwTURJM05XRXRNREE0TWkwMFpqVTFMVGt5TUdJdFpUVTVZalEwTWpjM1ptSmhMUzBOQ2c9PQ==
1. Debajit
  May 17, 2019 at 12:45 pm
  
  Hi Kartik, thanks I will get back to you on this.
  1. kartikrocks
    May 20, 2019 at 7:40 am
    
    Hi Debajit,
    Did you find any way for this?
    1. Debajit
      May 20, 2019 at 9:15 am
      
      Hi Kartik I will try this once I have some time today!
kartikrocks
May 20, 2019 at 10:28 am

Thanks Debajit. your help is appreciated.
1. Debajit
  May 21, 2019 at 9:13 am
  
  Hi Kartik
  I have updated my post. Please check for it. specifically changes are there while setting the content variable in flow and the Open API sample JSON for the input parameter “content”. Canvas apps seems to send this as double base64Encoded which is the issue now.
Swetha Adappa
March 24, 2020 at 5:13 am

If the objective is to save the Pen control image to Notes entity in CRM, the below solution will work.
Firstly, save the pen image in JSON format while including the binary data
Set(PenVar,JSON( Signature.Image,JSONFormat.IncludeBinaryData)); // Signature is the name of the Pen Control
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. Debajit
  March 24, 2020 at 5:23 am
  
  Yep Swetha..That’s available now. When I wrote this one, unfortunately that API was not there.

Comments are closed.

Related

11 thoughts on “How to Save Signature from Pen Control in Canvas App to Dynamics 365 text field”