4

I created a custom module that defines a widget. here are the .js file as well as the QWeb template:

bh_sidebar.js

odoo.define('sidebar_widget.bh_sidebar', function (require) {
    'use strict';
    var Widget = require('web.Widget');
    var widgetRegistry = require('web.widget_registry');
    var core = require('web.core');

    var QWeb = core.qweb;
    var _t = core._t;

    var bh_sidebar = Widget.extend({
        init: function () {
            var self = this;
            this._super(parent);
            console.log('Widget initialized!');
        },

        events: {},

        start: function () {
            this.$el.append(QWeb.render('bh_sidebar_template'));
            console.log('Widget started!');
        }

    });

    widgetRegistry.add(
        'bh_sidebar', bh_sidebar
    )
})

bh_sidebar.xml

<?xml version="1.0"?>
<templates id="template" xml:space="preserve">
    <t t-name="bh_sidebar_template">
        <div style="background-color:red;" class="myClass">
            <a href="#" class="butt1">Button 1</a>
            <a href="#" class="butt2">Button 2</a>
        </div>
    </t>
</templates>

I've added both to the backend assets using:

<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="script[last()]" position="after">
                <script type="text/javascript" src="/sidebar_widget/static/src/js/bh_sidebar.js"></script>
                <!-- <script type="text/javascript" src="/sidebar_widget/static/src/js/renderer.js"></script> -->
                <link rel="stylesheet" type="text/scss" href="/sidebar_widget/static/src/scss/widget.scss"></link>
            </xpath>
        </template>
    </data>
</odoo>

I've also added the templates to the manifest file.

This widget is supposed to display a red rectangle with two links, button 1 and button 2. I want this widget to be independent of any type of view, and just show up at the top of the screen beneath Odoo's navigation bar. How do I that? if I try to run my code as is, nothing happens. I've been at this for a week. Nothing I found on the internet helped. The documentation is criminally outdated, the ressources scarce.

I would appreciate any help. Thank you.

Kyle Sentient
  • 487
  • 3
  • 7
  • 20

2 Answers2

1

Your widget will not be instantiated and inserted into the DOM automatically. To do this, you can hook into any of the already existing high-level widgets. For example, using the show_application method on the WebClient:

var WebClient = require('web.WebClient');

WebClient.include({

    show_application: function () {
        var sup = this._super.apply(this, arguments);

        // Instantiate
        var sidebar = new bh_sidebar();

        // Insert in DOM
        sidebar.insertAfter(this.$('.o_main'));

        return sup;
    },

});
adekock11
  • 544
  • 2
  • 11
  • Actually, in my case, I just initialized the widget class and it works for me but the lifecycles hook not calling if I just initialized the widget. This problem kills my whole day and there is no proper documentation. End of the day your answer saves the day. Thanks @adekock11. – Almabud Sep 29 '21 at 11:07
  • @Almabud you are welcome. Yes, the documentation for the harder things is thin. The only way around this is to read the code - you know the popular saying: "The code is the documentation" :) – adekock11 Sep 30 '21 at 12:06
0

I think u should render this view by using controller mechanism this will render this view independent from others view.

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
DDat
  • 1