Odoo 16 Development Book

Qweb templates

A client-side template engine is also available in Odoo. This template engine is known as Qweb Templates that is carried out completely in javascript code and rendered withinside the browser.

Perform the following steps to render a qweb template from the client-side; Below is an example of rendering a qweb template for dashboard creation;

1. Import ‘web.core’ and extract the qweb reference to a variable as below;

var core = require('web.core');
var QWeb = core.qweb;

2. Below is a JS function defined for rendering a template;

render_dashboards: function() {
        	var self = this;
        	if (this.login_employee){
            	var templates = []
            	if( self.is_manager == true){
                	templates = ['LoginUser', 'Managercrm', 'Admincrm'];
            	}
            	else{
                	templates = ['LoginUser','Managercrm'];
            	}
            	_.each(templates, function(template) {
                	self.$('.o_hr_dashboard').append(QWeb.render(template, {widget: self}));
            	});
        	}
        	else{
            	self.$('.o_hr_dashboard').append(QWeb.render('EmployeeWarning', {widget: self}));
        	}
    	},

3. Add the template file in static/src/xml/file_name.xml

<t t-name="LoginUser">
    <section class="dashboard_main_section" id="main_section_login">
       <div class="row">
          <div class="col-sm-12 mb-4">
             <div class="row">
                <div class="col-12 col-sm-12 col-md-8">
                  <h2 class="section-header">CRM Dashboard</h2>
                </div>
                <div class="col-12 col-sm-12 col-md-4">
                   <form class="form-group">
                      <select id="income_expense_values" class="form-control">
                         <option id="this_year" value="this_year">This Year</option>
                          <option id="this_quarter" value="this_quarter">This            Quarter</option>
                          <option id="this_month" value="this_month" selected="">This Month</option>
                          <option id="this_week" value="this_week">This  Week</option>
                      </select>
                   </form>
                </div>
             </div>
            <hr/>
       </div>
     </div>
   </section>
 </t>

4. Then add the Qweb file to the manifest. In Odoo 16, we can add the qweb file also inside 'web.assets_backend' instead of adding in ‘web.assets_qweb’

'assets': {
    	'web.assets_backend': [
        	'crm_dashboard/static/src/css/dashboard.css',
        	'crm_dashboard/static/src/css/style.scss',
        	'crm_dashboard/static/src/css/material-gauge.css',
        	'crm_dashboard/static/src/js/dashboard_view.js',
        	'crm_dashboard/static/src/js/custom.js',
        	'crm_dashboard/static/src/js/lib/highcharts.js',
        	'crm_dashboard/static/src/js/lib/Chart.bundle.js',
        	'crm_dashboard/static/src/js/lib/funnel.js',
        	'crm_dashboard/static/src/js/lib/d3.min.js',
        	'crm_dashboard/static/src/js/lib/material-gauge.js',
        	'crm_dashboard/static/src/js/lib/columnHeatmap.min.js',
        	'crm_dashboard/static/src/js/lib/columnHeatmap.js',
        	'crm_dashboard/static/src/xml/dashboard_view.xml',
    	],
	},