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.
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.
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.
In the flows, since I would be posting the contents from my canvas app to the flow, I start with Request connector.
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.
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
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
The next stuff that I need to do is pass the get the record id from the request and assign it to a variable
Above I assign the variable “RecordId” to the expression –
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.
And then our holy grail field, the description.
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
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.
There are multiple options you get to create a connector but what we will do here is use the option = “Import an OpenAPI file”.
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.
If you see the URL properly, then there are four parameters in the query
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 –
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.
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.
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
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.
Search for your custom connector. It would appear. Select and Add.
And finally wiring up the event
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.
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.
Hope this helps!
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)