Enable Dark Mode!
how-to-use-the-emoji-picker-and-file-viewer-hook-in-odoo-17.jpg
By: Ruksana P

How to Use the Emoji Picker & File Viewer Hook in Odoo 17

Technical Odoo 17

The owl framework is developed by Odoo to fulfill the front-end requirements of the Odoo platform. In this blog, we are discussing useFileViewer and useEmojiPicker front-end hooks to use emoji functionality and PDF preview capability in our custom module.

1.useFileViewer Hook

The useFileViewer is used to get a fullscreen view of an image or document by clicking them.

For example, we can add an option for attachment by adding the input type as a file.

  <input type="file" id="fileInput"
                                   accept=".txt,.pdf,.ppt,.doc,.xls,.docx,.pptx,.xlsx"
                                   t-ref="fileInput" style="display:none;"
                                   t-on-change="viewFilePreview"/>

How to Use the Emoji Picker & File Viewer Hook-cybrosys

By clicking on a PDF file attachment, we can get a full-screen view of the document.

How to Use the Emoji Picker & File Viewer Hook-cybrosys

In the full-screen preview of the attachment, users can access options such as downloading, printing, entering presentation mode, and utilizing advanced tools.

How to Use the Emoji Picker & File Viewer Hook-cybrosys

To achieve this type of view for the custom module, we can add the following code,

XML file:
<?xml version="1.0" encoding="utf-8" ?>
<templates id="template">  
    <t t-name="ViewPdfFile" owl="1">
   <div style="width: 200px;display: block;text-align: center;"
               t-on-click="() => this.viewDocument(data.attachment_id)"/>
</t>
</templates>

For example,  Within this template, there's a <div> element with specified styles and attributes, including a t-on-click event calling a function to view a document with the provided attachment ID.

/** @odoo-module **/
import {Component} from "@odoo/owl";
import { useService } from '@web/core/utils/hooks';
import { useFileViewer } from "@web/core/file_viewer/file_viewer_hook";
export class ViewPdfFile extends Component {
    async setup(){
        this.store = useService("mail.store");
        this.fileViewerInstance = new useFileViewer();
}
    async viewDocument(attachment){
        let mimetype;
        let type= attachment[1].split('.').pop()
        if (type === 'pdf') {
        mimetype = 'application/pdf';
        } else if (type === 'png') {
        mimetype = 'image/png';
        }
        else if (type === 'jpeg'){
        mimetype = 'image/jpeg';
        }
        const preview = this.store.Attachment.insert({
            id: attachment[0],
            filename: attachment[1],
            name: attachment[1],
            mimetype: mimetype
        });
        this.fileViewerInstance.open(preview);
    }
}
ViewPdfFile.template = ViewPdfFile;

We can create new instances of the useFileViewer hook to open PDF files. We have an async function named viewDocument that takes an attachment parameter. This function determines the mime type based on the file type (pdf, png, jpeg) and then inserts the attachment information into store.Attachment object. Finally, it opens the file using the this.fileViewerInstance.open() method.

2. useEmojiPicker Hook

This hook is used to display all available emojis on the popup when we click the emoji icon. Emoji plays a vital role in the communication.

How to Use the Emoji Picker & File Viewer Hook-cybrosys

To add the Emoji icon to the chat input area, add the following XML,

<?xml version="1.0" encoding="utf-8" ?>
<!-- WhatsappChatInput Template -->
<templates id="ChatInput" owl="1">
  <div class="border-top bg-white chat-input">
  <input type="text"  class="form-control chatbox-inputbox h-100 ms-3"
      id="chat_input" t-ref="textarea"  placeholder="Enter Message..."                               
         t-on-keyup="composeMessage"/>
     <i class="btn border-0 rounded-pill fa fa-smile-o"
               aria-label="Emojis"
               t-ref="emoji-button">
                            </i>
      </input>
   </div>
</t>
</templates>

In this, we have input text area to enter the message and emoji icon to add emoji.

Add the following js function,

/** @odoo-module **/
import {Component, useState, useRef } from "@odoo/owl";
import { useService } from '@web/core/utils/hooks';
import { useEmojiPicker } from "@web/core/emoji_picker/emoji_picker";
export class ChatInput extends Component {
    /* This function appears to initialize various properties and set up event listeners.*/
    setup() {
        this.inputRef = useRef('textarea')
        this.emojiRef = useRef('emoji-button')
        this.emojiPicker = useEmojiPicker(this.emojiRef, {onSelect :   
        this.emojiSelect.bind(this)})
    }
    /* Click function emoji*/
    emojiSelect(ev){
        var inputText = this.inputRef.el.value
        var cursorPosition = this.inputRef.el.selectionStart;
        var updatedText = inputText.substring(0, cursorPosition) +
            ev + inputText.substring(cursorPosition);
        this.inputRef.el.value = updatedText
    }
ChatInput.template = 'ChatInput';

For this, first, we have to import useEmojiPicker from the web module,

 this.emojiRef = useRef('emoji-button')
 this.emojiPicker = useEmojiPicker(this.emojiRef, {onSelect : this.emojiSelect.bind(this)})
    }

We can give our emoji ref to the hook, and add an on-select function to this hook.

By using the onselect function emojiSelect(ev) is meant to insert an emoji into an input field or a text area at the current cursor position.

Initially, the operation involves segregating the text segment prior to the cursor position, inserting the emoji, and then appending the text segment succeeding the cursor position.

The "useEmojiPicker" and "useFileViewer" hooks are utilized to integrate emoji functionality and PDF preview capability into the chat interface within the frontend module.


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



0
Comments



Leave a comment

 


whatsapp_icon
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