Insights

Reduce Amount of Time and Number of Clicks with an Add Button for a Microsoft Dynamics® CRM 2016 Connection

Reduce Amount of Time and Number of Clicks with an Add Button for a Microsoft Dynamics® CRM 2016 Connection


Apr 07, 2016

Microsoft Dynamics® CRM 2011 introduced Connections, which essentially replaces and extends the functionality of Relationships (with a capital R) that were limited to creating ad-hoc relationships beyond the “primary” relationship among accounts, contacts, and opportunities.  Connections pick up where Relationships left off by allowing users to create ad-hoc relationships between practically any two entity records.
 
This functionality works well but one of the drawbacks is the number of clicks it takes to actually add a connection.  Adding a new Connection takes 6 clicks plus navigating to another form.  This process can be time consuming, but I’ll show you how to reduce that process to 4 clicks without navigating away from the current form.  Eliminating those 2 clicks and the easier form navigation for the users can save time and streamline their process.  This code has been tested on Dynamics CRM 2016 Online.
 
The main reason it takes so many clicks is that when a Connections subgrid is added to a form, it is missing the plus sign icon in the upper right hand corner of the grid.
 
Most subgrids on a form:

160407-CRMBlog

 
 Connections subgrid on a form:

 

160407-CRMBlog1

 
 Connection subgrid with custom button:

160407-CRMBlog2

 
There is no way to add this icon using standard CRM configuration.  Without this icon, users have to navigate to the associated Connections form to add a new Connection.  Once on the Connections form, the user clicks on the Connect button on the toolbar to add the connection.  I created a solution to allow the user to click on a button on the main Entity form that would do the same thing without navigating away from the form.
 
The first step was to add a button to the main Entity form.  This can be done by creating a simple HTML file with a button control.  Clicking the button will execute some JavaScript that will do the rest of the work.

 

160407-CRMBlog3

 
  
 
The JavaScript code behind the button will need to get the Id of the main Entity and then construct the URL used to open the add Connection dialog.  There are a few other variables that we need to make the URL correct, in addition to the Id.  Once we have all the variables for the URL, we can use it to open the dialog window.  The first step is to make sure the form is done loading before trying to get the variables.

 

160407-CRMBlog4

Then we can retrieve the Id of the main Entity from the form.  We also need to strip off the curly braces for the URL to be correct.
 
var recordId = parent.Xrm.Page.data.entity.getId();
recordId = recordId.replace("{", "");
recordId = recordId.replace("}", "");
 
Now we can continue to get the other variables and construct the URL.  In the following code, the “myLink” variable will have the completed URL we can use to open the add Connection dialog.
 
var ObjectTypeCode = parent.Xrm.Page.context.getQueryStringParameters().etc
var RnNum = Math.floor(100000000 + Math.random() * 900000000);
var baseURL = parent.Xrm.Page.context.getClientUrl();
myLink = baseURL + "/main.aspx?etc=3234&extraqs=%3fetc%3d3234%26pId%3d%257b" + recordId + "%257d%26pType%3d" + ObjectTypeCode + "&histKey=" + RnNum.toString() + "&newWindow=true&pagetype=entityrecord";
 
Now it’s time to open the dialog window.  Using window.open and the URL we can open the window.

 

160407-CRMBlog5

 
Now, the Connection record is made, but it won’t show in the subgrid until the form refreshes.  To make it show automatically, I had to refresh the subgrid on the main form after the dialog was closed.  This was solved by adding a timer to the code that would look for the dialog close event and then refresh the sub-grid.

 

160407-CRMBlog6

 
That completes the process of adding the Connection.  Add this to a solution in Dynamics CRM as an HTML Web Resource.  Then add that Web Resource to the form just below the Connections subgrid.
 
That’s all there is to it.  You can modify the HTML if you want to change the look of the button.  Here is the complete code for the HTML Web Resource file.
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
                <meta charset="utf-8" />
                <script type="text/javascript" src="/webresources/ClientGlobalContext.js.aspx"></script>
                <script>
                                var myLink;
 
                                document.onreadystatechange = function () {
                                                if (document.readyState == "complete") {
                                                                getDataParam();
                                                }
                                }
 
                                function getDataParam() {
                                                var recordId = parent.Xrm.Page.data.entity.getId();
                                                recordId = recordId.replace("{", "");
                                                recordId = recordId.replace("}", "");
 
                                                var ObjectTypeCode = parent.Xrm.Page.context.getQueryStringParameters().etc
                                                var RnNum = Math.floor(100000000 + Math.random() * 900000000);
                                                var baseURL = parent.Xrm.Page.context.getClientUrl();
                                                myLink = baseURL + "/main.aspx?etc=3234&extraqs=%3fetc%3d3234%26pId%3d%257b" + recordId + "%257d%26pType%3d" + ObjectTypeCode + "&histKey=" + RnNum.toString() + "&newWindow=true&pagetype=entityrecord";
                                }
 
                                function openWindow() {
                                                getDataParam();
                                                var popupWindow = window.open(myLink, 'popupWindow', 'height=500,width=750,left=250,top=250,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no');
                                                var timer = setInterval(function () {
                                                                if (popupWindow.closed) {
                                                                                clearInterval(timer);
                                                                                var subgrid = parent.Xrm.Page.ui.controls.get("Connections");
                                                                                subgrid.refresh();
                                                                }
                                                })
                                }
                </script>
</head>
<body onload="">
                <button onclick="javascript: openWindow();">Add Connection</button>
</body>
</html>
 
As always, please reach out to the Wipfli CRM team at crmteam@wipfli.com if you have any questions specific to customizing, upgrading, or anything else CRM!

 

Comments

Write a Comment

* = required fields

(will not be published)

(will not be published)

Dynamics CRM Blog

Subscribe to Connect – Microsoft Dynamics 365


Submit