Development Book V17: Form Style

To ensure a uniform experience for customers, consider customizing the document form within Odoo for consistent styling. Various styling choices are available for enhancing the form's appearance.

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"
                                       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>
                            

Sheet Element

The "sheet" element in a form view is utilized to create a structured and visually organized layout, allowing for the grouping of fields and other elements within a tabular format for improved user interface design.


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

Smart Button

Smart buttons enable the retrieval of additional records associated with the current object, resulting in the addition of interactive buttons at the top of the sheet.


                            <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>
                            

Prominent fields

If there are any prominent fields, prioritize them at the beginning.


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

Notebook

When dealing with numerous fields on the form, organizing them as notebook pages can be a practical approach.


                            <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.

Chatter widget

To include a chatter in your form, you can integrate it after concluding 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>
                            
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message