From b7f006b8f313d0810003eca05cd46f069dfad4c9 Mon Sep 17 00:00:00 2001 From: Krishna Shirsath Date: Tue, 27 Jan 2026 17:22:24 +0530 Subject: [PATCH 1/2] fix(organizational-chart): show empty state when no data is available Fixes #3940 --- hrms/public/js/hierarchy-chart.bundle.js | 1 + .../hierarchy_chart_desktop.js | 52 +++++++++++++++---- .../hierarchy_chart/hierarchy_chart_mobile.js | 49 ++++++++++++++--- .../js/templates/hierarchy_empty_state.html | 32 ++++++++++++ 4 files changed, 118 insertions(+), 16 deletions(-) create mode 100644 hrms/public/js/templates/hierarchy_empty_state.html diff --git a/hrms/public/js/hierarchy-chart.bundle.js b/hrms/public/js/hierarchy-chart.bundle.js index 02703139dd..96563e6256 100644 --- a/hrms/public/js/hierarchy-chart.bundle.js +++ b/hrms/public/js/hierarchy-chart.bundle.js @@ -1,3 +1,4 @@ import "./hierarchy_chart/hierarchy_chart_desktop.js"; import "./hierarchy_chart/hierarchy_chart_mobile.js"; import "./templates/node_card.html"; +import "./templates/hierarchy_empty_state.html"; diff --git a/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js index 51019d2250..7e0d2ab389 100644 --- a/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js +++ b/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js @@ -12,22 +12,12 @@ hrms.HierarchyChart = class { this.method = method; this.doctype = doctype; - this.setup_page_style(); this.page.main.addClass("frappe-card"); this.nodes = {}; this.setup_node_class(); } - setup_page_style() { - this.page.main.css({ - "min-height": "300px", - "max-height": "700px", - overflow: "auto", - position: "relative", - }); - } - setup_node_class() { let me = this; this.Node = class { @@ -228,6 +218,15 @@ hrms.HierarchyChart = class { }) .then((r) => { if (r.message.length) { + me.page.body.find("#hierarchy-empty-root").remove(); + + me.page.main.css({ + "min-height": "300px", + "max-height": "700px", + overflow: "auto", + position: "relative", + }); + let expand_node; let node; @@ -255,6 +254,39 @@ hrms.HierarchyChart = class { if (!expanded_view) { me.expand_node(expand_node); } + } else { + me.page.body.find("#hierarchy-empty-root").remove(); + const empty_html = frappe.render_template("hierarchy_empty_state", { + doctype: me.doctype, + company: me.company, + can_create: frappe.model.can_create("Employee"), + device_type: "desktop", + }); + + $("#hierarchy-chart-wrapper").remove(); + me.page.body.append(empty_html); + + me.page.main.css({ + "min-height": "100%", + "max-height": "100%", + }); + + (function () { + const root = document.getElementById("hierarchy-empty-root"); + if (!root) return; + try { + const rect = root.getBoundingClientRect(); + const windowHeight = window.innerHeight; + const height = Math.max(300, Math.floor(windowHeight - rect.top - 20)); + root.style.height = height + "px"; + root.style.overflow = "auto"; + root.style.position = "relative"; + } catch (e) {} + })(); + me.page.body.find("#add-doc-btn").on("click", () => { + frappe.route_options = { company: me.company }; + frappe.new_doc(me.doctype); + }); } }); } diff --git a/hrms/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/hrms/public/js/hierarchy_chart/hierarchy_chart_mobile.js index 3505ef1fc2..eb25bcf289 100644 --- a/hrms/public/js/hierarchy_chart/hierarchy_chart_mobile.js +++ b/hrms/public/js/hierarchy_chart/hierarchy_chart_mobile.js @@ -11,12 +11,6 @@ hrms.HierarchyChartMobile = class { this.method = method; this.doctype = doctype; - this.page.main.css({ - "min-height": "300px", - "max-height": "600px", - overflow: "auto", - position: "relative", - }); this.page.main.addClass("frappe-card"); this.nodes = {}; @@ -155,6 +149,15 @@ hrms.HierarchyChartMobile = class { }) .then((r) => { if (r.message.length) { + me.page.body.find("#hierarchy-empty-root").remove(); + + me.page.main.css({ + "min-height": "300px", + "max-height": "600px", + overflow: "auto", + position: "relative", + }); + let root_level = me.$hierarchy.find(".root-level"); root_level.empty(); @@ -171,6 +174,40 @@ hrms.HierarchyChartMobile = class { is_root: true, }); }); + } else { + me.page.body.find("#hierarchy-empty-root").remove(); + me.page.main.css({ + "min-height": "100%", + "max-height": "100%", + overflow: "auto", + position: "relative", + }); + + const empty = frappe.render_template("hierarchy_empty_state", { + doctype: me.doctype, + company: me.company, + can_create: frappe.model.can_create(me.doctype), + device_type: "mobile", + }); + + me.page.main.append(empty); + + (function () { + const root = document.getElementById("hierarchy-empty-root"); + if (!root) return; + try { + const rect = root.getBoundingClientRect(); + const windowHeight = window.innerHeight; + const height = Math.max(300, Math.floor(windowHeight - rect.top - 20)); + root.style.height = height + "px"; + root.style.overflow = "auto"; + root.style.position = "relative"; + } catch (e) {} + })(); + me.page.body.find("#add-doc-btn").on("click", () => { + frappe.route_options = { company: me.company }; + frappe.new_doc(me.doctype); + }); } }); } diff --git a/hrms/public/js/templates/hierarchy_empty_state.html b/hrms/public/js/templates/hierarchy_empty_state.html new file mode 100644 index 0000000000..3296822600 --- /dev/null +++ b/hrms/public/js/templates/hierarchy_empty_state.html @@ -0,0 +1,32 @@ + +
+
+
+ + + +
+ {{ __("You haven't created a {0} for {1} yet.", [__(doctype), __(company)]) }} +
+ + {% if can_create %} + {% if device_type == "desktop" %} + + {% else %} + + {% endif %} + {% endif %} + +
+
+
From d1ba2d6334a9b758b3e4212f2b835c99c4e10ee6 Mon Sep 17 00:00:00 2001 From: Krishna Shirsath Date: Thu, 29 Jan 2026 15:21:52 +0530 Subject: [PATCH 2/2] fix(organizational-chart): update can_create check for empty state rendering --- hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js index 7e0d2ab389..d1a05db5ce 100644 --- a/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js +++ b/hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js @@ -259,7 +259,7 @@ hrms.HierarchyChart = class { const empty_html = frappe.render_template("hierarchy_empty_state", { doctype: me.doctype, company: me.company, - can_create: frappe.model.can_create("Employee"), + can_create: frappe.model.can_create(me.doctype), device_type: "desktop", });