web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
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,667

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

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Stars!

Meet the Microsoft Dynamics 365 Contact Center Champions

We are thrilled to have these Champions in our Community!

Congratulations to the April Top 10 Community Leaders

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans