This is indeed my first blog in powerapps and guess what – one of the topics which I think is required for so many real time requirements as well as an interesting one.
First of all, we all know that a multi-line of text field can be rendered as a pen input control and it can be easily rendered as a signature control. Unfortunately its not so easy if you plan to save some customer signature as a base64 string in multiline text field. In this entire blog I am assuming you know how to build a canvas app using power apps and also is familiar with the pen control.
So lets start with the problem first. If you try to save the pen input image directly in the description field of the power apps, it won’t save as base64 of the image. It would render as //blobmanager/526…..
I am not rendering the whole content but its kind of no use.
What is the other option. The other option I tried out is to map this image to the default image field of the entity to see if it directly matches. Surprisingly not even that works.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
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.
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)