How to save signature from Pen Input control to file data type in CDS

Quite sometime back I wrote a post on how we can save signature from a Pen input control and store it inside multi-line of text field in CDS. Back then it was quite complex but with the introduction of JSON function in canvas apps, things got a whole lot easier.

In this blog, I am going to discuss the same functionality but with a slight twist. I am going to touch base on the below requirements.

• How to save data from Pen input control in canvas app to a file field in CDS.
• How to store the base64 content from Pen input control in canvas app and store it in a multi-line text field in CDS?

Let’s start with our main agenda here. And that is storing the content of Pen Input control inside a file data type CDS.

For this demo I have used a Contact edit form and inside the contact edit form I have a field – “Contact Signature” to store the signature of the contact. But instead of storing the content inside a text field, customer want it to be stored as a file. Contact signature field is a file data type in CDS which is quite obvious as well from the screenshot below.

I unlock the data card and then I hide the Contact Signature data card. Instead I show a Pen Input control to capture the contact signature.

Quite simple. Now the hard part. How do I set the convert the content of the Pen Input control in a file and set it in the Contact Signature file data type of CDS. It’s quite simple actually.

In the Contact Signature data card, I select the Attachment control. Your control name may be different (like DataCardValue6). I have renamed it here to AttachmentControl.

Next we will modify the code when this contact form is submitted. For that, select the submit form tick icon. As of now it is just submitting the form.

Now here comes two options. The first option is to save the content inside a multi-line of text field in CDS and then displaying the multiline of text control as Pen control in Model driven apps. And the second one is store the content inside the file data type. We are going to do both of this together.

Before we change anything in PowerApps, we will create a very simple flow.

I have used “Upload file or image content” action of CDS and for the Item ID and Content fields I have used the “Ask In PowerApps” option. But wait, the content field has a bit of trick in it.

base64ToBinary(replace(triggerBody()['Uploadfileorimagecontent_Content'],'data:image/png;base64,',''))

What am I doing here? I am converting the base64 content to binary before I upload it in the file data type. But before I do that, I need to churn out the non-base64 content and hence this expression.

All set and done. It’s now time to add this Power Automate action to my canvas app. And once I do that, below is the complete code.

I have created a local variable – content. Observe how I am setting the value for content. When we use the JSON function, entire content is inside the double quotes (“). And here in lies the first hurdle. You may spend hours before eventually finding it out. So before we go ahead, we need to remove the double quotes within which the content is enclosed.

To save the base64 in the description, we can set the content variable to the Default field of the description field. And then invoke the Power Automate flow UploadContent.Run.

Hope this helped!

You may also like the below posts.

Debajit Dutta
Business Solutions MVP