I'm a backend developer trying to learn OWL framework.
I'm doing something like the Odoo playground tutorial. The idea is to have a custom qweb template render, where i put my custom components, but not having the Odoo client loaded.
So i have the menús and my custom qweb template:
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<template id="custom_ui_template" name="Custom Delivery Template">
<html>
<head>
<!-- <t t-call-assets="web.assets_common"/>
<t t-call-assets="web.assets_backend"/> -->
<t t-call-assets="owl_tutorial.custom_ui"/>
</head>
<body>
</body>
</html>
</template>
<record id="action_open_custom_ui" model="ir.actions.act_url">
<field name="name">Custom UI</field>
<field name="url">/custom/ui</field>
<field name="target">new</field>
</record>
<menuitem
name="Custom UI"
id="menu_open_custom_ui"
parent="owl_tutorial.menu_owl_tutorial"
action="action_open_custom_ui"
sequence="99"/>
</odoo>
And the controller to render that template:
@http.route('/custom/ui', type='http', auth='user', website=True)
def delivery_ui(self, **kw):
return request.render('owl_tutorial.custom_ui_template', {})
And my assets declaration in the manifest.py, like playground tutorial
'owl_tutorial.custom_ui': [
# 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',
'owl_tutorial/static/src/custom_ui/*.js',
'owl_tutorial/static/src/custom_ui/*.xml',
'owl_tutorial/static/src/custom_ui/*.scss',
],
My OWL Component: custom_ui.js
/** @odoo-module */
import { Component, useState } from "@odoo/owl";
const { xml, mount } = owl;
export class TestComponent extends Component {
static template = "owl_tutorial.test_ui"
setup(){
super.setup()
console.log("This is Test Component")
}
showStockPickingKanban() {
// TODO
}
showOdooKanban() {
// TODO
}
returnToOdooBackend() {
// Redirige al backend de Odoo
window.location.href = "/web";
}
}
custom_ui.xml
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="owl_tutorial.test_ui" owl="1">
<div>
<div class="custom-buttons">
<button t-on-click="showStockPickingKanban">Kanban Stock Picking</button>
<button t-on-click="showOdooKanban">Kanban Odoo</button>
<button t-on-click="returnToOdooBackend">Close</button>
</div>
<div class="custom-kanban">
<t t-set="domain" t-value="[]"/>
<t t-attf-kanban-model="stock.picking"/>
<t t-attf-kanban-model="res.partner"/>
</div>
</div>
</t>
</templates>
And the main.js to mount the main component to my qweb template body
/** @odoo-module */
import { TestComponent } from "./custom_ui";
import { mount } from "@odoo/owl";
import { templates } from "@web/core/assets"
// Me lo está montando en general, en lugar de solo en mi palntilla
owl.whenReady(() => {
const config = { templates, dev: true }
mount(TestComponent, document.body, config)
});
I would like to reuse the actions and views that are defined in Odoo, so one button display the kanban view stock.picking, and the other the same for res.partner.
I know i can import KanbanController, and KanbanView from Odoo web components, buy i dont know how to use inside my custom_ui component.
¿Can I modify te domain, the context...?¿I need to add the code in javascript file or use sometthing like <KanbanView> in my xml?
The objetive is to render the desired views in the div below the buttons div so i can learn how to reuse the Odoo conponents mixed with muy custom components.