{Solved} Save Customer Signature from Pen Control in Canvas App to Dynamics 365 text field

One more customer requirement and one more blog on powerapps. And this time a really common requirement. What if you want to store customer signature in Dynamics 365 record.

For example – Imagine a product ordered online making its journey from an inventory to the hands of a customer. You can perceive how many approval signature it may require before the end consumer finally signs this off as received. What if you are needed to store all the signatures in a single record? An obvious solution comes is we will store the base64 encoding of the image in multi-line text field. And we can have multiple multi-line textbox to store signatures from various approvers.

While the solution is easy, like in many cases the implementation is not. And the primary reason is because of the format of the image of which Pen Input control provides, which is used to capture signature in Canvas app.

Lets start with the problem first. If you check for the PenInput.Image property, you would find that it gives the result in this format – “appres://blobmanager/bfd46aab08b948de948102838e58e3c8/20”

The numbers will be randomized but this is the format and as you understand it’s of no use to us.

What is the other option. Say you have just one signature to store and you plan to map it directly to the image field of the record, it won’t work as well. If you do that, you would not get any error. But it would always render a black content, something like below. Also it’s not an option since there is only one image field you can create for an entity and hence can’t store multiple signatures.

image

So I started digging and digging and more digging. Finally came up with a solution which would be perfect fit for our beloved D365.

Step : 1 Build the Power App screen to capture signature.

Well I am leaving it to the fact that you already know to build a canvas app. And considering you know this, this is what the edit screen would look like mostly. You may have many controls. I have kept it to one. Also I will take the update scenario because doing this I can show you how to pass the record id as well. We will get to it later.

image

Step 2: Build a Microsoft flow

What i realized is to do this, I need to connect my canvas app with a flow and  then post the content of the app to the flow. Here I basically need to pass two parameters to the flow

  • The Image content of the Pen control or the customer signature
  • Guid of the record to be updated.
  • Any other fields that you want to update.

For me, since I have no other fields on the form, it is just the first two parameters.

I go to my canvas app and then select flows.

image

In the flows, since I would be posting the contents from my canvas app to the flow, I start with Request connector.

image

image

I am assuming canvas app is sending the content of the image in body and then may be the record id as query parameter.

So I need to take them in two separate variables in the Flow. So the next I use the Initialize Variable condition.

Below shows setting the variable “Content” to the image content sent from Power Apps.

Capture

Basically I am taking the body content from the HttpRequest and assigning it to the local parameter “Content”. Since I am parsing the body, hence in the expression I have used

“triggerBody().$content”

Also note that I have used decodeBase64 function. The  reason for that and is then the content body comes over from the HTTPTrigger, it seems to be double encoded base64 string. However when we need to put in CRM, we need just single encoding of the binary to base64. Found it the hard way though :). Making sure it’s not hard for you.

My final expression for content

“decodeBase64(triggerBody().$content)”

The next stuff that I need to do is pass the get the record id from the request and assign it to a variable

image

Above I assign the variable “RecordId” to the expression –

triggerOutputs().queries.recordid

All this may sound too over the top but believe me it will all make more sense once we bring all the pieces together. As of now just understand that the canvas app passed the signature and recorid and you just took back in the flow for further processing.

And the final step is use the Dynamics 365 update action to update the record. Here I have taken the account entity and I am going to save the signature from the canvas app to the description field of the account which is multi-line.

I set the Record Id to be updated.

image

And then our holy grail field, the description.

Capture1

And here is the expression to set it. Notice the use of replace function to replace double quotes. This is because sometimes the content may come up with leading and trailing double quotes

concat('data:image/png;base64,', replace(variables('Content'),'"',''))

All set and done. The next step is to connect the connector to connect the canvas app to the flow.

Step 3: Build a Connector

Well this I found really hard to do. And my whole intention is that you don’t face obstacles like I faced. The connector will basically be used to connect the canvas app to the Microsoft flow.

I go ahead and create a custom connector. Follow the screenshots below.

image

image

There are multiple options you get to create a connector but what we will do here is use the option = “Import an OpenAPI file”.

image

But wait, where do I have the file. I need to create an OpenAPI file right.

If you remember correctly, the first flow step was a HTTP step and it expects a certain protocol when it is being invoked. So why not get the URL that the HTTP is expecting. If we re-open our Microsoft flow then copy the request URL, then it would be something like this.

image

https://prod-82.westus.logic.azure.com:443/workflows/bff4ca2dbe0049f7bf5474b54710b96b/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=bVg0NQ9QteaQFQehWqkDmjiz8vQNSZUHMFUwWaEQ2QE

If you see the URL properly, then there are four parameters in the query

  • api-version
  • sv
  • sig
  • sp

So our open API schema should take mention of these four parameters. But how does we create the OPEN API file.

If you search the internet you will get a website link to do the same –

“http://specgen.apistudio.io”.

It’s indeed a wonderful website where if you put the URL it would get everything working for you (not everything but well almost).

Well I was not that lucky though. For entire 2 days or so, the site seemed to be down.

image

It was nightmare to learn and search and put everything up. But somehow I managed. To keep this post short, here is the JSON file content which I uploaded as a separate link.

https://debajmecrm.com/2019/03/16/open-api-sample-json/

Some important parameters which I have highlighted and explained below.

  • title : This is the name with which the connector appears in the canvas app.
  • operationId: the name of the function which will be invoked from canvas app.
  • api-version, sp, sig and sv which are basically the query string parameters and the values you need to take from your URL which I have explained earlier. If you observe carefully, there is one attribute “x-ms-visibility”: “internal which basically specifies that the canvas app does not need to pass this value when invoking the flow. It would be set internally.
  • Couple of more parameters – recordid and file which needs to be passed from canvas app. The file is of type formData which is basically a internal data type to support file content.

I hope I was able to explain most of the stuffs. After replacing the URLs and the parameters with the values from your environment, save it and upload the JSON file.

And finally create the connector

image

All set and done. Now the next step is to set-up this connector in  canvas apps.

Step 4: Set the connector up in canvas app.

Select your canvas app screen where you have put the pen control and then select new Data source.

image

Search for your custom connector. It would appear. Select and Add.

image

And finally wiring up the event

image

As you can see I am passing the record id through BrowseGallery1.Selected.Account. You may need to pass the recordid in some other way depending on how you arrived at the screen. I am passing “application/json” as the content-type parameter.

And now once you run your canvas app and then check your CRM, you see this in your description field.

image

Nirvana! And guess what, feels wonderful to put a smile on the face of the customer. And before I wind up, you might be wondering how did I come to the correct expressions while setting the variables Content and RecordId.

Once I execute the flow from PowerApps, below the output body I got.

image

Hope this helps!

Debajit Dutta

(Dynamics MVP)

For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com

Our product offerings:

Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)

CRM-Sharepoint Attachment uploader and metadata manager (http://www.xrmforyou.com/sharepoint-integrator.html)

Record Cloner for Dynamics 365 (http://www.xrmforyou.com/record-cloner.html)

Multiselect picklist for Dynamics 365 (http://www.xrmforyou.com/multi-select-picklist.html)

Author: Debajit

I am a Dynamics CRM Most Valuable Professional (MVP) with 12 years of experience in Microsoft .NET Technologies and 9 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of XrmForYou.com with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through XrmForYou.com Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under XrmForYou.com For consulting/ training, drop me a note at info@xrmforyou.com or visit our website www.xrmforyou.com

9 thoughts on “{Solved} Save Customer Signature from Pen Control in Canvas App to Dynamics 365 text field

  1. 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

  2. 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. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s