+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/hierarchical_chart_widget/static/src/js/org_chart.js b/hierarchical_chart_widget/static/src/js/org_chart.js
new file mode 100644
index 000000000..a4c050345
--- /dev/null
+++ b/hierarchical_chart_widget/static/src/js/org_chart.js
@@ -0,0 +1,58 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { Component } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { onWillStart, onWillUpdateProps, useState } from "@odoo/owl";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+import { _t } from "@web/core/l10n/translation";
+export class OrgChart extends Component {
+ static template = "hierarchical_chart_widget.CustomerChartWidget";
+ static props = { ...standardFieldProps };
+ setup() {
+ super.setup();
+ this.orm = useService('orm');
+ this.OrgState = useState({
+ data: {},
+ });
+ onWillStart(async () => {
+ const model = this.props.record.resModel;
+ await this.DepartmentDetails(this.props.record.evalContextWithVirtualIds.id, model);
+ });
+ onWillUpdateProps(async (nextProps) => {
+ const model = nextProps.record.resModel;
+ await this.DepartmentDetails(nextProps.record.evalContextWithVirtualIds.id, model);
+ });
+
+ }
+ async DepartmentDetails(department_id, model) {
+ // Fetching the details for the template
+ this.OrgState.data = await this.orm.call(
+ 'hr.department',
+ 'get_child_dept',
+ [department_id, model]
+ );
+ }
+ onChildClick(id, ev) {
+ // On clicking the nodes it will be redirected to their page
+ const action = {
+ type: 'ir.actions.act_window',
+ res_model: ev.props.record.resModel,
+ res_id: id,
+ domain: [],
+ views: [
+ [false, "form"],
+ [false, "list"],
+ ],
+ name: "Schedule Log",
+ target: 'current',
+ };
+ ev.env.services.action.doAction(action);
+ }
+}
+export const orgChart = {
+ component: OrgChart,
+ displayName: _t("Widget"),
+ supportedTypes: ["many2one"],
+ extractProps: ({ attrs }) => ({}),
+};
+registry.category("fields").add("org_chart", orgChart);
diff --git a/hierarchical_chart_widget/static/src/scss/org_template_style.scss b/hierarchical_chart_widget/static/src/scss/org_template_style.scss
new file mode 100644
index 000000000..7df6eca78
--- /dev/null
+++ b/hierarchical_chart_widget/static/src/scss/org_template_style.scss
@@ -0,0 +1,19 @@
+/* CSS for Organization Chart */
+
+/* Base styles for organization chart container */
+.org-chart {
+ position: relative;
+}
+
+/* Styles for children nodes */
+.org-children {
+ top: 90px; /* Adjust as needed */
+ left: 0;
+ width: 100%;
+ justify-content: space-around;
+}
+
+/* Styles for child nodes */
+.child-node {
+ margin-top: px;
+}
diff --git a/hierarchical_chart_widget/static/src/xml/org_chart_template.xml b/hierarchical_chart_widget/static/src/xml/org_chart_template.xml
new file mode 100644
index 000000000..08ea51b34
--- /dev/null
+++ b/hierarchical_chart_widget/static/src/xml/org_chart_template.xml
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Hierarchical display of Parent/Child Model +
+Hierarchical Chart Widget +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Better and simpler view of the model's child/parents.
+
+
+
+
+
+
+
+
+ + Traverse into Parent node and Child node +
+
+
+
+
+
+
+
+
+ + Ability to view model's parent/child by their relations in a form of hierarchy chart. +
+
+
+
+
+
+
+
+
+
+ Hierarchical Chart Widget
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + When we choose parent for the department, We can see the hierarchical view of the Department. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + We can navigate through the nodes to reach the respective page. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Based on parent department we can see the respective hierarchy of the department. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Visual Parent/Child Relations in Hierarchy Chart
+
+
+
+
+
+
+
+
+
+ + Parent/Child Hierarchy View with Traversal
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 5th August, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+
+
+
+
+ + HIERARCHY +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+