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.