How to integrate an owl component in a website page?

[helmidhaoui]

How to integrate an owl component in an Odoo website page?

[macagua]

@helmidhaoui to integrate an owl component into an Odoo website page, you need to follow these steps:

• Define your owl component as a class that extends the Component class from owl. You can use the setup method to initialize the component state and the xml helper to define the component template. For example:

const { Component, useState } = owl;
const { xml } = owl.tags;

class MyComponent extends Component {
  setup() {
    this.state = useState({ value: 1 });
  }

  increment() {
    this.state.value++;
  }
}

MyComponent.template = xml`<div t-on-click="increment">
  <t t-esc="state.value" />
</div>`;

• Save your component in a JavaScript file (e.g. my_component.js) and your template in an XML file (e.g. my_component.xml) in the same folder. Make sure to add the owl="1" attribute to your template tag to indicate that it is an owl template. For example:

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
  <t t-name="myaddon.MyComponent" owl="1">
    <div t-on-click="increment">
      <t t-esc="state.value" />
    </div>
  </t>
</templates>

• Add your javascript and xml files to an assets bundle in the manifest file of your addon. For example:

{
  'name': 'My Addon',
  'version': '1.0',
  'depends': ['web'],
  'data': [
    'views/assets.xml',
  ],
  'qweb': [
    'static/src/xml/my_component.xml',
  ],
  'application': True,
}

• In the assets.xml file, define a bundle that is inherited from the web.assets_frontend bundle and includes your JavaScript file. For example:

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
  <template id="assets_frontend" inherit_id="web.assets_frontend" name="My Addon Assets">
    <xpath expr="." position="inside">
      <script type="text/javascript" src="/myaddon/static/src/js/my_component.js"/>
    </xpath>
  </template>
</odoo>

• To use your component in an existing website page, you need to mount it to a DOM element using the mount method. You can do this in a script tag inside the page template or in a separate JavaScript file that is also included in the assets bundle. For example:

<div id="my-component-container"></div>
<script>
  owl.utils.whenReady().then(() => {
    const myComponent = new MyComponent();
    myComponent.mount(document.getElementById("my-component-container"));
  });
</script>

Alternatively, you can create a website snippet for your component using the SnippetEditor class from web_editor. You can find more details on how to do this in [this blog post](^5^).

For more information on how to use owl components in Odoo, you can refer to the following sources:

• [Owl Components — Odoo 16.0 documentation](^3^)
• [Using Odoo v16 OWL Component inside existing website page - Stack Overflow](^4^)
• [Odoo Web Library: OWL Component | Odoo 16 Development Book](^1^)

Source: Conversation with Bing, 11/19/2023
(1) How to Create Odoo Web Library(OWL) Component in Odoo 15 - Cybrosys. https://www.cybrosys.com/blog/how-to-create-odoo-web-libraryowl-component-in-odoo-15.
(2) Owl Components — Odoo 16.0 documentation. https://www.odoo.com/documentation/16.0/developer/reference/frontend/owl_components.html.
(3) Using Odoo v16 OWL Component inside existing website page. https://stackoverflow.com/questions/76845183/using-odoo-v16-owl-component-inside-existing-website-page.
(4) Odoo Web Library: OWL Component | Odoo 16 Development Book. https://www.cybrosys.com/odoo/odoo-books/odoo-16-development/odoo-web-library/.
(5) . https://bing.com/search?q=owl+component+Odoo+website.
(6) undefined. https://www.odoo.com/documentation/master/developer/tutorials/discover_js_framework/01_owl_components.html.
(7) undefined. https://www.cybrosys.com/blog/an-overview-of-owl-components-in-odoo-16.
(8) undefined. https://github.com/odoo/owl.

[flotho]

Hi @helmidhaoui
odoo/odoo#151490