I want to get Dataelement IDs and Names with Dataset’s API fetch in Custom Form Design. Problem is I can preview the design and DEs but when I go to Data Entry and select orgUnit,dataset and period, Data Elements are not shown. Could you please give me some suggestions and help? (I am using Version 2.42.1)
Following Script Function is the one I use to fetch DEs id and name with API call and render the response data into my html table body (id=”Infra_CliSt”).
async function populateDETable() {
try {
// 1️⃣ Fetch DataSet with Data Elements and Category Combo IDs
const res = await fetch(
“—/api/dataElements?filter=dataSetElements.dataSet.id:eq:—&fields=id,name,description&paging=false”,
{
headers: {
“Authorization”: "Basic " + btoa(“admin:district”),
“Content-Type”: “application/json”,
},
}
);
if (!res.ok) throw new Error(`API error: ${res.status}`);
const data = await res.json();
console.log("Data =>", data);
// 2️⃣ Map Data Elements
const dataElements = (data.dataSetElements || []).map((dse) => ({
id: dse.dataElement.id,
name: dse.dataElement.displayName
}));
// 3️⃣ Get table body
const tbody = document.querySelector("#Infra_CliSt tbody");
if (!tbody) return console.warn("Table body #Infra_CliSt tbody not found!");
// 4️⃣ Clear old rows
tbody.innerHTML = "";
// 5️⃣ Populate table with input fields
dataElements.forEach((de) => {
const tr = document.createElement("tr");
const tdName = document.createElement("td");
tdName.textContent = de.name;
tdName.style.padding = "6px";
const tdInput = document.createElement("td");
tdInput.style.padding = "6px";
const input = document.createElement("input");
input.type = "number";
input.id = `${de.id}`; // crucial for Data Entry recognition
input.name = `${de.id}`;
input.title = de.name;
tdInput.appendChild(input);
tr.appendChild(tdName);
tr.appendChild(tdInput);
tbody.appendChild(tr);
});
console.table(dataElements);
console.log("✅ Data Elements populated with input fields for Data Entry:", dataElements);
} catch (err) {
console.error(“❌ Error fetching DEs:”, err);
}
}
const observer = new MutationObserver((mutations, obs) => {
const container = document.querySelector(“#Infra_CliSt_Container”);
if (container) {
populateDETable();
obs.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });