Post
Ask Question

Implementing HTML MODAL In Dynamics CRM

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,
  1. function openNodal1(executionContext) {  
  2.     var dialogParameters = {  
  3.         pageType: "webresource",//required  
  4.         webresourceName: "sum_nodalhtml",//Html Webresource that will be shown  
  5.         data: Xrm.Page.data.entity.getId()  
  6.     };  
  7.   
  8.     var navigationOptions = {  
  9.         target: 2,//use 1 if you want to open page inline or 2 to open it as dialog  
  10.         height: { value: 80, unit: "%" },  
  11.         width: { value: 70, unit: "%" },  
  12.         position: 1//1 to locate dialog in center and 2 to locate it on the side  
  13.     };  
  14.   
  15.     Xrm.Navigation.navigateTo(dialogParameters, navigationOptions).then(  
  16.         function (returnValue) {  
  17.         },  
  18.         function (e) {  
  19.   
  20.             alert(e);  
  21.         });  
  22. }  
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,
  1. $(document).ready(function () {  
  2.             var recordId = getUrlParameters();  
  3.             loadRecords(recordId);  
  4.         });  
  • 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
  1. $('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
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Modal Dialog</title>  
  5. </head>  
  6. <body>  
  7.     <meta charset="utf-8" />  
  8.     <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />  
  9.     <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />  
  10.     <script type="text/javascript" src="../ClientGlobalContext.js.aspx"></script>  
  11.     <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>  
  12.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  13.     <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">  
  14.   
  15.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  
  16.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>  
  17.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
  18.   
  19.     <style type="text/css">  
  20.         .footer {  
  21.             position: fixed;  
  22.             bottom: 0;  
  23.             right: 0;  
  24.             padding-bottom: 10px;  
  25.             padding-right: 10px;  
  26.         }  
  27.   
  28.         .footerButton {  
  29.             width: 150px;  
  30.         }  
  31.     </style>  
  32.     <script type="text/javascript">  
  33.   
  34.   
  35.         $(document).ready(function () {  
  36.             var recordId = getUrlParameters();  
  37.             loadRecords(recordId);  
  38.         });  
  39.   
  40.   
  41.   
  42.         function getUrlParameters() {  
  43.             var queryString = location.search.substring(1);  
  44.             return queryString;  
  45.         }  
  46.         function loadRecords(recordId) {  
  47.   
  48.             var $table = $("#leadtable");  
  49.   
  50.             var req = new XMLHttpRequest();  
  51.             req.open("GET", parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.1/leads?$select=_accountid_value,createdon,description,fullname", false);  
  52.             req.setRequestHeader("OData-MaxVersion", "4.0");  
  53.             req.setRequestHeader("OData-Version", "4.0");  
  54.             req.setRequestHeader("Accept", "application/json");  
  55.             req.setRequestHeader("Content-Type", "application/json; charset=utf-8");  
  56.             req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");  
  57.             req.onreadystatechange = function () {  
  58.                 if (this.readyState === 4) {  
  59.                     req.onreadystatechange = null;  
  60.                     if (this.status === 200) {  
  61.                         var results = JSON.parse(this.response);  
  62.   
  63.                         var leadRecords = [];  
  64.                         for (var i = 0; i < results.value.length; i++) {  
  65.                             var _accountid_value = results.value[i]["_accountid_value"];  
  66.                             var _accountid_value_formatted = results.value[i]["_accountid_value@OData.Community.Display.V1.FormattedValue"];  
  67.                             var _accountid_value_lookuplogicalname = results.value[i]["_accountid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];  
  68.                             var createdon = results.value[i]["createdon"];  
  69.                             var description = results.value[i]["description"];  
  70.                             var fullname = results.value[i]["fullname"];  
  71.                             var leadid = results.value[i]["leadid"];  
  72.   
  73.                             var leadRecord = {};  
  74.                             leadRecord =  
  75.                             {  
  76.                                 'name': fullname,  
  77.                                 'account': _accountid_value,  
  78.                                 'description': description,  
  79.                                 'id': leadid  
  80.   
  81.                             }  
  82.                             leadRecords.push(leadRecord);  
  83.                         }  
  84.                         $('table').bootstrapTable({ data: leadRecords });  
  85.   
  86.                     }  
  87.                     else {  
  88.                         Xrm.Utility.alertDialog(this.statusText);  
  89.                     }  
  90.                 }  
  91.             };  
  92.             req.send();  
  93.   
  94.         }  
  95.     </script>     
  96.     <div >  
  97.         <table id="table"  data-search="true" data-header-style="headerStyle" data-page-size="25">  
  98.             <thead>  
  99.                 <tr>  
  100.                     <th data-field="id" data-visible="false" data-checkbox="true">Id</th>  
  101.                     <th data-field="name" data-sortable="true">Full Name</th>  
  102.                     <th data-field="account" data-sortable="true">Account</th>  
  103.                     <th data-field="description" data-sortable="true">Description</th>  
  104.                 </tr>  
  105.             </thead>  
  106.         </table>  
  107.     </div>  
  108.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  
  109.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>  
  110.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
  111.     <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>  
  112.     <link href="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">  
  113.   
  114.     <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>  
  115. </body>  
  116. </html> 



TRENDING UP

View All