As we have seen, if no view is defined, Odoo will automatically generate basic views to get you going. But surely you would like to define the module views yourself, so that's what we'll do next.
Odoo supports several types of views, but the three main ones are: list
(also called tree
), form
, and search
views. We'll add an example of each to our module.
All views are stored in the database, in the ir.model.view
model. To add a view in a module, we declare a <record>
element describing the view in an XML file that will be loaded into the database when the module is installed.
Edit the XML we just created to add this <record>
element just after the <data>
opening tag at the top:
<record id="view_form_todo_task" model="ir.ui.view"> <field name="name">To-do Task Form</field> <field name="model">todo.task</field> <field name="arch" type="xml"> <form string="To-do Task"> <field name="name"/> <field name="is_done"/> <field name="active" readonly="1"/> </form> </field> </record>
This will add a record to the model ir.ui.view
with the identifier view_form_todo_task
. The view is for the model todo.task
and named To-do Task Form
. The name is just for information, does not have to be unique, but should allow one to easily identify what record it refers to.
The most important attribute is arch
, containing the view definition. Here we say it's a form, and it contains three fields, and we chose to make the active
field read only.
The above provides a basic form view, but we can make some improvements to make it nicer. For document
models Odoo has a presentation style that mimics a paper page. The form contains two elements: a <head>
, containing action buttons, and a <sheet>
, containing the data fields:
<form> <header> <!-- Buttons go here--> </header> <sheet> <!-- Content goes here: --> <field name="name"/> <field name="is_done"/> </sheet> </form>
Forms can have buttons to run actions. These are able to trigger workflow actions, run Window Actions, such as opening another form, or run Python functions defined in the model.
They can be placed anywhere inside a form, but for document-style forms, the recommended place for them is the <header>
section.
For our application, we will add two buttons to run methods of the todo.task
model:
<header> <button name="do_toggle_done" type="object" string="Toggle Done" class="oe_highlight" /> <button name="do_clear_done" type="object" string="Clear All Done" /> </header>
The basic attributes for a button are: string
with the text to display on the button, the type
of action it performs, and the name
that is the identifier for that action. The optional class
attribute can apply CSS styles, just like in regular HTML.
The <group>
tag allows organizing the form content. Placing <group>
elements inside a <group>
element creates a two column layout inside the outer group. Group elements are advised to have a name
to make it easier for other modules to extend on them.
We will use this to better organize our content. Let's change the <sheet>
content of our form to match this:
<sheet> <group name="group_top"> <group name="group_left"> <field name="name"/> </group> <group name="group_right"> <field name="is_done"/> <field name="active" readonly="1"/> </group> </group> </sheet>
At this point, our record in todo_view.xml
for the todo.task
form view should look like this:
<record id="view_form_todo_task" model="ir.ui.view"> <field name="name">To-do Task Form</field> <field name="model">todo.task</field> <field name="arch" type="xml"> <form> <header> <button name="do_toggle_done" type="object" string="Toggle Done" class="oe_highlight" /> <button name="do_clear_done" type="object" string="Clear All Done" /> </header> <sheet> <group name="group_top"> <group name="group_left"> <field name="name"/> </group> <group name="group_right"> <field name="is_done"/> <field name="active" readonly="1" /> </group> </group> </sheet> </form> </field> </record>
Remember that for the changes to be loaded into our Odoo database, a module upgrade is needed. To see the changes in the web client, the form needs to be reloaded: either click again on the menu option that opens it, or reload the browser page (F5 in most browsers).
Now, let's add the business logic for the actions buttons.