How to bind Dynamics CRM data to dropdown using JavaScript/ HTML?

In this blog, I 'll show how we can create a dropdown and bind it with value from Entity record values e.g we need to show all On-Demand process inside an entity as a dropdown list. So for this I have used 2 methods: ODATA and WebAPI call.. For Users using older version of CRM can use ODATA method.

In this below example I am binding all system view in the dropdown inside an HTML web resource.

Copy and paste code as below:

1. ODATA Method:

<head>
    <script type="text/javascript" src="/_common/ClientGlobalContext.js.aspx"></script>
</head>
<body style="overflow-wrap: break-word; height: 24px; word-wrap: break-word;">
    <select id="viewdropdown" onchange="GetSelectedviewValue(this)" style="height:24px; width:495px; margin-left:16px">
        <option selected="" value="Loading...">Loading...</option>
    </select>
    <script>


        function viewDropdownList() {
            if (window.parent.Xrm.Page.getAttribute("new_entityschemaname").getValue() != null) {
                var flag = 0;
                var arrDisplayView = new Array();
                var retrieveReq = new XMLHttpRequest();

                var serverUrl = Xrm.Page.context.getClientUrl();
                var oDataEndpointUrl = serverUrl + "/XRMServices/2011/OrganizationData.svc/";
                var Query = "SavedQuerySet?$select=FetchXml,Name,SavedQueryIdUnique&$filter=ReturnedTypeCode eq '" + window.parent.Xrm.Page.getAttribute("new_entityschemaname").getValue() + "' and StateCode/Value eq 0";
                var oDataSelect = oDataEndpointUrl + Query;

                retrieveReq.open("GET", oDataSelect, false);
                retrieveReq.setRequestHeader("Accept", "application/json");
                retrieveReq.setRequestHeader("Content-Type", "application/json;charset=utf-8");
                retrieveReq.onreadystatechange = function () {
                    if (retrieveReq.readyState === 4) {
                        if (retrieveReq.status === 200) {
                            var retrieved = JSON.parse(retrieveReq.responseText).d; //eval('(' + retrieveReq.responseText + ')').d;

                            if (retrieved.results.length > 0) {
                                var viewDropdown = document.getElementById('viewdropdown');
                                for (var i = 0; i < retrieved.results.length; i++) {
                                    var fetchxml = retrieved.results[i].FetchXml;
                                    arrDisplayView[i] = retrieved.results[i].Name;
                                    var savedqueryidunique = retrieved.results[i].SavedQueryIdUnique;
                                    if ((window.parent.Xrm.Page.getAttribute("new_view").getValue()) == arrDisplayView[i]) {
                                        flag = 1;
                                        var opt = document.createElement('option');
                                        // create text node to add to option element (opt)
                                        opt.appendChild(document.createTextNode(arrDisplayView[i]));
                                        // set value property of opt
                                        opt.value = arrDisplayView[i];
                                        opt.selected = true;
                                        viewDropdown.appendChild(opt);
                                    }
                                    else {
                                        var opt = document.createElement('option');
                                        // create text node to add to option element (opt)
                                        opt.appendChild(document.createTextNode(arrDisplayView[i]));
                                        // set value property of opt
                                        opt.value = arrDisplayView[i];
                                        viewDropdown.appendChild(opt);
                                    }
                                }
                                viewdropdown.remove(0);
                                if (flag == 0) {
                                    window.parent.Xrm.Page.getAttribute("new_view").setValue(arrDisplayView[0]);
                                }
                                if (window.parent.Xrm.Page.getAttribute("new_status").getValue() == 20) {
                                    document.getElementById('viewdropdown').disabled = true;
                                }
                            }
                        }
                    } else {
                        Xrm.Utility.alertDialog(this.statusText);
                    }
                }
                retrieveReq.send();
            };
        }

        window.onload = viewDropdownList;
        function GetSelectedviewValue(viewdropdown) {
            var selectedText = viewdropdown.options[viewdropdown.selectedIndex].innerHTML;
            window.parent.Xrm.Page.getAttribute("new_view").setValue(selectedText);
        }
    </script>
</body>



2. WEB API:

<html>
<head>
    <script type="text/javascript" src="/_common/ClientGlobalContext.js.aspx"></script>
    <meta>
    <meta>
</head>
<body style="overflow-wrap: break-word; height: 24px; word-wrap: break-word;">
    <select id="viewdropdown" onchange="GetSelectedviewValue(this)" style="height:24px; width:495px; margin-left:16px">
        <option selected="" value="Loading...">Loading...</option>
    </select>


    <script>

        function viewDropdownList() {
            if (window.parent.Xrm.Page.getAttribute("new_entityschemaname").getValue() != null) {
                var flag = 0;
                var arrDisplayView = new Array();
                var req = new XMLHttpRequest();
                var url = Xrm.Page.context.getClientUrl();
                //req.open("GET", url + "xrmservices/2011/OrganizationData.svc/SavedQuerySet?$filter=StateCode/Value eq 0 and ReturnedTypeCode eq '" + window.parent.Xrm.Page.getAttribute("new_entityschemaname").getValue());
                req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.1/savedqueries?$select=fetchxml,name,savedqueryidunique&$filter=returnedtypecode eq '" + window.parent.Xrm.Page.getAttribute("new_entityschemaname").getValue() + "'" + " and  statecode eq 0", true);
                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 viewDropdown = document.getElementById('viewdropdown');
                            for (var i = 0; i < results.value.length; i++) {
                                var fetchxml = results.value[i]["fetchxml"];
                                arrDisplayView[i] = results.value[i]["name"];
                                var savedqueryidunique = results.value[i]["savedqueryidunique"];
                                if ((window.parent.Xrm.Page.getAttribute("new_view").getValue()) == arrDisplayView[i]) {
                                    flag = 1;
                                    var opt = document.createElement('option');
                                    // create text node to add to option element (opt)
                                    opt.appendChild(document.createTextNode(arrDisplayView[i]));
                                    // set value property of opt
                                    opt.value = arrDisplayView[i];
                                    opt.selected = true;
                                    viewDropdown.appendChild(opt);
                                }
                                else {
                                    var opt = document.createElement('option');
                                    // create text node to add to option element (opt)
                                    opt.appendChild(document.createTextNode(arrDisplayView[i]));
                                    // set value property of opt
                                    opt.value = arrDisplayView[i];
                                    viewDropdown.appendChild(opt);
                                }
                            }
                            viewdropdown.remove(0);
                            if (flag == 0) {
                                window.parent.Xrm.Page.getAttribute("new_view").setValue(arrDisplayView[0]);
                            }
                            if (window.parent.Xrm.Page.getAttribute("new_status").getValue() == 20) {
                                document.getElementById('viewdropdown').disabled = true;
                            }
                        } else {
                            Xrm.Utility.alertDialog(this.statusText);
                        }
                    }
                };
                req.send();
            }

        }
        window.onload = viewDropdownList;
        function GetSelectedviewValue(viewdropdown) {
            var selectedText = viewdropdown.options[viewdropdown.selectedIndex].innerHTML;
            window.parent.Xrm.Page.getAttribute("new_view").setValue(selectedText);
        }
    </script>

</body>
</html>


Comments

Popular posts from this blog

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to import CSV files into DataTable in C#

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

go to top image