Customizing Odoo Views with Studio – Form, List, and Kanban

Opening a View in Studio

Every view you see in Odoo can be edited with Studio. The steps are the same regardless of which view type you want to modify:

1. Make sure Developer Mode is active (Settings → Activate Developer Mode).
2. Navigate to the screen whose view you want to edit — for example, open a Sale Order record to edit its form view.
3. Click the Studio icon (pencil) in the top-right header.
4. Studio opens with the current view displayed on the canvas. A panel of fields and components appears on the left.

To switch to a different view type (e.g., from form to list), use the Views tab in the left panel and click the desired view type.

Modifying Form Views

Form views are the most commonly customized. You see the record's fields laid out in groups and can interact with each element:

Adding a field to the form

1. Open the Fields tab in the left panel.
2. Find the field you want to add (use the search box at the top of the panel).
3. Drag it from the panel onto a drop zone on the canvas. Drop zones appear as blue dashed outlines when you hover near an existing field or group.

Adding a notebook (tabbed section)

Open the Components tab, drag a Notebook element to the form. A notebook creates tabbed pages. Drag additional Page components inside the notebook to add more tabs, then drop fields into each page.

Hiding a field conditionally

Click a field on the canvas to select it. In the right panel, expand Visibility and set a domain condition. For example, only show a field when state = 'done'.

Removing a field from the view

Click the field on the canvas, then click the trash icon that appears on the selected element. This removes the field from the view but does not delete the field from the model.

Modifying List Views

Switch to the list view via the Views tab. In list view Studio mode:

• Each column header is a field. Drag to reorder columns.
• Click a column to open its properties — you can set optional (user can toggle it) or invisible conditions.
• Add a new column by dragging a field from the Fields tab onto the column header area.
• Set decoration rules on rows: for example, color rows red when state = 'overdue' using the Decoration property on the list.

Available list decorations

Modifying Kanban Views

Kanban views show records as cards grouped by a stage or status field. In Studio's kanban edit mode:

• Click a card element to select it — you can add or remove fields shown on each card.
• Drag a field from the Fields tab to a drop zone on the kanban card template.
• Configure which field drives the column grouping using the Group By selector in the view properties (right panel with no element selected).
• Set a color coding rule — for example, color cards by priority or responsible user.

Adding and Removing Columns/Fields

The same pattern applies across all view types:

1. To add: drag from the Fields or Components panel onto a highlighted drop zone on the canvas.
2. To remove: select the element, then click the X or trash icon. Studio removes it from this view only.
3. To create a new field: in the Components tab, drag a New Field element and choose its type when prompted. This both creates the field on the model and adds it to the view in one step.

Reordering and Grouping Elements

Drag any field or group to a new position on the canvas. Blue drop zones indicate valid positions. Groups (the containers that hold two columns of fields side by side on a form) can also be dragged, moving all their contained fields together.

To create a new group, drag a Group component from the Components tab. To add a visual separator, drag a Separator component — this adds a horizontal line with an optional label between sections.

Saving and Exporting Changes

Changes in Studio are saved automatically to the database as you make them. There is no explicit save button for individual edits. However, you will find an Export button in the Studio header bar.

Clicking Export generates a ZIP file containing an Odoo module with your customizations as XML. Here is an example of what an exported view customization looks like:

<!-- views/sale_order_views.xml (exported from Studio) -->
<odoo>
  <data>
    <record id="studio_customization_sale_order_form" model="ir.ui.view">
      <field name="name">sale.order.form.studio</field>
      <field name="model">sale.order</field>
      <field name="inherit_id" ref="sale.view_order_form"/>
      <field name="arch" type="xml">
        <!-- Insert our custom field after the partner_id field -->
        <xpath expr="//field[@name='partner_id']" position="after">
          <field name="x_studio_custom_note" string="Internal Note"/>
        </xpath>
      </field>
    </record>
  </data>
</odoo>

Notice that Studio-generated view customizations use xpath to extend the existing view — the same inheritance approach a developer would use. Custom field names have the x_studio_ prefix.