Enable Dark Mode!
how-to-send-chat-messages-and-attachments-to-discuss-using-owl-in-odoo.jpg
By: Abhin K

How to send chat messages & attachments to Discuss using Owl in Odoo

Technical

Introduction

Owl.js, the innovative JavaScript framework used in Odoo, provides a seamless way to build interactive and dynamic user interfaces. In this blog post, we will explore how to leverage Owl.js to send chat messages and attachments to other users' chats in Odoo without relying on backend services.

How to Send Chat Messages and Attachments in Owl.js:

Conversion Function (dataUrlToBlob):

We begin with a versatile function, dataUrlToBlob, designed to convert base64 data URLs into Blob objects. This function plays a crucial role in transforming the base64 representation of an image into a format suitable for attachments.

function dataUrlToBlob(data, type) {
  const binData = window.atob(data);
  const uiArr = new Uint8Array(binData.length);
  uiArr.forEach((_, index) => (uiArr[index] = binData.charCodeAt(index)));
  return new Blob([uiArr], { type });
}

Owl.js Component:

Our Owl.js component, named MyComponent, is at the core of this functionality. It encompasses the user interface, logic, and interaction with Odoo services.

class MyCompoenent extends owl.Component {
  static template = owl.xml`
    <div>
      <t t-foreach="state.users" t-as="user" t-key="user_index">
        <div t-out="user.name" t-on-click="() => this.sentMessage(user.id)"/>
      </t>
    </div>
  setup() {
    this.threadService = useService("mail.thread");
    this.attachmentUploadService = useService("mail.attachment_upload");
    this.message = "This is demo Message"
    this.attachment = "data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASw....." // a demo base64 image
  }
  async sentMessage(userId){
    const thread = await this.threadService.getChat({ userId }) // alternatively you can use partner_id as well
    const postData = this.postData
    const attachment = await this.uploadData(thread)
    postData.attachments = [attachment]
    await this.threadService.post(thread, this.message, postData)
  }
  get ImageFile() {
    const name = "My Image";
    const data = this.attachment.split(",")[1];
    const type = 'image/png'
    return new File([dataUrlToBlob(data, type)], name, { type });
  }
  get postData() { // Adjust the values according to your needs
    return {
        attachments: [],
        isNote: false,
        mentionedChannels: [],
        mentionedPartners: [],
        cannedResponseIds: [],
        parentId: null,
    }
  }
  uploadData(thread) {
    return this.attachmentUploadService.uploadFile({thread}, this.ImageFile);
  }
}

Setup Method

The setup method is executed when the component is initialized. In this method, we perform crucial setup tasks. We initialize the threadService and attachmentUploadService from Odoo. These services provide the necessary functionalities to interact with chat threads and handle attachments.

SentMessage Method

The sentMessage method orchestrates the entire process of sending a message to a user's chat, including attaching a file.This method takes a userId as a parameter, retrieves the associated chat thread using threadService, and then assembles the necessary data for the message. It includes the uploaded attachment and uses the threadService to post the message to the chat.

ImageFile Getter

The ImageFile getter transforms the base64 image data into a File object, making it suitable for attachment uploads. Here, we extract the base64-encoded data from the attachment property, convert it into a Blob using the dataUrlToBlob function, and then create a File object with a specified name and type.

PostData Getter

The postData getter defines the structure for the message data, including attachment-related fields.This getter provides a template for the data structure expected by the threadService.post method. It includes an empty array for attachments and other optional fields.

UploadData Method

The uploadData method handles the upload of the image as an attachment, returning the attachment object.Here, we utilize the attachmentUploadService to upload the ImageFile to the specified chat thread, returning the attachment object.

In summary, these methods collectively enable the smooth integration of chat messages with attachments using Owl.js in an Odoo environment. The setup method ensures the essential services are available, while the sentMessage, ImageFile, postData, and upload data methods work in tandem to create and 

Conclusion

Empowered by Owl.js, sending chat messages with attachments in Odoo becomes an intuitive and efficient process. This blog has demonstrated a streamlined approach to leverage Owl.js components and services, showcasing how to interact with the underlying infrastructure to enhance user engagement within the Odoo environment.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message