Odoo 16 Development Book

Form Style

If you want to provide customers with a consistent experience, you can style the document form in Odoo. You have a number of options for styling a form.

1. Header Element

Use the header element for adding buttons or status bars at the starting of a form.

For example

<header>
        <button name="action_quotation_send" string="Send by Email" type="object" states="draft" class="btn-primary" data-hotkey="g"/>
        <button name="action_cancel" type="object" string="Cancel" attrs="{'invisible': ['|', ('state', 'not in', ['draft', 'sent','sale']), ('id', '=', False)]}" data-hotkey="z"/>
        <button name="action_draft" states="cancel" type="object" string="Set to Quotation" data-hotkey="w"/>
        <field name="state" widget="statusbar" statusbar_visible="draft,sent,sale"/>
        </header>

2. Sheet Element

Next, you can add a element. Inside this element, you can add all other fields.

3. Smart buttons

Smart buttons can be used to retrieve more records associated with this object. The top of the sheet will then get smart buttons added.

<div class="oe_button_box" name="button_box">
        <button type="object" name="action_reconcile_stat"
          class="oe_stat_button" icon="fa-book">
            <field name="number_entries" string="Journal Entries" widget="statinfo"/>
        </button>
     </div>

4. Prominent fields

If there are any prominent fields, then put them first.

<div class="oe_title">
        <h1><field name="name" class="oe_inline"/></h1>
     </div>

Then you can add all other fields.

5. Notebook

If there are a lot of fields on the form, then we can arrange them as notebook pages.

<notebook>
        <page string="Internal Notes" name="internal_notes">
            <field name="description" placeholder="Add a description..." options="{'collaborative': true}" />
        </page>
     </notebook>

You can add more pages to a notebook.

6. Chatter widget

If you want to add a chatter on your form, you can add it after closing the sheet element.

<div class="oe_chatter">
        <field name="message_follower_ids"/>
        <field name="activity_ids"/>
        <field name="message_ids" options="{'post_refresh': 'recipients'}"/>
     </div>

Book Preferences