How to Add Button in Chatter in Odoo 18 - Odoo Slides

How to Add Button in Chatter in
Odoo 18
Enterprise

Enterprise
Improving user experience in Odoo often involves customizing the
chatter, a central hub for communication and updates on specific
records. Adding custom buttons can streamline operations, enabling
users to trigger workflows or generate reports directly. This guide
outlines the steps to add a button to the chatter in Odoo 18,
providing code snippets to help you customize this functionality for
your business needs efficiently.
Introduction

Enterprise
Step 1: Create the Button in the Chatter
To introduce a button in the chatter, you'll need to create a new template
that extends the existing mail chatter template. Here’s how to do this:

Enterprise
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-name="important.Chatter" t-inherit="mail.Chatter"
t-inherit-mode="extension">
<xpath expr="//*[contains(@class, 'o-mail-Chatter-activity')]"
position="before">
<button class="btn btn-warning text-nowrap me-2"
t-att-class="{'my-2': !props.compactHeight }"
data-hotkey="shift+i"
t-on-click="markAsImportant">
<span>Mark as Important</span>
</button>
</xpath>
</t>
</templates>

Enterprise
This code snippet adds a "Mark as Important" button to the chatter. The
XML template extends the existing mail.Chatter, inserting the button in the
activity area with a warning color and a keyboard shortcut (Shift+i). When
clicked, the button triggers the markAsImportant JavaScript method.

Enterprise
Step 2: Define the Button's Functionality
Next, you need to implement the functionality that occurs when the button
is clicked by enhancing the Chatter component with a new method.

Enterprise
/** @odoo-module **/
import { Chatter } from "@mail/chatter/web_portal/chatter";
import { patch } from "@web/core/utils/patch";
patch(Chatter.prototype, {
async markAsImportant() {
await this.env.services.action.doActionButton({
type: "object",
resModel: this.props.threadModel,
resId: this.props.threadId,
name: "action_mark_as_important",
});
},
});

Enterprise
This code defines the markAsImportant function that will be triggered when
the button is clicked. It utilizes the patch function from Odoo’s core utilities
to enhance the existing Chatter functionality, allowing the button to trigger
a specific server-side action. The resModel and resId parameters
dynamically refer to the current model and record ID, while
action_mark_as_important indicates the server-side method to be executed.

Enterprise
Step 3: Implement the Logic in Your Model
Now, define the logic that updates the record when the button is clicked. For
this example, we will modify the sale.order model. Add the following code to
sale_order.py file.

Enterprise
from odoo import fields, models
class SaleOrder(models.Model):
_inherit = 'sale.order'
important = fields.Boolean("Important", default=False)
def action_mark_as_important(self):
"""Mark the record as important and post a message in chatter"""
for record in self:
record.important = True
record.message_post(
body="This record has been marked as important.")
return {
'type': 'ir.actions.client',
'tag': 'reload',
}

Enterprise
In this code, we create a Boolean field named important and define the
action_mark_as_important method. This method marks the record as
important and posts a message in the chatter.

Enterprise
Step 4: Add the Field to the View
To ensure that the new field appears in the form view, add it to the
appropriate view definition. Include the following XML code to add the field
in the sale.order form view

Enterprise
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<record id="sale_order_view_form" model="ir.ui.view">
<field name="name">sale.order.view.form.inherit.chatter.button</field>
<field name="model">sale.order</field>
<field name="inherit_id" ref="sale.view_order_form"/>
<field name="arch" type="xml">
<field name="date_order" position="after">
<field name="important" invisible="1"/>
</field>
</field>
</record>
</odoo>

Enterprise
This code adds the important field to the sale.order form, while keeping it
invisible.
Step 5: Update the Manifest File
Don’t forget to update the __manifest__.py file of your custom module to
include the newly created XML and JavaScript files.

Enterprise
Conclusion
By following these steps, you will have successfully added a button to the
chatter in Odoo 18. Clicking the "Mark as Important" button updates the
important field and posts a message in the chatter.
This functionality allows users to trigger specific actions directly from the
record's communication hub, enhancing interactions within the platform.
Customizing the chatter opens up numerous possibilities for improving user
experiences in Odoo.

For More Info.
Check our company website for related blogs
and Odoo book.
Check our YouTube channel for
functional and technical videos in Odoo.
Enterprise
www.cybrosys.com

How to Add Button in Chatter in Odoo 18 - Odoo Slides

More Related Content

Similar to How to Add Button in Chatter in Odoo 18 - Odoo Slides (20)

More from Celine George (20)

Recently uploaded (20)

How to Add Button in Chatter in Odoo 18 - Odoo Slides