In steps 1 and 2, we registered a new type of view, called m2m_group, in ir.ui.view and ir.actions.act_window.view.

In step 3, we added the get_m2m_group_data method in the base. Adding this method in the base will make that method available in every model. This method will be called via an RPC call from the JavaScript view. The view will pass two parameters—the domain and m2m_field. In the domain argument, the value of the domain will be the domain generated with a combination of the search view domain and the action domain. The m2m_field is the field name by which we want to group the record. This field will be set on the view definition.

In the next few steps, we added the JavaScript files that are required to form the view. An Odoo JavaScript view consists of the view, model, renderer, and controller. The word view has historical meaning in the Odoo codebase, so model, view, controller (MVC) becomes model, renderer, controller (MRC) in Odoo. In general, the view sets up the model, renderer, and controller, and sets the MVC hierarchy so that it looks similar to the following:

Let's look at the roles of Model, Renderer, Controller, and View. Abstract versions of the Model, Renderer, Controller, and View have all the basic things that are needed to form a view. Consequently, in our example, we have created the model, renderer, controller, and view by inheriting them.

Here is an in-depth explanation of the different parts that are used to create a view:

• Model: The role of the Model is to hold the state of the view. It sends an RPC request to the server for the data, and then passes the data to the controller and renderer. We then override the load and reload methods. When the view is being initialized, it calls the load() method to fetch the data, and when the search conditions are changed and the view needs a new state, then the reload() method is called. In our case, we have created the common _fetchData() method to make an RPC call for data. Note that we used the get_m2m_group_data method that we added in step 3. The get() method will be called from the controller to get the state of the model.
• Controller: The role of the Controller is to manage coordination between the Model and the Renderer. When an action occurs in the Renderer, it passes that information to the controller and performs the action accordingly. Sometimes, it also calls some methods in the Model. In addition to this, it manages the buttons in the control panel. In our example, we added a button to add new records. To do so, we had to override the renderButtons() method of AbstractController. We also registered custom_events so that when a button in the author card is clicked, the renderer will trigger the event to the controller to make it perform the action.
• Renderer: The role of the Renderer is to manage the DOM elements for the view. Every view can render data in a different way. In the renderer, you can get the state of the model in a state variable. It calls the render() method for the rendering. In our example, we rendered the ViewM2mGroup QWeb template with its current state to display our view. We also mapped the JavaScript events to take user actions. In this recipe we have bind the click event for the buttons of the card. Upon clicking the author card button, it will trigger the btn_clicked event to the controller, and it will open the list of books for that author.

• View: The role of the Renderer is to get all the basic things that are required to build views, like a set of fields, a context, a view arch, and some other parameters. After that, the view will initialize the controller, renderer, and model triplet. It will set them in the MVC hierarchy. Usually, it sets up the parameters that are required in the model, view, and controller. In our example, we want the m2m_field name to get proper grouped data in the Model, so we have set the model parameter in it. In the same way, this.controllerParams and this.rendererParams can be used to set the parameters in the controller and renderer.

In step 8, we added a QWeb template for the views and control panel buttons. To learn more about the QWeb template, refer to the Using client-side QWeb templates recipe in this chapter.

In step 9, we added JavaScript files in the assets.

Finally, in the last two steps, we added a view definition for the book.library model. In step 10, we used the <m2m_group> tag for the view, and we also passed the m2m_field attribute as the option. This will be passed to the model to fetch the data from the server.