Development Book V18: Form Style

To ensure a consistent and professional customer experience, it is recommended to customize the document layout in Odoo for unified styling across all forms. Odoo offers a variety of styling options and design elements that can be used to enhance the visual appeal and branding of documents such as invoices, quotations, and delivery slips.

1. Header Element

Utilize the header element to incorporate buttons or status bars at the beginning of a form.

For example,

                    <header>
  <button name="action_quotation_send" string="Send by Email"
          type="object" states="draft" class="btn-primary"/>
  <button name="action_cancel" type="object" string="Cancel"/>
  <button name="action_draft" states="cancel" type="object"
          string="Set to Quotation"/>
  <field name="state" widget="statusbar"
         statusbar_visible="draft,sent,sale"/>
</header>

2. Sheet Element

In Odoo, the sheet element within a form view helps create a neatly structured and user-friendly layout. It organizes fields and components into a clean, tabular format, improving readability and enhancing the visual appeal of the form. This element is widely used to deliver a clear and intuitive user experience.

<sheet>
  <group>
      <group>
          <field name="name"/>
          <field name="patient_id"/>
      </group>
      <group>
          <field name="doctor"/>
          <field name="date"/>
      </group>
  </group>
</sheet>

3. Smart Button

Smart buttons in Odoo allow users to quickly access and retrieve related records linked to the current object. These interactive buttons appear at the top of the form view (within the sheet element), providing a convenient and intuitive way to navigate to associated data such as sales orders, invoices, or activities.

         <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 certain fields are particularly important, they should be positioned at the top of the form to ensure visibility and ease of access for users.

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

5. Notebook

When a form contains a large number of fields, organizing them into notebook pages (tabs) is an effective way to improve structure and user navigation.

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

It is possible to incorporate additional pages into a notebook.

6. Chatter widget

To incorporate the chatter (mail thread and log note functionality) into your form view, you should place it immediately after closing the sheet element. We can directly use tag outside sheet and inside form .We should inherit the mail.thread in the corresponding model .

</sheet>
   <chatter/>
</form>