CRM Call WCF Service in HTML Web Resource using AJAX

Posted on Posted in MS CRM 2013, MS CRM 2015, MS Dynamics, REST, WCF

Recently I have worked on arequirement where I had to write a service which was going to be used by different clients and had to call same service using HTML web resource in CRM 2015.To achieve this first of all I had to add a ribbon button on entity and call my web resource abc.htm

I was passing record id of entity in url to abc.html and from there I was calling wcf service using AJAX and displaying results and giving user an option to select a row and press submit button. Ob submitting button an other service was being called, again ajax but post method to create records.

Below is a full code of HTML Web Resource with some bootstrap, might help someone else.

 

<!DOCTYPE HTML>
<html lang=”en-us”>
<head>
    <title>Create work order schedule</title>
    <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
    <script type=”text/javascript”>
        var dataToBePosted;
        $(document).ready(function () {
            getDataParam();
            
            selectedTableRow();
            $(“#btnCreate”).on(‘click’, function (e) {
                postCreateWOS();
            });
        });
        function getDataParam()
        {
            var vals = new Array();
            if (location.search != “”) {
                vals = location.search.substr(1).split(“&”);
                for (var i in vals) {
                    vals[i] = vals[i].replace(/\+/g, ” “).split(“=”);
                }
                //look for the parameter named ‘data’
                var found = false;
                for (var i in vals) {
                    if (vals[i][0].toLowerCase() == “id”) {
                        console.log(vals[i][1]);
                        getGetMyData(vals[i][1]);
                        found = true;
                        break;
                    }
                }
                if (!found)
                {
                    noParams();
                }
            }
            else {
                noParams();
            }
        }
        function noParams() {
            $(“#divError”).text( “No data parameter was passed to this page”).removeClass(“hidden”);
        }
        function selectedTableRow() {
            $(“#tableContainer”).on(‘click’, ‘tr’, function (event) {
                $(“.active”).removeClass(“active”);
                $(this).addClass(“active”);
                var RLogName, RId, StartTime, EndTime, WOId, Distance;

                $(this).find(‘td’).each(function () {
                    var dd = $(this).data(‘tdname’);

                    if (dd == ‘RLogName’) {
                        RLogName = $(this).html();
                    }
                    else if (dd == ‘RId’) {
                        RId = $(this).html();
                    }
                    else if (dd == ‘StartTime’) {
                        StartTime = $(this).html();
                    }
                    else if (dd == ‘EndTime’) {
                        EndTime = $(this).html();
                    }
                    else if (dd == ‘WOId’) {
                        WOId = $(this).html();
                    }
                    else if (dd == ‘Distance’) {
                        Distance = $(this).html();
                    }
                });
                dataToBePosted = ‘{“RLogName”: “‘ + RLogName + ‘”, “RId”: “‘ + RId + ‘”, “StartTime”:  “‘ + StartTime + ‘”, “EndTime”:  “‘ + EndTime + ‘”, “WOId”:  “‘ + WOId + ‘”, “Distance”:  “‘ + Distance + ‘”}’;
            });
        }
        function postCreateWOS() {
            url = “https://rokhri.com/Services/MyService.svc/CreateWOS”;
            $.post(url, dataToBePosted, function (data, textStatus) {
                if (textStatus == “success”) {
                    $(“#divSuccess”).removeClass(“hidden”);
                    $(“#tableContainer”).addClass(“hidden”);
                }
                else {
                    $(“#divError”).removeClass(“hidden”);
                }
            }, “json”);
        }
        //TODO – get values from browser
        function getGetMyData(WOId) {
            wcfServiceUrl = “https://rokhri.com/Services/MyService.svc/”;
            $.ajax({
                url: wcfServiceUrl + “GetMySlots/” + WOId + “/0/0”,
                type: “GET”,
                contentType: “application/javascript”,
                dataType: “jsonp”,
                error: function () {
                    $(“#divError”).text(“No data found. Please make sure record has a primary id and all other required data.”).removeClass(“hidden”);
                },
                success: function (data) {
                    var txt = “”;
                    if (data !== null) {
                        $.each(data, function (key, val) {

                            var formattedDate = new Date(val.StartTime);
                            var d = formattedDate.getDate();
                            var m = formattedDate.getMonth();
                            m += 1;
                            var y = formattedDate.getFullYear();
                            var startTime = d + “.” + m + “.” + y;

                            var distance = parseFloat(Math.round(val.Distance * 100) / 100).toFixed(2);

                            txt += “<tr class=\”myclass\”>”;

                            txt += “<td data-tdname=’RLogName’>” + val.RLogName + “</td>”;
                            txt += “<td data-tdname=’ResourceName’>” + val.ResourceName + “</td>”;
                            txt += “<td data-tdname=’RId’ class=\”hidden\”>” + val.RId + “</td>”;
                            txt += “<td data-tdname=’StartTime’>” + startTime + “</td>”;
                            txt += “<td data-tdname=’EndTime’  class=\”hidden\”>” + val.EndTime + “</td>”;
                            txt += “<td data-tdname=’WorkOrderSlot’>” + val.WorkOrderSlot + “</td>”;
                            txt += “<td data-tdname=’WOId’ class=\”hidden\”>” + val.WOId + “</td>”;
                            txt += “<td data-tdname=’Distance’>” + distance + “</td>”;
                            txt += “<td data-tdname=’BusinessUnitName’>” + val.BusinessUnitName + “</td>”;
                            txt += “<td data-tdname=’Telephone’>” + val.Telephone + “</td>”;

                            txt += “</tr>”;
                        });
                        if (txt != “”) {
                            $(“#tableContainer”).removeClass(“hidden”);
                            $(“#table”).append(txt).removeClass(“hidden”);
                        }
                        else {
                            $(“#divError”).text(“No data was found”).removeClass(“hidden”);
                        }
                    }
                    else {
                        $(“#divError”).text(“No data was found”).removeClass(“hidden”);
                    }
                }
            });
        }
    </script>
    <style>
        .hidden {
            display: none;
        }
    </style>
    <link rel=”Stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” />
</head>
<body>
    <div class=”panel panel-default”>
        <div class=”panel-heading”><h3>List of available Slots</h3></div>
        <div class=”panel-body hidden” id=”tableContainer”>
            <div>
                <h4 class=”text-primary”>Select a row below to create a WOS Schedule</h4>
            </div>
            <table id=”table” class=”table table-hover”>
                <tr>
                    <th>Name</th>
                    <th>ID</th>
                    <th class=”hidden”>RId</th>
                    <th class=”hidden”>EndTime</th>
                    <th>Start Time</th>
                    <th>Slot</th>
                    <th class=”hidden”>WOSId</th>
                    <th>Distance</th>
                    <th>Business Unit</th>
                    <th>Telephone</th>
                </tr>
            </table>
            <div>
                <button id=”btnCreate” class=”btn-default btn-primary”>Create WOS Schedule</button>
            </div>
        </div>
        <div id=”divSuccess” class=”alert alert-success hidden” role=”alert”>A new WOS schedule has been created</div>
        <div id=”divErrorNoSlots” class=”alert alert-danger hidden” role=”alert”>No valid time slots found!</div>
        <div id=”divError” class=”alert alert-danger hidden” role=”alert”>Error while creating a new WOS schedule!</div>
    </div>
</body>
</html>