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.
![Nodal HTML]()
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
Explanation of the Javascript Code
function openNodal1(executionContext) {
var dialogParameters = {
pageType: "webresource", // required
webresourceName: "sum_nodalhtml", // Html Webresource that will be shown
data: Xrm.Page.data.entity.getId()
};
var navigationOptions = {
target: 2, // use 1 if you want to open page inline or 2 to open it as dialog
height: { value: 80, unit: "%" },
width: { value: 70, unit: "%" },
position: 1 // 1 to locate dialog in center and 2 to locate it on the side
};
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 web resource: 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.
$(document).ready(function () {
var recordId = getUrlParameters();
loadRecords(recordId);
});
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>
<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]["[email protected]"];
var _accountid_value_lookuplogicalname = results.value[i]["[email protected]"];
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 = {
'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>
</head>
<body>
<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://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
</body>
</html>