Skip to Content
Menu
This question has been flagged
2 Replies
2524 Views

Hello,

I've been learning the owl framework for the past couple of weeks. In chapter 2 of the tutorial where I have to create a layout (https://www.odoo.com/documentation/16.0/developer/howtos/discover_js_framework/02_odoo_web_framework.html#a-new-layout), I cannot manage to make my code work and was wondering if any one of you can help me out.

I keep getting the following error message:

https://ibb.co/8NJGr0K



Here is the code of my component JS file:

/** @odoo-module **/

import { registry } from "@web/core/registry";
import { Layout } from "@web/search/layout";


const { Component } = owl;

class AwesomeDashboard extends Component {

setup(){

console.log("awesomedashboard is set")


}

}

AwesomeDashboard.components = { Layout };
AwesomeDashboard.template = "awesome_tshirt.clientaction";

registry.category("actions").add("awesome_tshirt.dashboard", AwesomeDashboard);


code of component xml file:

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="awesome_tshirt.clientaction" owl="1">

<Layout display="{controlPanel:{'bottom-right':false, 'top_right':false}}">


</Layout>

</t>

</templates>

Avatar
Discard
Best Answer

Hello,

I assume that you are using Odoo version 16. 
In this version, the Layout​ component needs a configuration in its environment. Its design had been thought more for use in views and less for client action (the latter is what we do in the tutorial). The API of the component has been improved in the master branch.


To use Layout​ in your AwesomeDashboard​ you can use this snippet in your setup​ function:


// The useSubEnv below can be deleted if you're > 16.0
useSubEnv({
​config: ​{
​...getDefaultConfig(),
​...this.env.config,
​},
});

​​

Avatar
Discard
Author Best Answer

Hello Florent,

I have added configuration to component's environment. But now I get another error message. https://ibb.co/K7mY70q .

Avatar
Discard

The error come from a misspell you made in the layout props: `'top_right':false`-> `'top-right':false.

To help you in your journey, you can always check the solutions and compare with what you have https://github.com/odoo/tutorials/commit/c1803a7ef4e19372f39951e99a626a3047825eed

Author

Thank you so much Florent finally got it to work! I will be more careful next time.

Related Posts Replies Views Activity
1
Feb 24
3233
4
Nov 24
796
1
Feb 24
976
0
Nov 24
2613
1
Oct 24
836