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

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

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

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image