Creating a Custom Show More / Show Less OWL Widget

For Text Fields in Odoo

Improve UX for Long Text Fields in Odoo

In many Odoo applications — like CRM, inventory, helpdesk, or sales management — fields like product descriptions, internal notes, or comments can often become quite lengthy. Displaying the entire content of these fields in List (Tree) views or even Form views can clutter the interface and degrade the overall user experience.

We can implement a Show More / Show Less toggle for text fields to solve this. This approach lets users preview a snippet of text and expand it on demand, offering a cleaner and more organised interface.

In this blog post, we'll walk you through how to create a custom OWL-based field widget for Odoo 16 that:

Displays a text preview with a Show More / Show Less link in views.
Automatically adjusts the display style based on the current view type (Form or List).
Keeps your backend UI clean and performant without the need to reload views.

What This Guide Covers

By the end of this article, you’ll understand how to:

Create a reusable OWL widget that extends Odoo’s CharField
Add a dynamic preview with character or line limits based on view type
Implement a Show More / Show Less toggle using OWL’s reactive state

OWL in Odoo Field Widgets

Odoo’s modern backend uses OWL (Odoo Web Library) for reactive and component-based UI development.

You can easily create your custom widgets by:

Inheriting a base field class (like CharField or Field)
Defining an OWL template for rendering the widget
Registering the widget with Odoo via the registry

JavaScript: Defining the Custom Field Widget

First, create a JavaScript file inside your custom module at:

static/src/js/show_more_text.js


/** @odoo-module **/
import { CharField } from "@web/views/fields/char/char_field";
import { registry } from "@web/core/registry";
import { useState } from "@odoo/owl";
class ShowMoreText extends CharField {
    setup() {
        super.setup();
        this.state = useState({ expanded: false });
        this.maxChars = 100; // limit characters shown in collapsed mode
        this.maxLines = 2;  // number of lines to show in List view
    }
    get isTruncated() {
        const text = this.props.value || "";
        return text.length > this.maxChars;
    }
    get shortText() {
        const text = this.props.value || "";
        if (!this.isTruncated) return text;
        return text.slice(0, this.maxChars) + "...";
    }
    toggle() {
        this.state.expanded = !this.state.expanded;
    }
}
ShowMoreText.template = "your_module.ShowMoreText";
registry.category("fields").add("show_more_text", ShowMoreText);

Key points

Inherits from CharField.
Uses OWL’s useState to manage expanded/collapsed state.
Defines a character limit for the preview (maxChars) and number of lines (maxLines).
Provides computed properties isTruncated and shortText to handle the display logic.
The toggle() method switches between showing the full text or the preview.

XML: Creating the OWL Template

Next, define your widget’s template in:

static/src/xml/show_more_text.xml


<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="your_module.ShowMoreText" owl="1">
        <div t-attf-style="white-space: pre-wrap; overflow: hidden; max-height: #{state.expanded ? 'none' : maxLines + 'em'};">
            <t t-if="state.expanded">
                <span><t t-esc="props.value"/></span>
            </t>
            <t t-else="">
                <span><t t-esc="shortText"/></span>
            </t>
        </div>
        <t t-if="isTruncated">
            <a href="#" class="text-primary" t-on-click.prevent="toggle">
                <t t-esc="state.expanded ? ' Show Less' : ' Show More'"/>
            </a>
        </t>
    </t>
</templates>

Highlights

A <div> displays the text with either a truncated or full version based on the expanded state.
Uses max-height and overflow CSS rules to control visibility.
A clickable link toggles the display mode using the toggle method.
Reactive rendering is handled by OWL’s state system.

Add JS and XML to Your Manifest

To make sure your widget is loaded by Odoo, register your JS and XML files in your module’s manifest:


'assets': {
    'web.assets_backend': [
        'your_module/static/src/js/show_more_text.js',
        'your_module/static/src/xml/show_more_text.xml',
    ],
},

How to Use

To use your custom widget in a view, simply add it to a field in your XML view definition:


<field name="description" widget="show_more_text"/>

This tells Odoo to use your custom ShowMoreText widget for the description field in the view.

Visual Behavior

In collapsed mode:

➝ Only the first maxChars characters or maxLines lines are shown, followed by a Show More link.

In expanded mode:

➝ Full text is visible along with a Show Less link.

All of this happens without a page reload.

Use Cases for OWL Text Toggle Widget

With this simple yet powerful OWL widget, you can significantly improve the length of text fields displayed in Odoo’s backend interface. It enhances usability by preventing information overload while still offering full visibility when needed.

This pattern is perfect for:

Notes fields
Product descriptions
Customer messages

Found this article useful?

Explore more development guides and solutions from our team.

Check out more posts

في Odoo Development

Vijay Elangovan 6 مايو, 2025

مدوناتنا

أرشفة

تسجيل الدخول حتى تترك تعليقاً

Creating Custom XLSX Import Wizard in Odoo