Canvas-Apps for Approvals in Dynamics 365-CE

There are scenarios where we need to configure approvals in Dynamics 365, for example, mark an account as a premium customer after approval or qualify leads after approval etc. We used dialog control to capture approval request and comments but, now dialog controls are depreciated and not advised for use in new projects.

As per Microsoft’s initial announcement

Dialogs are deprecated and are replaced by mobile task flows (available as of the December 2016 update), and business process flows. Both task flows and business process flows will continue to evolve to make the transition easier.

But either tasks flow or business process flow was not a perfect replacement for Dialog. Knowing this pain from users, Microsoft has now modified the announcement.

Dialogs are deprecated, and should be replaced by business process flows or canvas apps

Even though I knew canvas apps can be now embedded in model-driven apps, I hadn’t thought of this option until I came across this new announcement, so tried replicating my approval dialogs with a canvas app and it works fine. Pheww!!!! 🙂

For testing purpose I replicated the dialog for creating approval request for Account entity.

  1. created a canvas app to create approval request.
This sample app changes account status to pending verification and captures the comments in one custom field.

2. Now we need to call this app from account form, obtain the app ID from app details section.

select app details to get the App GUID

3. I need to call this canvas app as a popup when user clicks a button. I created a custom button for account entity-> added a JavaScript as button action to call an HTML web-resource and embedded my canvas app in this html I-frame.

<html><head>
<title>Approval</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style="padding: 0px; font-family: arial; overflow-wrap: break-word;" onload="LoadPowerApp()">
<center>


<iframe id="Approval" width="800" height="600"></iframe>



</center>
<script id="myScript">
function LoadPowerApp()
{
var AccountID = window.parent.opener.Xrm.Page.data.entity.getId().slice(1, -1);
var url ="https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/56123673-f45c-4b96-b9e6-ece1b0a8069a&ID="+AccountID;
document.getElementById("Approval").src=url;
}
</script>


</body>
</html>

I know you have many questions now. "https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/56123673-f45c-4b96-b9e6-ece1b0a8069a&ID="+AccountID;

This is the key and I will breakdown it into parts “https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/APP GUID&CUSTOM PARAMETER NAME=”+PARAMETER VALUE

App GUID I explained in step 2, now regarding custom parameter, I deliberately didn’t mention it when we discussed the app creation and kept for this section. When we open this canvas from an account form(like we start a dialogue) the app needs the record GUID to update the account status

I have used form control in the canvas app and filtered the item using the ID Parameter.

4. Now try your button and you can see the magic.

You can download the sample APP from TDG Power Apps bank.

Please note this is a basic app I tried for testing purpose and needs many improvements to use in a live project. you are always welcome to discuss with on this app.

Hope this helps….. 🙂

WEB API- Part 6 : Create record

Create record using WEB API 

Following code shows how to create an Account record using WEB API and how to set different types of fields

function CreateAccount() {
 
    var serverURL = Xrm.Page.context.getClientUrl();
    var account = {};
    account["name"] = "New Account";
   
   
 //Set LookUp
    account["primarycontactid"] = {
        "firstname": "Sample",
        "lastname": "Contact"
    };// this will create new contact ,if you need to link an existing contact use the following
 //account["primarycontactid@odata.bind"]="/contacts(contactId)"; 
 
    //optionset
    account["companytype"] = 2;
    //two options
    account["donotemail"] = true;
    //number
    account["numberofemployees"] = 30;
 
    var req = new XMLHttpRequest();
    req.open("POST", serverURL + "/api/data/v8.0/accounts", true);
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.onreadystatechange = function() {
        if (this.readyState == 4 /* complete */ ) {
            req.onreadystatechange = null;
            if (this.status == 204) {
                var NewAccount = this.getResponseHeader("OData-EntityId");
                var NewAccountId = NewAccount.substr(NewAccount.length - 38).substring(1, 37); 
                Xrm.Utility.openEntityForm("account", NewAccountId); //Open newly created account record
            } else {
                var error = JSON.parse(this.response).error;
                alert(error.message);
            }
        }
    };
    req.send(JSON.stringify(account));
}

 

Please note following code for setting an existing lookup value

 account["primarycontactid@odata.bind"]="/contacts(contactId)";

“contacts” is plural name for contact entity .

var NewAccount = this.getResponseHeader(“OData-EntityId”);  will give  you the newly created record…

Field Conflicts

Recently I faced a strange issue, I used a filed (lookup) twice in the form and applied a pre-filtering java-script to the field. But only one filed is getting filtered by the script.I tried many options and I couldn’t identify the issue. Have you even faced  this issue ? Finally I got the answer from  Scott Durow ( Thank you Scott!!! ). I decided to post this issue because if someone is facing the same issue , this will help them to solve the issue. Following is the explanation for this issue.

The issue you are experiencing is because the ‘getControl’ method returns only the first control – so in fact you are only adding the custom filter to the first control.

An attribute object has a ‘controls’ collection that can give you all the controls for a specific attribute. So you can add the filter to all the controls by using something like:

Xrm.Page.getAttribute(“fieldname”).controls.forEach(

function (control, i) {

control.addPreSearch(filterCustomerAccounts);

var customerAccountFilter = “<filter type=’and’><condition attribute=’accountcategorycode’ operator=’eq’ value=’1’/></filter>”;

control.addCustomFilter(customerAccountFilter, “account”);

}

);

Hope this helps!!!

Nijo