Javascript Odoo

Question

i'm trying to learn the javascript of odoo ,and as you all know there are very few documentation about it First i could finally create a view template with its client action ,add a button to excute a code from js JS :

odoo.define('js_client_view.ClientReportWidget', function (require) {
'use strict';

    console.log("module loaded");

    var AbstractAction = require('web.AbstractAction');
    var Widget = require('web.Widget');
    var core = require('web.core');
    require('web.dom_ready');
    var ajax = require('web.ajax');

    var button = $('#mybutton');


    var JsClientView = Widget.extend({
        //contentTemplate: 'UploadDocumentMainMenu',
        template: 'JsClientView',

        events: {
            'click .mybutton': '_onButton',
    
        },

        init: function(){
            this._super.apply(this, arguments);
            data =ajax.jsonRpc('/get_clients', 'call', {}).then(function(data) {
                console.log("in data")
                console.log(data)
                return data
            });
            console.log(data)
        },
        _onButton: function(event) {
            console.log("in On Button");
            console.log(event);
            ajax.jsonRpc('/get_clients', 'call', {}).then(function(data) {
                console.log("in data")
                console.log(data)
            });
        },


    });

    core.action_registry.add('js_client_view', JsClientView);
    return JsClientView;

});

My template :

<templates xml:space="preserve" >
    <t t-name="JsClientView" >
                    <div class="container o_mrp_bom_report_page">
            <span class="o_report_heading text-left">
                <br/>
                <button type="button" class= "btn btn-secondary mybutton" 
                >Test </button>

                <h1>Relevé de compte client</h1>
                <strong>
                    <t >
                        <span>Tous les client</span>
                    </t>
                  
                </strong>
            </span>
        
    </t>

</templates>

And the controller that return info to the button function:

class OdooControllers(http.Controller):
    @http.route(['/get_clients'], type='json',auth='public', website=True)
    def get_clients(self, **kw):
        clients = http.request.env['hr.employee'].sudo().search([('department_id', '=',5)], limit=6)
        c = []
        for client in clients:
            n = {
                'name': client.name,
                'id': client.id,
                'certificate': client.certificate,

            }
            c.append(n)
        return c

Now i want to send this information to the template and display it How can i do that !

Answer 1

Odoo JS is the frontend of odoo. As such you cannot edit the template itself since you are not in the backend. Odoo is using a classical client-server architecture therefore, your JS is seperated from the server.

However you can edit the entire DOM tree by accessing normal jquery and JS features. You could do something like this:

Add a placeholder div somewhere:

<div id ="content">
</div>

Fill that div with data.

// On click find that div and inject content into it
ajax.jsonRpc('/get_clients', 'call', {}).then(function(data) {
    $("#content").html("<p>Hello World<p/>");
    // Later fill the content with data
});

You could probably use no JS at all for your example but as far as I understood, your goal is to specifically use JS to display that data for practice. So that's how you would inject data from the server into the DOM by using JS.