Customize view of website in odoo.

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.

  @api.model 
  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.
  

  <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.

      @api.multi
      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})
      
      @api.multi
          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})
      @api.multi
       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]})
          else:
             return self.set_sequence_top()
      
      
      @api.multi
       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]})
           else:
                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");
         this._super();
    },
    

    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":
           object.with_context(context).set_sequence_top()
        elif sequence == "bottom":
           object.with_context(context).set_sequence_bottom()
        elif sequence == "up":
           object.with_context(context).set_sequence_up()
        elif sequence == "down":
           object.with_context(context).set_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!