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 .
9 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:
8 Likes
the problem with this , that it’s not connected to user permission, any user will see same table data , even if he is not have the permission , how can i hide it based on session permissions user
if i created something like this
<div class="workspace-block-container">
<div class="workspace-section section-sales">Sales </div>
<div class="workspace-section-container">
<div class="workspace-block" data-doctype="Sales Order">
<a href="/app/sales-order">
how can i hide Sales Order or any other doctype based on user permission session, if he is not have permission on sales order , it should hide , how can i handle this
Please Check this
Could you please provide guidance on how to retrieve child table data and display it within a Custom HTML Box? Thank you!
Server logic is required for that case so check the post.
"Thank You for the answer! I’ll check the post.