Developing New Widgets for your Views in Owl
Download as PPTX, PDF1 like680 views
The document discusses integrating Odoo widgets and Owl components. It provides information on: 1. How to add Owl components to Odoo templates using XPath and registering components. 2. The three kinds of boundaries between Owl components and Odoo widgets - component to component, component to widget, and widget to component. It describes helpers for each case. 3. How to create a new field widget by subclassing AbstractFieldOwl and registering it in the field registry. 4. Notes on the Odoo environment and component lifecycle when integrating Owl and Odoo.
![Adding owl field widgets in
views
const AbstractField = require('web.AbstractFieldOwl);
class FieldBadge extends AbstractField {
_getClassFromDecoration(decoration) {
return `bg-${decoration.split('-')[1]}-light`;
}
}
FieldBadge.description = _lt("Badge");
FieldBadge.supportedFieldTypes = ['selection',
'many2one', 'char'];
FieldBadge.template = 'web.FieldBadge';
const registry = require('web.field_registry_owl');
registry
.add('badge', FieldBadge);
<field name="state" widget="badge"/>
It works for: form/list/kanban views
➔ Subclass AbstractFieldOwl (exported in
‘web.AbstractFieldOwl’)
➔ Register it in ‘web.field_registry_owl’
➔ Don’t forget to add widget=... in the arch](https://image.slidesharecdn.com/developingnewwidgetsforyourviewsinowl-201102093304/85/Developing-New-Widgets-for-your-Views-in-Owl-9-320.jpg)
![1. Component/Component
<t t-name="myModule.AddMyComponent"
t-inherit="web.SomeTemplate"
t-inherit-mode="extension"
owl="1">
<xpath expr="//div[@class='abc']"
position="inside">
<MyComponent mode="’readonly’" />
</xpath>
</t>
class MyComponent extends Component {
...
}
// register the new component as a sub component for
the parent
ParentComponent.components.MyComponent = MyComponent
Standard owl development.
➔ XPath the parent template to add a tag
<MyComponent/> where needed (it
works!!!)
➔ Add MyComponent to parent static
components key](https://image.slidesharecdn.com/developingnewwidgetsforyourviewsinowl-201102093304/85/Developing-New-Widgets-for-your-Views-in-Owl-12-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Developing New Widgets for your Views in Owl (20)
Ad
More from Odoo (20)
Ad
Recently uploaded (20)
Developing New Widgets for your Views in Owl
- 2. Assets Management How to load templates? How to write odoo-compatible code? Owl QWeb Renderer Old QWeb Engine
- 3. Communication with events Widget In Widgets: ● events bubble up widget tree ● generated with trigger_up ● caught with custom_events ● use underscores: “something_happened” In Components: ● events bubble up DOM tree ● generated with trigger ● caught with t-on- directive ● use dash: “something-happened” across boundaries Component Widget
- 4. From imperative to declarative Widgets are instantiated/updated manually Components are instantiated/updated by Owl
- 6. JS code style ● No static class fields ● No ultra modern ES features ● No inline template class MyComponent extends Component { static template = xml`<div>my template</div>`; static components = { SubComponent }; ... } class MyComponent extends Component { ... } MyComponent.template = 'myModule.MyComponent'; MyComponent.components = { SubComponent };
- 7. Owl templates Add a special attribute: owl=”1” for owl components <t t-name="AddToGoogleSpreadsheetMenu" owl="1"> <li class="o_menu_item o_add_to_spreadsheet" role="menuitem"> <a class="dropdown-item" href="#" t-on-click.prevent="_onAddToSpreadsheet"> Add to Google Spreadsheet </a> </li> </t>
- 8. View widgets in Owl <field name="payments_widget" widget="payment"/>
- 9. Adding owl field widgets in views const AbstractField = require('web.AbstractFieldOwl); class FieldBadge extends AbstractField { _getClassFromDecoration(decoration) { return `bg-${decoration.split('-')[1]}-light`; } } FieldBadge.description = _lt("Badge"); FieldBadge.supportedFieldTypes = ['selection', 'many2one', 'char']; FieldBadge.template = 'web.FieldBadge'; const registry = require('web.field_registry_owl'); registry .add('badge', FieldBadge); <field name="state" widget="badge"/> It works for: form/list/kanban views ➔ Subclass AbstractFieldOwl (exported in ‘web.AbstractFieldOwl’) ➔ Register it in ‘web.field_registry_owl’ ➔ Don’t forget to add widget=... in the arch
- 10. What you (might) need to know: AbstractField API (web.AbstractFieldOwl) - field - isEmpty - ... Odoo Env (web.env) - services - _t - bus - ...
- 11. Owl components in Odoo ● Component/Component ● Component/Widget ● Widget/Component 3 kinds of boundaries
- 12. 1. Component/Component <t t-name="myModule.AddMyComponent" t-inherit="web.SomeTemplate" t-inherit-mode="extension" owl="1"> <xpath expr="//div[@class='abc']" position="inside"> <MyComponent mode="’readonly’" /> </xpath> </t> class MyComponent extends Component { ... } // register the new component as a sub component for the parent ParentComponent.components.MyComponent = MyComponent Standard owl development. ➔ XPath the parent template to add a tag <MyComponent/> where needed (it works!!!) ➔ Add MyComponent to parent static components key
- 13. Owl Compatibility Helpers Component inside Widget Widget inside Component web.OwlCompatibility Owl Component ComponentAdapter Some Widget SomeWidget + WidgetAdapterMixin ComponentWrapper Owl Component
- 14. 2. Component inside Widget ➔ Client action (Hello world) const AbstractAction = require('web.AbstractAction'); const { actionRegistry } = require('web.core'); const { ComponentWrapper, WidgetAdapterMixin} = require('web.OwlCompatibility'); const { Component, tags } = owl; class HelloWorld extends Component {} HelloWorld.template = tags.xml`<div>Hello World!</div>`; const ClientAction = AbstractAction.extend(WidgetAdapterMixin, { start() { const component = new ComponentWrapper(this, HelloWorld); return component.mount( this.el.querySelector('.o_content') ); }, }); actionRegistry.add('client_action', ClientAction);
- 15. 3. Widget inside Component with ComponentAdapter const MyWidget = Widget.extend({ start: function () { this.$el.text('Hello World!'); } }); class Parent extends Component { constructor() { super(...arguments); this.MyWidget = MyWidget; } } Parent.template = xml` <div> <ComponentAdapter Component="MyWidget"/> </div>`; Parent.components = { ComponentAdapter };
- 16. Thank You
Editor's Notes
- #7: let’s talk about the odoo ecosystem in general