diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
index 38a48a24018..ae4d4296991 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
@@ -7,7 +7,7 @@ import { Record } from "@web/views/record";
 import { ViewButton } from "@web/views/view_button/view_button";
 import { useViewCompiler } from "@web/views/view_compiler";
 
-import { OrgChartCompiler } from "./hierarchy_compiler";
+import { HierarchyCompiler } from "./hierarchy_compiler";
 import { getFormattedRecord } from "@web/views/kanban/kanban_record";
 
 export class HierarchyCard extends Component {
@@ -27,7 +27,7 @@ export class HierarchyCard extends Component {
         classNames: "",
     };
     static template = "hr_org_chart.HierarchyCard";
-    static Compiler = OrgChartCompiler;
+    static Compiler = HierarchyCompiler;
 
     setup() {
         const { templates } = this.props;
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js
new file mode 100644
index 00000000000..1cfa0407352
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_compiler.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+import { KanbanCompiler } from "@web/views/kanban/kanban_compiler";
+
+export class HierarchyCompiler extends KanbanCompiler {
+    /**
+     * @override
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element}
+     */
+    compileField(el, params) {
+        const fieldName = el.getAttribute("name");
+        return super.compileField(el, {
+            ...(params || {}),
+            recordExpr: "__record__",
+            dataPointId: "__comp__.props.node.id",
+            formattedValueExpr: `record['${fieldName}'].value`,
+        });
+    }
+
+    compileButton(el, params) {
+        return super.compileButton(el, {
+            ...(params || {}),
+            recordExpr: "__record__",
+        });
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index 7c0a3a3b784..cdb9da037bf 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -120,17 +120,19 @@ export class KanbanCompiler extends ViewCompiler {
     compileField(el, params) {
         let compiled;
         let isSpan = false;
+        const recordExpr = params.recordExpr || '__comp__.props.record';
+        const dataPointIdExpr = params.dataPointIdExpr || `${recordExpr}.id`;
         if (!el.hasAttribute("widget")) {
             isSpan = true;
             // fields without a specified widget are rendered as simple spans in kanban records
             const fieldId = el.getAttribute("field_id");
             compiled = createElement("span", {
-                "t-out": `__comp__.getFormattedValue("${fieldId}")`,
+                "t-out": params.formattedValueExpr || `__comp__.getFormattedValue("${fieldId}")`,
             });
         } else {
             compiled = super.compileField(el, params);
             const fieldId = el.getAttribute("field_id");
-            compiled.setAttribute("id", `'${fieldId}_' + __comp__.props.record.id`);
+            compiled.setAttribute("id", `'${fieldId}_' + ${dataPointIdExpr}`);
             // In x2many kanban, records can be edited in a dialog. The same record as the one of
             // the kanban is used for the form view dialog, so its mode is switched to "edit", but
             // we don't want to see it in edition in the background. For that reason, we force its
@@ -140,10 +142,10 @@ export class KanbanCompiler extends ViewCompiler {
             if (readonlyAttr) {
                 compiled.setAttribute(
                     "readonly",
-                    `__comp__.props.record.isInEdition || (${readonlyAttr})`
+                    `${recordExpr}.isInEdition || (${readonlyAttr})`
                 );
             } else {
-                compiled.setAttribute("readonly", `__comp__.props.record.isInEdition`);
+                compiled.setAttribute("readonly", `${recordExpr}.isInEdition`);
             }
         }
 
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 55b8d3b1f94..6e3ab652d8b 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -309,9 +309,10 @@ export class ViewCompiler {
         if (tag === "a" && type === "url") {
             tag = "button";
         }
+        const recordExpr = params.recordExpr || "__comp__.props.record";
         const button = createElement("ViewButton", {
             tag: toStringExpression(tag),
-            record: "__comp__.props.record",
+            record: recordExpr,
         });
 
         assignOwlDirectives(button, el);
@@ -368,13 +369,14 @@ export class ViewCompiler {
         const fieldId = el.getAttribute("field_id");
 
         const field = createElement("Field");
+        const recordExpr = params.recordExpr || "__comp__.props.record";
         field.setAttribute("id", `'${fieldId}'`);
         field.setAttribute("name", `'${fieldName}'`);
-        field.setAttribute("record", params.recordExpr || "__comp__.props.record");
+        field.setAttribute("record", recordExpr);
         field.setAttribute("fieldInfo", `__comp__.props.archInfo.fieldNodes['${fieldId}']`);
         field.setAttribute(
             "readonly",
-            `__comp__.props.archInfo.activeActions?.edit === false and !__comp__.props.record.isNew`
+            `__comp__.props.archInfo.activeActions?.edit === false and !${recordExpr}.isNew`
         );
 
         if (el.hasAttribute("widget")) {