I have an existing Odoo 16 application with a working view that contains the following inside a Form view:
<sheet>
<notebook>
<page name="plan_vehicles" string="Vehicles">
<field name="vehicle_time_ids"/>
</page>
</notebook>
</sheet>
I want to add another page to the notebook that will display an Owl component. I have tried to extract the required code from the official tutorial, so I have the following code:
templates.xml:
<odoo>
<data>
<template id="transport.stops" name="Awesome T-Shirt thank you">
<html>
<head>
<t t-call-assets="transport.assets"/>
</head>
<body>
</body>
</html>
</template>
</data>
</odoo>
main.js:
/** @odoo-module **/
import { browser } from "@web/core/browser/browser";
import { mount } from "@odoo/owl";
import { Stops } from "./stops";
// The following code ensures that owl mount the component when ready.
// `templates` contains templates contained in the bundles.
//
// In the mount options, it's also possible to add other interresting
// configuration: https://github.com/odoo/owl/blob/master/doc/reference/app.md#configuration
import { templates } from "@web/core/assets";
owl.whenReady( () => {
mount(Stops, document.body, { templates, dev: true });
});
stops.js:
/** @odoo-module **/
import { Component, useState } from "@odoo/owl";
export class Stops extends Component {
static template = "transport.stops";
}
stops.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="transport.stops" owl="1">
<div class="p-3">
hello world
</div>
</t>
</templates>
manifest.py:
'assets': {
'web.assets_backend': [
'transport/static/src/*.**',
],
'web.assets_qweb': [
'transport/static/src/*.xml'
],
'transport.assets': [
# bootstrap
('include', 'web._assets_helpers'),
'web/static/src/scss/pre_variables.scss',
'web/static/lib/bootstrap/scss/_variables.scss',
('include', 'web._assets_bootstrap'),
'web/static/src/libs/fontawesome/css/font-awesome.css', # required for fa icons
'web/static/src/legacy/js/promise_extension.js', # required by boot.js
'web/static/src/boot.js', # odoo module system
'web/static/src/env.js', # required for services
'web/static/src/session.js', # expose __session_info__ containing server information
'web/static/lib/owl/owl.js', # owl library
'web/static/lib/owl/odoo_module.js', # to be able to import "@odoo/owl"
'web/static/src/core/utils/functions.js',
'web/static/src/core/browser/browser.js',
'web/static/src/core/registry.js',
'web/static/src/core/assets.js',
'transport/static/src/**/*',
],
},
- the import of the
template.xmlfile in thedatalist.
I think I am missing two things:
- how does the Owl template
stops.xmlrelate to the template intemplates.xmland - how to add the the component/template to a new page in my notebook so that I can see the 'hello world'.
What I was missing was to register the component. At the ent of the javascript field I added this line:
registry.category("fields").add("stops",Stops)I could then add the component to my view like this: