i want to create a user profile section in an ERPNext dashboard workspace and display user details
@neha write all elements in html like this :
<div id="full_name"></div>
<div id="email"></div>
write js code to fill all the elements like this :
frappe.call({
method: "frappe.client.get",
args: {
doctype: "User",
name: frappe.session.user,
},
callback(r) {
if(r.message) {
root_element.querySelector("#full_name").textContent=r.message.full_name;
root_element.querySelector('#email').textContent=r.message.email;
}
}
});
you should see something like this :
next use css to beautify it .
5 Likes
Thank You!
How to display the Company details from company doctype?
How can the item button be fetched to display in the same way inside the custom html block
Because I do not want the page to be reloaded when I press the button
1 Like
i want to fetch data from 2 defrent doctype one is user and one Client Doctype where have more dettials
frappe.call({
// method: “frappe.client.get”,
// args: {
// doctype: “User”,
// name: frappe.session.user,
// },
// callback: function(r_user) {
// if (r_user.message) {
// root_element.querySelector(“#full_name”).textContent = r_user.message.full_name;
// root_element.querySelector(“email”).textContent = r_user.message.email;
// // Fetch client information and other related data
// fetchClientInfo(r_user.message);
// }
// }
// });
// function fetchClientInfo(user_data) {
// frappe.call({
// method: “frappe.client.get_list”,
// args: {
// doctype: “Client”,
// filters: {
// email: user.email,
// client_name: user.first_name,
// business_name: user.full_name
// },
// fields: [“client_name”, “standards”, “certified_since”, “certified_expiry”, “ext”, “region”, “city”]
// },
// callback: function(r_client) {
// if (r_client.message && r_client.message.length > 0) {
// let clientData = r_client.message[0];
// // Update client info based on fetched data
// root_element.querySelector(“#client_name”).textContent = clientData.client_name;
// root_element.querySelector(“#standards”).textContent = clientData.standards;
// root_element.querySelector(“#certified_since”).textContent = clientData.certified_since;
// root_element.querySelector(“#certified_expiry”).textContent = clientData.certified_expiry;
// root_element.querySelector(“#ext”).textContent = clientData.ext;
// root_element.querySelector(“#region”).textContent = clientData.region;
// root_element.querySelector(“#city”).textContent = clientData.city;
// // Calculate remaining days
// let expiryDate = new Date(clientData.certified_expiry);
// let currentDate = new Date();
// let daysDifference = Math.ceil((expiryDate - currentDate) / (1000 * 60 * 60 * 24));
// root_element.querySelector(“#remaining_days”).textContent = daysDifference < 60 ? daysDifference + " days left" : “-”;
// }
// }
// });
// }
// frappe.call({
// method: “frappe.client.get”,
// args: {
// doctype: “User”,
// name: frappe.session.user,
// },
// callback: function(r_user) {
// if (r_user.message) {
// root_elemen(“full_name”).textContent = r_user.message.full_name;
// root_elemen(“email”).textContent = r_user.message.email;
// // Fetch client information and other related data
// fetchClientInfo(r_user.message);
// }
// }
// });
Thanks for the reference @bahaou , tried with something new learning.
<table class="table table-bordered table-condensed" id="task_table"></table>
frappe.call({
method: "frappe.client.get_list",
args: {
doctype: "Task",
filters: {
status: ['In',["Open", "Overdue"]]
},
fields: ["name", "subject", "status", "project", "priority"],
},
callback: function (response) {
if (response.message) {
populateTaskTable(response.message);
} else {
console.error("No task list data found.");
}
},
error: function (xhr, status, error) {
console.error("Error fetching task list:", error);
},
});
function populateTaskTable(tasks) {
var taskTable = root_element.querySelector("#task_table");
var tableHTML = "<thead>";
tableHTML += "<thead><tr><th>Task ID</th><th>Task</th><th>Status</th><th>Priority</th><th>Project</th></tr></thead>";
tableHTML += "<tbody>";
tasks.forEach(function (task) {
tableHTML += "<tr>";
tableHTML += "<td><a href='/app/task/" + task.name + "'>" + task.name + "</a></td>";
tableHTML += "<td>" + task.subject + "</td>";
var statusColor = task.status === "Overdue" ? "red" : "green";
tableHTML += "<td style='color: " + statusColor + ";'>" + task.status + "</td>";
var priorityColor = "";
switch(task.priority) {
case "Urgent":
priorityColor = "red";
break;
case "High":
priorityColor = "orange";
break;
case "Medium":
priorityColor = "#8B8000";
break;
case "Low":
priorityColor = "green";
break;
default:
priorityColor = "inherit";
}
tableHTML += "<td style='color: " + priorityColor + ";'>" + task.priority + "</td>";
tableHTML += "<td><a href='/app/project/" + task.project + "'>" + task.project + "</a></td>";
tableHTML += "</tr>";
});
tableHTML += "</tbody>";
taskTable.innerHTML = tableHTML;
}
Output:
2 Likes