In today’s blogpost, we will show you how to upload a signature or pen input from Canvas App to Dynamics 365 as an attachment on a particular entity record.

Depending on the type of business, it can be common for field employees to use pen input to capture something quickly and store it as Attachment for a specific record in Dynamics 365. For example: we might have a Canvas App to allow an end user to capture signature quickly on the Phone; then automatically attach those as Attachments for a Case Entity.

Using PowerApps, we created a simple app to display a list of the Case Entity the user owns on a “Case List” Screen; then create another “Signature” Screen that will capture the signature of the case. Case Entity is specific to Dynamics 365 Customer Service, but this method is applicable to other entities in Dynamics 365 or Data Flex Pro (Common Data Service)

Add Draw icon in the CaseGallery to navigate to Signature Capture Screen.

OnSelect of DrawIcon, write function as below:

Select(Parent);Navigate([@Signature]) 

To create an attachment for a record in Dynamics 365/Data Flex Pro, we need to create a Note (annotation) record with Regarding set as selected Case from the Case Gallery. Make sure we add Notes entity to the Canvas app.

The “Signature” Screen used to capture signature includes a few main components, as shown below:

• TitleTextInput – Text Input control
• DescriptionTextInput – Text Input control
• CancelButton – Button control
• SaveButton – Button control
• PenInput1 – Pen input control

OnSelect of SaveButton, write a Patch function as below:

Set(penVar,Substitute(Substitute(JSON(PenInput1.Image,JSONFormat.IncludeBinaryData),"data:image/png;base64,",""),"""","")); 

Patch(Notes,Defaults(Notes),{Title:TitleTextInput.Text,Description:DescriptionTextInput.Text,'File Name':"signature.png",Document:penVar,'Is Document':'Is Document (Notes)'.Yes,Regarding:CaseGallery.Selected}) 

 Note: With Pen input control, if we try to paste the Image value of Pen Input directly as PenInput1.Image, we can only see a blob URL location instead of the image content itself. So, we need to use the JSON function to include binary data. Like uploading a Photo to Dynamics 365/ Data Flex Pro, to create attachments in Dynamics 365 or Data Flex Pro, we have to pass the document body in base64 string. After using JSON to format the value of Pen Input control, we need to get rid of double quote from JSON string converter and the prefix “data:image/png;base64,”

SHOWTIME

You can test this On Browser or On PowerApps App in your Phone. Select a case by tap on Draw icon of a case on Gallery. Then fill in some information on Title and Description of the Note and sign in the Pen Input section. Finally, hit Save.

The photo of Signature should be created as a new Note of the Case and show in the Timeline. We can download the file and open for viewing.

CONCLUSION

There are several ways to get value from Pen Input Control of Canvas App to Dynamics 365/Data Flex Pro as attachment. This is one of the direct ways that can handle inside PowerApps with native Common Data Service connector.

Don't forget to subscribe to our blog for more helpful tips!

As always, happy PowerApps’ing!!