Once we have Models for our data structure needs, we want a user interface for our users to interact with them. This recipe builds on the Library Book Model from the previous recipe and adds a menu item to display a user interface featuring list and form Views.
The addon module implementing the library.book Model, provided in the previous recipe, is needed. The paths used are relative to our addon module location (for example, ~/odoo-dev/local-addons/my_module/).
To add a view, we will add an XML file with its definition to the module. Since it is a new Model, we must also add a menu option for the user to be able to access it.
Be aware that the sequence of the following steps is relevant, since some use references to IDs defined in previous steps:
- Create the XML file to add the data records describing the user interface
views/library_book.xml:<?xml version="1.0" encoding="utf-8"?> <openerp> <data> <!-- Data records go here --> </data> </openerp> - Add the new data file to the addon module manifest,
__openerp__.pyby adding it to theviews/library_book.xml:# -*- coding: utf-8 -*- { 'name': "Library Books", 'summary': "Manage your books", 'depends': ['base'], 'data': ['views/library_book.xml'], } - Add the Action that opens the Views in the
library_book.xmlfile:<act_window id="library_book_action" name="Library Books" res_model="library.book" /> - Add the menu item to the
library_book.xmlfile, making it visible to the users:<menuitem id="library_book_menu" name="Library" action="library_book_action" parent="" sequence="5" />If you try and upgrade the module now, you should be able to see a new top menu option (you might need to refresh your web browser). Clicking on it should work and will open Views for
Library Booksthat are automatically generated by the server.
- Add a custom form view to the
library_book.xmlfile:<record id="library_book_view_form" model="ir.ui.view"> <field name="name">Library Book Form</field> <field name="model">library.book</field> <field name="arch" type="xml"> <form> <group> <field name="name"/> <field name="author_ids" widget="many2many_tags"/> </group> <group> <field name="date_release"/> </group> </form> </field> </record> - Add a custom Tree (List) view to the
library_book.xmlfile:<record id="library_book_view_tree" model="ir.ui.view"> <field name="name">Library Book List</field> <field name="model">library.book</field> <field name="arch" type="xml"> <tree> <field name="name"/> <field name="date_release"/> </tree> </field> </record> - Add custom
Searchoptions to thelibrary_book.xmlfile:<record id="library_book_view_search" model="ir.ui.view"> <field name="name">Library Book Search</field> <field name="model">library.book</field> <field name="arch" type="xml"> <search> <field name="name"/> <field name="author_ids"/> <filter string="No Authors" domain="[('author_ids','=',False)]"/> </search> </field> </record>
At the low level, the user interface is defined by records stored in special Models. The first two steps create an empty XML file to define the records to be loaded and then add them to the module's list of data files to be installed.
Data files can be anywhere inside the module directory, but the convention is for the user interface to be defined inside a views/ subdirectory using file names after the Model the interface is for. In our case, the library.book interface is in the views/library_book.xml file.
The next step is to define a Window Action to display the user interface in the main area of the web client. The Action has a target Model defined by res_model and sets the title to display to the user using name. These are just the basic attributes. It supports additional attributes, giving much more control of how the Views are rendered, such as what Views are to be displayed, adding filters on the records available, or setting default values. These are discussed in detail in Chapter 8, Backend Views.
In general, data records are defined using a <record> tag, but in our example, the Window Action was defined using the <act_window> tag. This is a shortcut to create records for the ir.actions.act_window Model, where Window Actions are stored.
Similarly, menu items are stored in the ir.ui.menu Model, but a convenience <menuitem> shortcut tag is available and was used.
These are the menu items' main attributes used here:
name: This is the menu item text to be displayed.action: This is the identifier of the action to be executed. We use the ID of the Window Action created in the previous step.sequence: This is used to set the order at which the menu items of the same level are presented.parent: This is the identifier for the parent menu item. Our example menu item had no parent, meaning that it is to be displayed at the top of the menu.
At this point, our module can display a menu item, and clicking on it opens Views for the Library Books model. Since nothing specific is set on the Window Action, the default is to display a List (or Tree) view and a form view.
We haven't defined any of these Views, so Odoo will automatically create them on the fly. However, we will surely want to control how our Views look, so in the next two steps, a form and a tree view are created.
Both Views are defined with a record on the ir.ui.view model. The attributes we used are as follows:
name: This is a title identifying this view. It is frequent to see the XML ID repeated here, but it can perfectly be a more human readable title.model: This is the internal identifier of the target model, as defined in its_nameattribute.arch: This is the view architecture, where its structure is actually defined. This is where different types of View differ from each other.
Form Views are defined with a top <form> element, and its canvas is a two-column grid. Inside the form, <group> elements are used to vertically compose fields. Two groups result in two columns with fields, that are added using the <field> element. Fields use a default widget according to their data type, but a specific widget can be used with the help of the widget attribute.
Tree Views are simpler; they are defined with a top <tree> element containing <field> elements for the columns to be displayed.
Finally, we added a Search view to expand the search option in the box at the top right. Inside the <search> top-level tag, we can have <field> and <filter> elements. Field elements are additional fields that can be searched from the box. Filter elements are predefined filter conditions that can the activated with a click.