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

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.

1. How to Add Button in Chatter in Odoo 18 Enterprise

2. 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

3. 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:

4. 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>

5. 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.

6. 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.

7. 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", }); }, });

8. 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.

9. 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.

10. 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', }

11. 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.

12. 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

13. 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>

14. 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.

15. Enterprise

16. Enterprise

17. 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.

18. 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