{Solved} Save Customer signature from a canvas app in Dynamics 365 Multiline Text field

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.

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.

image

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”

expression.

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.

image

And here is the expression to set it.

concat(‘data:image/png;base64,’,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)

Advertisements

OPEN API sample JSON

This post is being referred from: https://debajmecrm.com/2019/03/16/solved-save-customer-signature-from-a-canvas-app-in-dynamics-365-multiline-text-field/

The explanation of the highlighted parts of is explained in the parent link.

{
  "swagger": "2.0",
  "info": {
    "description": "API to save signature as base64",
    "version": "1.0.0",
    "title": "SignatureDemo",
    "termsOfService": "
https://prod-82.westus.logic.azure.com/terms-of-service",
    "contact": {
      "name": "Debajit Dutta",
      "url": "
http://www.xrmforyou.com",
      "email": "debajit.dutta@xrmforyou.com"
    }
  },
  "host": "prod-82.westus.logic.azure.com:443",
  "basePath": "/workflows",
  "schemes": [
    "https"
  ],
  "consumes": [],
  "produces": [],
  "paths": {
    "/bff4ca2dbe0049f7bf5474b54710b96b/triggers/manual/paths/invoke": {
      "post": {
        "summary": "Save signature to Dynamics 365",
         "operationId": "SendSignatureToFlow",
        "produces": [
          "application/json"
        ],
        "responses": {
          "202": {
            "description": "Accepted"
           }
        },
        "parameters": [
          {
            "name": "content-type",
            "in": "header",
            "description": "",
            "type": "string",
            "required": true
          },
          {
            "name": "api-version",
            "in": "query",
            "type": "string",
            "default": "2016-06-01",
            "description": "",
            "required": true,
            "x-ms-visibility": "internal"
          },
          {
            "name": "sp",
            "in": "query",
            "type": "string",
             "default": "/triggers/manual/run",
            "description": "",
            "required": true,
            "x-ms-visibility": "internal"
          },
          {
            "name": "sv",
            "in": "query",
            "type": "string",
             "default": "1.0",
            "description": "",
             "required": true,
            "x-ms-visibility": "internal"
          },
          {
            "name": "sig",
             "in": "query",
            "type": "string",
            "default": "bVg0NQ9QteaQFQehWqkDmjiz8vQNSZUHMFUwWaEQ2QE",
            "description": "",
            "required": true,
            "x-ms-visibility": "internal"
          },
          {
            "name": "recordid",
            "in": "query",
            "type": "string",
            "description": "",
            "required": true
          },
          {
            "name": "file",
             "in": "formData",

            "type": "file",
             "description": "Signature to upload.",
            "required": true
          }
        ]
      }
    }
  },
  "definitions": {},
  "parameters": {},
  "responses": {},
  "securityDefinitions": {},
  "security": [],
  "tags": []
}

Hacking your way to Execute a CRM workflow programmatically from anywhere in Dynamics 365 portals

Before I even proceed further, couple of things. You might be thinking calling On-Demand workflows can be so sweetly done from entity list and entity forms just using configuration. Then why the hell  we need to hack?

Well I am aware of that wonderful feature but this post is not about that. You can call an on-demand workflow from entity form and entity list but again, we need an entity form or list right?

What if your customer has spun up some custom buttons on the fly using script and click of the buttons they want to perform some server side operations? What if the area may be an entity form or entity list and just some other area of the portal like a registration page or something like that?

Well my customer had a similar sort of requirement. And sometimes no matter how much you try, you may need to give in to the customer demands.

Please understand that I have hacked around the platform code a bit to get this working. It may continue working in the future or may stop if some changes in the platform and I have put a caveat for my customer already. However if you are in dire straits like me, may be you can do this but make sure you put a caveat to your customer.

I guess half of the readers have left after those big red comments. However if you are still reading, may be you would like to continue till the end.

So I created a workflow for account entity which does something mundane – “Create a Task record”.

image

Now I want to call this workflow from anywhere and not just an entity list record or entity form. Well if that the case below the code to execute this workflow. I have put it inside the function executeCustomWorkflow which you can call from anywhere in portals and it just works.

function executeCustomWorkflow() {
    debugger;
    var u = "/_services/execute-workflow/7b138792-1090-45b6-9241-8f8d96d8c372"; // execute workflow request url

    var params = {};
    var workflow = {};

    workflow.LogicalName = "workflow";
    workflow.Id = "43459d81-1cfe-4465-b9ed-e756d00adb69"; // guid of the workflow you wish to execute. This will be consistent across your environments

    var data = {};
    data.LogicalName = "account";
    data.Id = "b5233ccc-8540-e911-a837-000d3a11e59b"; // guid of the account record.

    params.workflow = workflow;
    params.entity = data;

    var jData = JSON.stringify(params);

    // calling the platform method. bascially you can do your own promise and invoke the execute workflow url.
    shell.ajaxSafePost({  
        type: "POST",
         contentType: "application/json",
        url: u,
        data: jData
    }).done(function (r) {
        debugger;
         }).fail(function (n) {
            debugger;
    });
}

I have put appropriate comments wherever required so that you can understand it. Now this function can be bound to button click or any other event and it will work.

But as I always try, I would not leave you in the dark. You may be wondering, how did I get the Workflow execute request URL? If you configure a workflow button for entity form and see it’s HTML, you will find the URL right up there in the mark-up.

image

What power does it give you then? Well it opens up loads of things and also addresses the perennial problem of performing CRUD operations from custom buttons from anywhere in the portal on-demand.

All you end is an entity on which the workflow would be called. And you can spin up just a dummy entity for invocation purpose and do the rest in workflow.

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)