Introduction
Microsoft Dynamics CRM is an enterprise Customer Management Solution assisting businesses with customer insights and offering an unmatched experience to customers right from day one, which includes creating a lead for customers managing an unmatched post-sales experiences.
Dynamics CRM comes with all the industry-specific features which assist implementation partners to meet the expectations of a business, but at times there are requirements that need custom developments.
Scenario
- Business users want to see all the associated contacts to an account, on the loading of the account record in Dynamics CRM, and it should be visible to users on a MODAL through which they will be undertaking required action over the associated contacts
Implementation
- To fulfill this requirement we will be using HTML along with Javascript
- The Javascript will be triggered on Load of the account form, which will be calling
Xrm.Navigation.navigateTo()
- This function will be opening an HTML Web resource through which we will be making a Web API request to Dynamics CRM application, pulling in data and presenting the same in table format
- HTML Web Resouce along with Bootstrap will be used
Explanation of the Javascript Code,
- function openNodal1(executionContext) {
- var dialogParameters = {
- pageType: "webresource",
- webresourceName: "sum_nodalhtml",
- data: Xrm.Page.data.entity.getId()
- };
-
- var navigationOptions = {
- target: 2,
- height: { value: 80, unit: "%" },
- width: { value: 70, unit: "%" },
- position: 1
- };
-
- Xrm.Navigation.navigateTo(dialogParameters, navigationOptions).then(
- function (returnValue) {
- },
- function (e) {
-
- alert(e);
- });
- }
Function - Xrm.Navigation.navigateTo utilizes the following set of parameters
- PageType – we are passing it as a WebResouce as over here we want to load an HTML Web resource
- Name of Webresouce – We need to pass the name of HTML web resource which needs to be loaded on a load of the account record
- Data – It's optional, let's say here for our requirement we are passing the GUID of the account record
Explanation to the HTML Code,
- $(document).ready(function () {
- var recordId = getUrlParameters();
- loadRecords(recordId);
- });
- This code gets triggered the moment the HTML Page gets loaded which in turn calls the load records function
- The loadRecords function makes a Web API request to Dynamics CRM Application which pulls in a required set of information and we store it an Array which is later on coupled/loaded to bootstrap table
- $('table').bootstrapTable({ data: leadRecords });
And moving ahead this table is loaded in DIV block to present and show the data to users for undertaking the required action
HTML CODE for MODAL in Dynamics CRM
- <!DOCTYPE html>
- <html>
- <head>
- <title>Modal Dialog</title>
- </head>
- <body>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
- <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
- <script type="text/javascript" src="../ClientGlobalContext.js.aspx"></script>
- <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-
- <style type="text/css">
- .footer {
- position: fixed;
- bottom: 0;
- right: 0;
- padding-bottom: 10px;
- padding-right: 10px;
- }
-
- .footerButton {
- width: 150px;
- }
- </style>
- <script type="text/javascript">
-
-
- $(document).ready(function () {
- var recordId = getUrlParameters();
- loadRecords(recordId);
- });
-
-
-
- function getUrlParameters() {
- var queryString = location.search.substring(1);
- return queryString;
- }
- function loadRecords(recordId) {
-
- var $table = $("#leadtable");
-
- var req = new XMLHttpRequest();
- req.open("GET", parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.1/leads?$select=_accountid_value,createdon,description,fullname", false);
- req.setRequestHeader("OData-MaxVersion", "4.0");
- req.setRequestHeader("OData-Version", "4.0");
- req.setRequestHeader("Accept", "application/json");
- req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
- req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
- req.onreadystatechange = function () {
- if (this.readyState === 4) {
- req.onreadystatechange = null;
- if (this.status === 200) {
- var results = JSON.parse(this.response);
-
- var leadRecords = [];
- for (var i = 0; i < results.value.length; i++) {
- var _accountid_value = results.value[i]["_accountid_value"];
- var _accountid_value_formatted = results.value[i]["_accountid_value@OData.Community.Display.V1.FormattedValue"];
- var _accountid_value_lookuplogicalname = results.value[i]["_accountid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
- var createdon = results.value[i]["createdon"];
- var description = results.value[i]["description"];
- var fullname = results.value[i]["fullname"];
- var leadid = results.value[i]["leadid"];
-
- var leadRecord = {};
- leadRecord =
- {
- 'name': fullname,
- 'account': _accountid_value,
- 'description': description,
- 'id': leadid
-
- }
- leadRecords.push(leadRecord);
- }
- $('table').bootstrapTable({ data: leadRecords });
-
- }
- else {
- Xrm.Utility.alertDialog(this.statusText);
- }
- }
- };
- req.send();
-
- }
- </script>
- <div >
- <table id="table" data-search="true" data-header-style="headerStyle" data-page-size="25">
- <thead>
- <tr>
- <th data-field="id" data-visible="false" data-checkbox="true">Id</th>
- <th data-field="name" data-sortable="true">Full Name</th>
- <th data-field="account" data-sortable="true">Account</th>
- <th data-field="description" data-sortable="true">Description</th>
- </tr>
- </thead>
- </table>
- </div>
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
- <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
- <link href="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
-
- <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
- </body>
- </html>