Odoo custom field to kanban grouped stage column

Question

I added a new custom field(many2many) to the model hr.recruitment.stage ,please refer to the below image for reference,

And trying to display it in the grouped kanban column view of hr.applicant, please refer to the below image for reference

Here I added the subtitle text by writing a custom addon, in the path static/src/xml/filename.xml

<?xml version="1.0"?>
<templates>
    <t t-inherit="web.KanbanView.Group" t-inherit-mode="primary">
        <xpath expr="//div[hasclass('o_kanban_header_title')]" position="after">
            <span>Subtitle</span>
        </xpath>
    </t>
</templates>

in the place of subtitle, I want to display the newly added many2many field values from the hr.recruitment.stage model, here I referred to kanban_column.js and I'm not able to figure out how to pass the value of the newly added field(many2many) to the javascript and display the value in the grouped kanban column view of hr.applicant. I request you to please guide me to achieve this and it will be very useful for me, thanks in advance.

Answer 1

First, you need to add the x_recruiters field to the kanban fields:

<record id="hr_kanban_view_applicant" model="ir.ui.view">
    <field name="name">hr.kanban.view.applicant</field>
    <field name="model">hr.applicant</field>
    <field name="inherit_id" ref="hr_recruitment.hr_kanban_view_applicant"/>
    <field name="arch" type="xml">
        <progressbar position="before">
            <field name="x_recruiters"/>
        </progressbar>
    </field>
</record>  

It will automatically read and add the x_recruiters field to the data object.

Then add the recruiters names instead of the Subtitle text:

<t t-if="widget.data_records.length != 0">
    <t t-foreach="widget.data_records[0].data.x_recruiters.data" t-as="stage">
        <span t-esc="stage.data.display_name"/>
        <br/>
    </t>
</t>

Edit:

You can alter the kanban column to read the recruiters from the stage model and show them after it is rendered.

odoo.define('kanban_group_extended.KanbanColumn', function (require) {
    "use strict";
    var KanbanColumn = require('web.KanbanColumn');

    KanbanColumn.include({
        renderElement: function () {
           this._super();
           this.set_recruiters();
        },
        set_recruiters: function() {
            var self = this;
            var kanban_header_title = self.$('.o_kanban_header_title');
            this._rpc({
                model: self.relation,
                method: 'read',
                args: [[self.id], ["x_recruiters"]],
            }).then(function (records) {
                return self._rpc({
                        model: self.data.fields["x_recruiters"].relation,
                        method: 'read',
                        args: [records[0]["x_recruiters"], ['display_name']],
                    }).then(function (values) {
                        _.each(values, function (value) {
                            kanban_header_title.after("<span>" + value['display_name'] + "</span><br/>");
                        });
                    });
            });
        },
    });
});

Add the js file to the assets backend:

<template id="assets_backend" inherit_id="web.assets_backend" name="Kanban Backend Assets">
    <xpath expr="//link[last()]" position="after">
        <script type="text/javascript" src="/kanban_group_extended/static/src/js/KanbanColumn.js"></script>
    </xpath>
</template>