Odoo Web Controller

Today I am gonna talk about odoo controller. By using odoo controller you can create front end or web pages that are integrated with our odoo modules. It means that instead of showing data on CRM or odoo typical form or tree view, you can show records or data on web pages. And we will achieve this using custom web controller or odoo controller.

openerp,odoo controller

What is controller?

Actually controller is a class that can be used when we want to render some data into website. By using odoo controller we can show any data/records on web pages or website in any template.

Problem Statement

Now I will show you what we are going to achieve here by using odoo controller. Actually I want to show some graph on web page. The idea is that on a button click i will call an odoo controller and return a template (render) with some dictionary of data. So first of all I will create a controller and than its template (You must create a website page or template in order to handle data sent by controller method on the page.) to show graph. To draw a graph I will use "chart.js" library, you can use any of your favourite library. So lets start...

1- Create a controller.


# -*- coding: utf-8 -*-
from openerp import http
from openerp.http import Controller, route, request

class graph_controller(http.Controller):

@http.route('/graph/<self_id>', auth='user', website=True)
def graph(self,self_id):
return http.request.render('test_workflow.graph_template', {

2- Create template, to create template create a new file and named it "graph_template.xml". Don't forget to register that newly created xml file into __openerp.py__.


<template id="graph_template">
<t t-call="website.layout">

<title>Graph Web Controller Example</title>

<div class="container">
<div class="page">
<div class="row">
<canvas id="line-chart" width="200" height="50"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
var x_axis = <t t-esc="x_axis"/>;
var y_axis = <t t-esc="y_axis"/>;

new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: x_axis,
datasets: [{
data: y_axis,
label: "Actual Curve",
borderColor: "#3e95cd",
fill: false

options: {

title: {
display: false,
text: 'World population per region (in millions)'

Now its time to test our custom controller, go to browser and open "http://localhost:8069/graph/1", remember here "/graph/1" is the route of our custom controller.

No comments :

Post a Comment

Leave A Comment...