Skip to main content

Notifications

Microsoft Dynamics CRM (Archived)
Under review by Community Managers

Under review

Thank you for your post! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Render option set values in to a drop down html table using Rest Odata in CRM

Posted on by 2,665

Hi All,

I am trying to get option set values ex: Start, OnGoing, Completed from entity records & it should show in Drop down inside HTML table.Any Sample code if anyone please share !!

In below code, i am giving static data but values should come from records dynamically.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script>
function trainingFollowUp() {
debugger;
var req = new XMLHttpRequest();
req.open("GET", window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/ags_trainingfollowups?$select=_ags_geographicalarea_value,ags_name,_ags_site_value,ags_status,ags_trainingfollowupid", 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 customers = new Array();
customers.push(["Site", "North", "South","West","NE","East"]);
for (var i = 0; i < results.value.length; i++) {
var _ags_geographicalarea_value = results.value[i]["_ags_geographicalarea_value"];
var _ags_geographicalarea_value_formatted = results.value[i]["_ags_geographicalarea_value@OData.Community.Display.V1.FormattedValue"];
var _ags_geographicalarea_value_lookuplogicalname = results.value[i]["_ags_geographicalarea_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
var ags_name = results.value[i]["ags_name"];
var _ags_site_value = results.value[i]["_ags_site_value"];
var _ags_site_value_formatted = results.value[i]["_ags_site_value@OData.Community.Display.V1.FormattedValue"];
var _ags_site_value_lookuplogicalname = results.value[i]["_ags_site_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
var ags_status = results.value[i]["ags_status"];
var ags_status_formatted = results.value[i]["ags_status@OData.Community.Display.V1.FormattedValue"];
var ags_trainingfollowupid = results.value[i]["ags_trainingfollowupid"];
switch (_ags_geographicalarea_value_formatted) {
case "North":
customers.push([_ags_site_value_formatted,ags_status_formatted,'','','']);
break;
case "South":
customers.push([_ags_site_value_formatted,'',ags_status_formatted,'','']);
break;
case "West":
customers.push([_ags_site_value_formatted,'','',ags_status_formatted,'']);
break;
default:
customers.push([_ags_site_value_formatted,'','','',ags_status_formatted]);
}
}
//Create a HTML Table element.
var table = document.createElement("TABLE");
table.border = "1";
var columnCount = customers[0].length; //Count Column no
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = customers[0][i];
row.appendChild(headerCell);
}
//Add the data rows.
for (var i = 1; i < customers.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
if (j == 0)
cell.innerHTML = customers[i][j];
else {
if (customers[i][j] != '' && customers[i][j] != null) {
var element1 = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
option1.style.backgroundColor='red';
option2.style.backgroundColor ='green';
option3.style.backgroundColor='yellow';
option1.innerHTML = "Start";
option2.innerHTML = "OnGoing";
option3.innerHTML = "Completed";
element1.appendChild(option1);
element1.appendChild(option2);
element1.appendChild(option3);
cell.appendChild(element1);
}
}
}
}
}
var dvTable = document.getElementById("dvTable");
//dvTable.innerHTML = "";
dvTable.appendChild(table);
} else {
Xrm.Utility.alertDialog(this.statusText);
}

};
req.send();
}
function updateRecord(){
alert("Hello");
}
</script>
</head>
<body onload="trainingFollowUp()" style="word-wrap: break-word;">
<button type="submit" value="Submit" onclick="updateRecord()" style="position:absolute;right:32px;">Submit</button>
<div id="dvTable">
</div>
</body>
</html>

Any help would be appreciated !!

Thanks,

Jharana

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,253 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,188 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans