+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+ + Hierarchical Chart Widget
+
+ Hierarchical display of Parent/Child Model
+ 
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This feature allows to view parent/child of the model as a hierarchical chart.
+ This widget can be used to model which has parent_id and child_ids
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Better and simpler view of the model's child/parents..
+
+
+ Better and simpler view of the model's child/parents..
+
+
+ Traverse into Parent node and Child node
+
+
+ Traverse into Parent node and Child node
+
+
+ Ability to view model's parent/child by their relations in a form of hierarchy chart.
+
+
+
+ Ability to view model's parent/child by their relations in a form of hierarchy chart.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+ + 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. +
+
+
+
+ 
+ 
+ 
+
+
+ + We can check some other cases where we can use this widget 'org_chart'. +
+
+
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ 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..ff6620005
--- /dev/null
+++ b/hierarchical_chart_widget/static/src/js/org_chart.js
@@ -0,0 +1,47 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+const { Component,onWillStart,useState,onWillUpdateProps} = owl;
+import { useService } from "@web/core/utils/hooks";
+export class OrgChart extends Component {
+ static template = 'CustomerChartWidget'
+ setup(){
+ super.setup();
+ this.orm = useService('orm')
+ var self = this
+ this.OrgState = useState({
+ data: {},
+ });
+ onWillStart( async() => {
+ console.log(this.props.record.resModel)
+ var model = this.props.record.resModel
+ await this.DepartmentDetails(this.props.record.data.id,model)
+ })
+ onWillUpdateProps(async (nextProps) => {
+ var model = this.props.record.resModel
+ await this.DepartmentDetails(nextProps.record.data.id,model);
+ });
+ }
+ async DepartmentDetails(department_id,model){
+ //----fetching the details for template
+ var self=this
+ self.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)
+ }
+}
+registry.category("fields").add("org_chart", OrgChart);
\ No newline at end of file
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..2d98c0b48
--- /dev/null
+++ b/hierarchical_chart_widget/static/src/scss/org_template_style.scss
@@ -0,0 +1,47 @@
+/* CSS for Organization Chart */
+
+/* Base styles for organization chart container */
+.org-chart {
+ position: relative;
+}
+
+/* Base styles for organization chart nodes */
+.org-node {
+ background-color: #f0f0f0;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 10px;
+ width:max-content;
+}
+h3{
+}
+
+/* Styles for parent node */
+.parent-node {
+ background-color: #cce5ff; /* Example color */
+ width:max-content;
+}
+
+/* Styles for self node */
+.self-node {
+ position: absolute;
+ top: 70px; /* Adjust as needed */
+ left: 50%; /* Center horizontally */
+ transform: translateX(-50%); /* Center horizontally */
+}
+
+/* Styles for children nodes */
+.org-children {
+ position: absolute;
+ top: 140px; /* Adjust as needed */
+ left: 0;
+ width: 100%;
+ display: flex;
+ 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..77c6d5002
--- /dev/null
+++ b/hierarchical_chart_widget/static/src/xml/org_chart_template.xml
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ HIERARCHY
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+