fix(organizational-chart): show empty state when no data is available by krishna-254 · Pull Request #4024 · frappe/hrms

krishna-254 · 2026-01-28T08:23:12Z

What does this PR do?
Adds a proper empty state to the Organizational Chart when no employees or reporting relationships are available.
Fixes #3940

What problem does it solve?
Prevents a blank or broken-looking Organizational Chart when data is missing

Screenshots

Summary by CodeRabbit

New Features
- Added an empty-state display when no hierarchy data exists, including localized messaging and a contextual call-to-action button that routes to create a new document.
- Included the empty-state template as a bundled resource.
Improvements
- Improved responsive behavior for desktop and mobile with tightened height constraints and scroll handling for both populated and empty views.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Fixes frappe#3940

coderabbitai · 2026-01-28T08:30:20Z

Walkthrough

The changes remove centralized page styling and inline it within render logic for both desktop and mobile hierarchy chart modules, delete the setup_page_style() method, and add empty-state rendering and interactions when no hierarchy data exists. A new hierarchy_empty_state.html template was added and imported into the bundle. Both desktop and mobile implementations adjust container sizing/overflow per branch and attach a click handler on the empty-state action to route to document creation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding an empty state display to the organizational chart when no data is available.
Linked Issues check	✅ Passed	The PR fully addresses issue `#3940` by implementing an empty state UI with guidance for users when no organizational hierarchy data exists.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the empty state feature for the organizational chart as specified in issue `#3940`.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js (1)
126-158: Fix runtime error: setup_page_style() no longer exists.
Line 157 calls a method that isn’t defined in this class anymore, so exporting will throw and the layout won’t be restored. Replace it with an inline restore or reintroduce a valid helper.
🐛 Proposed fix (inline restore after export)
-		this.setup_page_style();
+		// Restore layout after export (setup_page_style was removed)
+		const hasEmptyState = !!document.getElementById("hierarchy-empty-root");
+		this.page.main.css({
+			"min-height": hasEmptyState ? "100%" : "300px",
+			"max-height": hasEmptyState ? "100%" : "700px",
+			overflow: hasEmptyState ? "" : "auto",
+			position: hasEmptyState ? "" : "relative",
+			left: "",
+			top: "",
+		});

🤖 Fix all issues with AI agents

In `@hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js`:
- Around line 259-263: The empty-state template render uses a hard-coded doctype
for permission check; update the can_create call in the hierarchy_empty_state
render so it uses the instance doctype (me.doctype) instead of the literal
"Employee" — locate the render_template call that builds empty_html
(hierarchy_empty_state) and replace frappe.model.can_create("Employee") with
frappe.model.can_create(me.doctype) so CTA visibility honors the class
parameterization.

hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js

…ndering

github-actions · 2026-02-14T00:38:54Z

This pull request is being marked as inactive because of no recent activity.
If your PR hasn't been reviewed, it's likely because it doesn't fullfill the contribution guidelines. Please read them carefully and fix the pull request. When you are sure all items are checked, please ping relevant codeowner in the comment. Be nice, they have a lot on their plate too.

It will be closed in 3 days if no further activity occurs.
Thank you for contributing!

github-actions · 2026-03-04T00:38:06Z

This pull request is being marked as inactive because of no recent activity.
If your PR hasn't been reviewed, it's likely because it doesn't fullfill the contribution guidelines. Please read them carefully and fix the pull request. When you are sure all items are checked, please ping relevant codeowner in the comment. Be nice, they have a lot on their plate too.

It will be closed in 3 days if no further activity occurs.
Thank you for contributing!

github-actions · 2026-03-20T00:39:20Z

This pull request is being marked as inactive because of no recent activity.
If your PR hasn't been reviewed, it's likely because it doesn't fullfill the contribution guidelines. Please read them carefully and fix the pull request. When you are sure all items are checked, please ping relevant codeowner in the comment. Be nice, they have a lot on their plate too.

It will be closed in 3 days if no further activity occurs.
Thank you for contributing!

asmitahase

Think simple, much simpler.

asmitahase · 2026-03-26T12:22:53Z

hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js

+				} 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(me.doctype),
+						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);
+					});


All these calculations aren't required here.
Just do a count call at the beginning in organization_chart.js and render the empty state html there if the employee count is 0.

This will need setting up the company filter outside the chart object.

asmitahase · 2026-03-26T12:26:13Z

hrms/public/js/templates/hierarchy_empty_state.html

+  <div class="">
+    <div class="empty-apps-state">
+      <svg class="icon icon-xl" style="stroke: var(--text-light);">
+        <use href="#icon-small-file"></use>


use user-plus icon

Or pass a template variable to reuse this someplace else

Like Team Updates 😁

asmitahase · 2026-03-26T12:28:28Z

hrms/public/js/templates/hierarchy_empty_state.html

+        <use href="#icon-small-file"></use>
+      </svg>
+      <div class="mt-4 mb-2">
+        {{ __("You haven't created a {0} for {1} yet.", [__(doctype), __(company)]) }}


Keep user messages short and human, something like "You haven't created any Employee for <company_name>"

asmitahase · 2026-03-26T12:30:14Z

hrms/public/js/templates/hierarchy_empty_state.html

+            class="btn btn-default btn-sm btn-new-doc hidden-xs"
+            id="add-doc-btn"
+          >
+            {{ __("Create a new {0}", [__(doctype)]) }}


Keep the labels short too, "Create New" or simply "Add Employee" should suffice

fix(organizational-chart): show empty state when no data is available

b7f006b

Fixes frappe#3940

coderabbitai bot reviewed Jan 28, 2026

View reviewed changes

hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js Show resolved Hide resolved

fix(organizational-chart): update can_create check for empty state re…

d1ba2d6

…ndering

krishna-254 force-pushed the fix/empty-state-organizational-chart branch from 94b9a0e to d1ba2d6 Compare January 29, 2026 10:11

github-actions bot added the Inactive label Feb 14, 2026

asmitahase removed the Inactive label Feb 16, 2026

github-actions bot added the Inactive label Mar 4, 2026

ruchamahabal removed the Inactive label Mar 4, 2026

github-actions bot added the Inactive label Mar 20, 2026

ruchamahabal removed the Inactive label Mar 20, 2026

asmitahase requested changes Mar 26, 2026

View reviewed changes

Conversation

krishna-254 commented Jan 28, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Feb 14, 2026

Uh oh!

github-actions bot commented Mar 4, 2026

Uh oh!

github-actions bot commented Mar 20, 2026

Uh oh!

asmitahase left a comment

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

asmitahase Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

krishna-254 commented Jan 28, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 28, 2026 •

edited

Loading