How to Create Powerbox Editors in Odoo 18

With the release of Odoo 18, the platform introduces a new and highly flexible way to handle dynamic text input: Powerbox Editors. Powerbox editors integrate free-text input with interactive widgets, such as user mentions, tags, commands, or dynamic references, similar to modern UX patterns found in Slack, Notion, or Discord.

In this blog, we’ll walk you through the concept, usage, and step-by-step implementation of Powerbox Editors in Odoo 18.

Powerbox

A Powerbox is a smart interface component built into rich text editors. In platforms like Odoo 18, users can activate it by typing a / (slash) while editing text. This action opens a contextual menu that lists available commands or tools, grouped by category. It helps users quickly insert elements or perform editor-specific actions directly from the typing area, streamlining their workflow.

Creating a Custom Editor in Odoo

The editor automatically creates a single Powerbox instance and stores it in its powerbox variable; you should never create another one yourself. If you need to alter the Powerbox’s commands or settings, supply your custom options when you initialize the editor, before it starts up.

/** @odoo-module **/import { Plugin } from "@html_editor/plugin";import { _t } from "@web/core/l10n/translation";import { renderToElement } from "@web/core/utils/render";import { KNOWLEDGE_PLUGINS } from "@knowledge/editor/plugin_sets";export class ArticleDocumentPlugin extends Plugin {   static id = "articleDocument";   static dependencies = ["history", "dom"];   resources = {       user_commands: [           {               id: "insertArticleDocument",               title: _t("Document"),               description: _t("Insert Documents"),               icon: "fa-list",               run: this.insertArticleDocument.bind(this),           },       ],       powerbox_items: [           {               categoryId: "knowledge",               commandId: "insertArticleDocument",           }       ],   };insertArticleDocument() {       const articleDocumentBlueprint = renderToElement("module_name.ArticleDocumentBlueprint");this.dependencies.dom.insert(articleDocumentBlueprint);       this.dependencies.history.addStep();   }}// Register the plugin in the Knowledge editorKNOWLEDGE_PLUGINS.push(ArticleDocumentPlugin);

This plug-in adds a new “Document” command to the Knowledge editor. When users type /document (or pick it from the Powerbox), the plug-in injects a predefined “ArticleDocumentBlueprint” snippet into the article and logs the change for undo/redo.

Below is the XML template associated with this code:

<?xml version="1.0" encoding="UTF-8"?><templates>   <t t-name="module_name.ArticleDocumentBlueprint">       <div data-embedded="DocumentContent" contenteditable="true"><!-- Here add your template for document plugin-->       </div>   </t></templates>

This XML defines a template named ArticleDocumentBlueprint, which is used by the plugin to insert a custom, editable block into the editor. The <div> with data-embedded="DocumentContent" marks it as an embeddable component, and contenteditable="true" allows users to directly edit its content.

This approach lets us add a custom plugin to the Powerbox. The image below shows the result.

Powerbox Editors in Odoo 18 make text fields more powerful and easier to use. You can add custom tools or menus that appear when needed, helping users work faster. Use this feature wisely, and your editor will become a handy all-in-one tool for your Odoo app.

To read more about creating Powerbox editors in Odoo 17, refer to our blog How to Create Powerbox Editors in Odoo 17