Hi,
I have created one custom HTML block.It should show the List of task In task column & their status in Status Column. But its not working, It only showing the Heading of both columns.
I attached code below,
HTML:
<div id="root_element">
<div id="task-status-container" style="display: flex; justify-content: space-between;">
<div style="flex: 1; padding: 10px;">
<h2>Task</h2>
<ul id="task-list"></ul>
</div>
<div style="flex: 1; padding: 10px;">
<h2>Status</h2>
<ul id="status-list"></ul>
</div>
</div>
</div>
JAVA Scrt
frappe.call({
method: "frappe.client.get_list",
args: {
doctype: "Task",
fields: ["subject", "status"],
limit_page_length: 100
},
callback: function(response) {
const tasks = response.message || [];
const rootElement = document.getElementById("root_element");
const taskList = rootElement.querySelector("#task-list");
const statusList = rootElement.querySelector("#status-list");
tasks.forEach(task => {
const taskItem = document.createElement("li");
taskItem.innerText = task.subject;
taskList.appendChild(taskItem);
const statusItem = document.createElement("li");
statusItem.innerText = task.status;
statusList.appendChild(statusItem);
});
}
});