Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
      <template id="transport.stops" name="Awesome T-Shirt thank you">
                <t t-call-assets="transport.assets"/>
            </head>
            </body>
        </html>
      </template>
</data>
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
</templates>
manifest.xml:
'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.xml file in the data list.
I think I am missing two things:
how does the Owl template stops.xml relate to the template in templates.xml and
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:
<field name="trip_summary" widget="stops"/>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.