Implementing HTML MODAL In Dynamics CRM

Sumit Gupta
1y
18.4k
0
2

Article

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

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()
```
JavaScript
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", // 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]["_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 = {
                                '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/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>

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 22.5k people

Download Now!

Learn

View all