Back to Top

Customize view of website in odoo.

Updated 21 March 2017


Recently i was working on a project in which i had to create my own page in Odoo website. I created the page and made the grid view of the entities in the page and every thing was working as expected. When i tried to customize (change size or promote to top,bottom,up & down)  the grid of the entities in my page it was not working  as Odoo does (eg.Shop page). I searched in the core and i found a solution for it, i am writing the steps which need to be followed while creating the customizable grid view.


  • Add the fields in model(eg.  my.model)of the page you want to customize.
    website_size_x = fields.Integer('Size X', default=1)
    website_size_y = fields.Integer('Size Y',default=1)
    website_sequence = fields.Integer('Sequence' , default='_default_website_sequence')

    Add the default size you want to show when the page is first time loaded. Also add the default       website_sequence . Default website_sequence can be simply added by simply creating a query for selecting the minimum website_sequence form database by writing the following the function.

    def _default_website_sequence(self):
         cr = self._cr cr.execute('SELECT MIN(website_sequence)-1 FROM my_model')
         next_sequence = cr.fetchone()[0] or 10 
         return next_sequence
  • How to use “website_size_x” and “website_size_y” .
    Simply use the website_size_x and website_size_y in col-span and row-span of the view you are creating,  for example in my case i created a table view of the entities and added the code in templates.xml as.

    Searching for an experienced
    Odoo Company ?
    Find out More
    <td   t-att-colspan="object.website_size_x" t-att-rowspan="object.website_size_y" t-attf-class="oe_grid oe_height">

    Important Note:-> Class “oe_grid oe_height” is used to create the grid view of the entities in the page.

  • How to use “website_sequence” .
    In order to add the sequence of your entities you need to order the records of your model by website_sequence by simply adding this.

    • _order = ‘website_sequence desc’
    • Create functions for writing the values in the website_sequence.
      • Create functions for pushing the entities to top, bottom , up & down in the model you want to view in website and write the values of  website_sequence in those. Here is the example.
        def set_sequence_top(self):
            self._cr.execute('SELECT MAX(website_sequence) FROM my_model')
            max_sequence = self._cr.fetchone()[0] or 0
            return self.write({'website_sequence': max_sequence + 1})
            def set_sequence_bottom(self):
            self._cr.execute('SELECT MIN(website_sequence) FROM my_model')
            min_sequence = self._cr.fetchone()[0] or 0
            return self.write({'website_sequence': min_sequence -1})
         def set_sequence_up(self):
            self._cr.execute(""" SELECT id, website_sequence FROM my_model
            WHERE website_sequence > %s ORDER BY website_sequence ASC LIMIT 1""" % (self.website_sequence))
            prev = self._cr.fetchone()
            if prev:
               prev_obj = self.browse(prev[0])
               prev_obj.write({'website_sequence': self.website_sequence})
               return self.write({'website_sequence': prev[1]})
               return self.set_sequence_top()
         def set_sequence_down(self):
             self._cr.execute(""" SELECT id, website_sequence FROM my_model
             WHERE website_sequence < %s ORDER BY website_sequence DESC LIMIT 1""" % (self.website_sequence, ))
                  next = self._cr.fetchone()
             if next:
                  next_obj = self.browse(next[0])
                  next_obj.write({'website_sequence': self.website_sequence})
                  return self.write({'website_sequence': next[1]})
                  return self.set_sequence_bottom()
  • Override the website_sale_editor.js file.
    • Override the start, bind_resize and go_to templates in the website_sale_editor.js
      start: function () {
          this.entity_id = parseInt("id of your entity you want to customize");
      bind_resize: function () { 
      this.$el.on('click', 'ul[name="size"] td', function (event) 
      var $td = $(event.currentTarget);
      var x = $td.index()+1; 
      var y = $td.parent().index()+1; 
      ajax.jsonRpc('/my_controller/change_size', 'call', {'id': this.entity_id, 'x': x, 'y': y}) .then(self.reload); //Call the controllerand pass the row_span and col_span values.
      go_to: function (type, value) {
      if(type !== "click") return;
           ajax.jsonRpc('/my_controller/change_sequence', 'call', {'id': this.entity_id,  'sequence':  value}.then(this.reload); // Call the controller and pass the sequence.
  • What to do in controller.
    • Add two routes in the controller for re-sizing and changing the sequence of your entities in website .Here is the example.

      @http.route(['/my_controller/change_size'], type='json', auth="public")
      def deals_change_size(self, id, x, y):
          object = request.env['my.model'].browse(id)
          size =object.write({'website_size_x': x, 'website_size_y': y})
          return size
      @http.route(['/my_controller/change_sequence'], type='json', auth="public")
      def change_sequence(self, id, sequence):
          context = request.context
          object = request.env['my.model'].browse(id)
          if sequence == "top":
          elif sequence == "bottom":
          elif sequence == "up":
          elif sequence == "down":


That is it.!!!
If you enjoyed this post, I’d be very grateful if you’d write your opinions, comments and suggestions to keep the page updated and interesting.
Thank you!


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home