Fields and widgets

# Fields and widgets

Fields structure the models of a database. If you think of a model as a
table or spreadsheet, fields are the columns and records are the individual rows. Fields also define
the type of data that is stored within them. The way in which a fieldâs data is presented and
formatted on the UI is controlled by its widget.
With Studio, it is possible to:
- add new fields to your database. From a technical point of view, there
are 15 field types in Odoo. However, you can choose from 20
field types in Studio, as some field types are available more than once with a different default
widget;
add new fields to your database. From a technical point of view, there
are 15 field types in Odoo. However, you can choose from 20
field types in Studio, as some field types are available more than once with a different default
widget;
- add existing fields, i.e., fields that already exists on a
model, to any view of that model;
add existing fields, i.e., fields that already exists on a
model, to any view of that model;
- modify a fieldâs properties ; or
modify a fieldâs properties ; or
- remove a field from a view .
remove a field from a view .
Studio fields vs. property fields
Fields created using Studio are saved as columns in your Odoo database. Property fields , on the other hand, act as pseudo-fields; they are shared by all
records that are linked to the same parent record (e.g., for tasks, the project, or for a
product, the product category), but they are not saved as columns in your database.
Adding a Deadline field to the form view of a task using Studio makes that field
visible in every task in your database. Adding a Special instructions property
field to a task makes the field visible in all tasks within the same project (i.e., its
parent) while other projectsâ tasks remain unaffected.

## Field types

Fields can be broadly divided into two categories:
- Simple fields , which contain basic values, such as text,
numbers, files, etc.
Simple fields , which contain basic values, such as text,
numbers, files, etc.
- Relational fields , which are used to link and
display the data from records on another model.
Relational fields , which are used to link and
display the data from records on another model.

### Simple fields

Non-default widgets, when available, are presented as bullet points or sub-headings.

#### Text (char)

`char`
The Text field is used for short text containing any character. One text line is
displayed when filling out the field.
- Badge : displays the value inside a rounded shape, similar to a tag. The value cannot
be edited on the UI, but a default value can be set.
Badge : displays the value inside a rounded shape, similar to a tag. The value cannot
be edited on the UI, but a default value can be set.
- Copy to Clipboard : users can copy the value by clicking a button.
Copy to Clipboard : users can copy the value by clicking a button.
- E-mail : the value becomes a clickable mailto link.
E-mail : the value becomes a clickable mailto link.
- Image : displays an image using a URL. The value cannot be edited manually, but a
default value can be set. Note This works differently from selecting the Image field directly, as the image is not stored in Odoo when using a Text field with the Image widget. For example, it can be useful if you
want to save disk space.
Image : displays an image using a URL. The value cannot be edited manually, but a
default value can be set.
This works differently from selecting the Image field directly, as the image is not stored in Odoo when using a Text field with the Image widget. For example, it can be useful if you
want to save disk space.
- Phone : the value becomes a clickable tel link. Tip Tick Enable SMS to add an option to send an SMS directly from Odoo next to the
field.
Phone : the value becomes a clickable tel link.
Tick Enable SMS to add an option to send an SMS directly from Odoo next to the
field.
- URL : the value becomes a clickable URL.
URL : the value becomes a clickable URL.

#### Multiline Text (text)

`text`
The Multiline Text field is used for longer text containing any type of character. Two
text lines are displayed on the UI when filling out the field.
- Copy to Clipboard : users can copy the value by clicking a button.
Copy to Clipboard : users can copy the value by clicking a button.

#### Integer (integer)

`integer`
The Integer field is used for all integer numbers ( positive, negative, or zero,
without a decimal ).
- Percentage Pie : displays the value inside a percentage circle, usually for a computed
value. The value cannot be edited on the UI, but a default value can be set.
Percentage Pie : displays the value inside a percentage circle, usually for a computed
value. The value cannot be edited on the UI, but a default value can be set.
- Progress Bar : displays the value next to a percentage bar, usually for a computed
value. The field cannot be edited manually, but a default value can be set.
Progress Bar : displays the value next to a percentage bar, usually for a computed
value. The field cannot be edited manually, but a default value can be set.
- Handle : displays a drag handle icon to order records manually in List view .
Handle : displays a drag handle icon to order records manually in List view .

#### Decimal (float)

`float`
The Decimal field is used for all decimal numbers ( positive, negative, or zero,
with a decimal ).
Decimal numbers are displayed with two decimals after the decimal point on the UI, but they are
stored in the database with more precision.
- Monetary : it is similar to using the Monetary field . It is recommended to use the latter as it offers more
functionalities.
Monetary : it is similar to using the Monetary field . It is recommended to use the latter as it offers more
functionalities.
- Percentage : displays a percent character % after the value.
Percentage : displays a percent character % after the value.
`%`
- Percentage Pie : displays the value inside a percentage circle, usually for a computed
value. The field cannot be edited manually, but a default value can be set.
Percentage Pie : displays the value inside a percentage circle, usually for a computed
value. The field cannot be edited manually, but a default value can be set.
- Progress Bar : displays the value next to a percentage bar, usually for a computed
value. The field cannot be edited manually, but a default value can be set.
Progress Bar : displays the value next to a percentage bar, usually for a computed
value. The field cannot be edited manually, but a default value can be set.
- Time : the value must follow the hh:mm format, with a maximum of 59 minutes.
Time : the value must follow the hh:mm format, with a maximum of 59 minutes.

#### Monetary (monetary)

`monetary`
The Monetary field is used for all monetary values.
When you first add a Monetary field, you are prompted to add a Currency field if none exists already on the model. Odoo offers to add the Currency field for
you. Once it is added, add the Monetary field again.

#### Html (html)

`html`
The Html field is used to add text that can be edited using the Odoo HTML editor.
- Multiline Text : disables the Odoo HTML editor to allow editing raw HTML.
Multiline Text : disables the Odoo HTML editor to allow editing raw HTML.

#### Date (date)

`date`
The Date field is used to select a date on a calendar.
- Remaining Days : the remaining number of days before the selected date is displayed
(e.g., In 5 days ), based on the current date. This field should be set to Read only .
Remaining Days : the remaining number of days before the selected date is displayed
(e.g., In 5 days ), based on the current date. This field should be set to Read only .

#### Date & Time (datetime)

`datetime`
The Date & Time field is used to select a date on a calendar and a time on a clock. The
userâs current time is automatically used if no time is set.
As well as general properties , some specific properties are available for Date & Time fields that have the Date & Time or Date Range widget set.
`daterange`
The Date Range widget is used to display a period of time defined by a start date and an
end date in a single line. A date range can have a mandatory start and end date, e.g., for a
multi-day event, or allow an optional start or end date, e.g., for a field service intervention or a
project task.
Adding a date range requires two fields: a Date & Time field with the Date Range widget set and another field that is selected as the start date or end
date. This underlying field can be an existing Date or Date & Time field, or one created specifically for this purpose.
- Identify an existing Date or Date & Time field that can be used as the
underlying start/end date field, or add a new one. If the date range: has a mandatory start date and end date, this field can be either the start date or end date;
the outcome is the same. allows an optional start or end date, this field is the start date or end date, respectively. Tip To avoid displaying the same information twice, the underlying start/end date field can be
made invisible by enabling Invisible or removed from the view by clicking Remove from view .
Identify an existing Date or Date & Time field that can be used as the
underlying start/end date field, or add a new one. If the date range:
- has a mandatory start date and end date, this field can be either the start date or end date;
the outcome is the same.
has a mandatory start date and end date, this field can be either the start date or end date;
the outcome is the same.
- allows an optional start or end date, this field is the start date or end date, respectively.
allows an optional start or end date, this field is the start date or end date, respectively.
To avoid displaying the same information twice, the underlying start/end date field can be
made invisible by enabling Invisible or removed from the view by clicking Remove from view .
- Add a Date & Time field and set the Widget field to Date Range .
Add a Date & Time field and set the Widget field to Date Range .
- Enter an appropriate Label .
Enter an appropriate Label .
- Select the underlying start/end date field from the Start date field or End date field dropdown, as relevant.
Select the underlying start/end date field from the Start date field or End date field dropdown, as relevant.
- If the date range should have a mandatory start and end date, enable Always range .
If the date range should have a mandatory start and end date, enable Always range .
- Update any other general properties or specific properties for Date & Time fields as needed, then
click Close in the upper right corner of the screen.
Update any other general properties or specific properties for Date & Time fields as needed, then
click Close in the upper right corner of the screen.
`remaining_days`
The Remaining Days widget displays the remaining number of days before the selected date
(e.g., In 5 days ), based on the current date and time. This field should be set to Read
only .

#### Checkbox (boolean)

`boolean`
The Checkbox field is used when a value should only be true or false, indicated by
checking or unchecking a checkbox.
- Button : displays a radio button. The widget works without switching to the edit mode.
Button : displays a radio button. The widget works without switching to the edit mode.
- Toggle : displays a toggle button. The widget works without switching to the edit mode.
Toggle : displays a toggle button. The widget works without switching to the edit mode.

#### Selection (selection)

`selection`
The Selection field is used when users should select a single value from a group of
predefined values.
- Badge : displays the value inside a rounded shape, similar to a tag. The value cannot
be edited on the UI, but a default value can be set.
Badge : displays the value inside a rounded shape, similar to a tag. The value cannot
be edited on the UI, but a default value can be set.
- Badges : displays all selectable values simultaneously inside rectangular shapes,
organized horizontally.
Badges : displays all selectable values simultaneously inside rectangular shapes,
organized horizontally.
- Priority : displays star symbols instead of values, which can be used to indicate an
importance or satisfaction level, for example. This has the same effect as selecting the Priority field , although, for the latter, four
priority values are already predefined.
Priority : displays star symbols instead of values, which can be used to indicate an
importance or satisfaction level, for example. This has the same effect as selecting the Priority field , although, for the latter, four
priority values are already predefined.
- Radio : displays all selectable values at the same time as radio buttons. Tip By default, radio buttons are organized vertically. Enable Display horizontally to
switch the way they are displayed.
Radio : displays all selectable values at the same time as radio buttons.
By default, radio buttons are organized vertically. Enable Display horizontally to
switch the way they are displayed.
- Status Bar : displays all selectable values at the same time as an arrow progress bar. Tip By default, values on the status bar are selectable. Disable Clickable to prevent
the value being edited on the UI.
Status Bar : displays all selectable values at the same time as an arrow progress bar.
By default, values on the status bar are selectable. Disable Clickable to prevent
the value being edited on the UI.

#### Priority (selection)

`selection`
The Priority field is used to display a three-star rating system, which can be used to
indicate importance or satisfaction level. This field type is a Selection field with the Priority widget selected by default
and four priority values predefined. Consequently, the Badge , Badges , Radio , and Selection widgets have the same effects as described under Selection .
To change the number of available stars by adding or removing values, click Edit
Values . Note that the first value is equal to 0 stars (i.e., when no selection is made), so
having four values results in a three-star rating system, for example.

#### File (binary)

`binary`
The File field is used to upload any type of file, or sign a form ( Sign widget).
- Image : users can upload an image file, which is then displayed in Form view . This has the same effect as using the Image field .
Image : users can upload an image file, which is then displayed in Form view . This has the same effect as using the Image field .
- PDF Viewer : users can upload a PDF file, which can be then browsed from the Form view .
PDF Viewer : users can upload a PDF file, which can be then browsed from the Form view .
- Sign : users can electronically sign the form. This has the same effect as selecting
the Sign field .
Sign : users can electronically sign the form. This has the same effect as selecting
the Sign field .

#### Image (binary)

`binary`
The Image field is used to upload an image and display it in Form view . This field type is a File field with the Image widget selected by default.
Consequently, the File , PDF Viewer , and Sign widgets have the
same effects as described under File .
To change the display size of uploaded images, select Small , Medium , or Large under the Size option.

#### Sign (binary)

`binary`
The Sign field is used to sign the form electronically. This field type is a File
field with the Sign widget selected by default.
Consequently, the File , Image , and PDF Viewer widgets have the
same effects as described under File .
To give users the Auto option when having to draw their signature, select one of the
available Auto-complete with fields ( Text , Many2One , and Related Field on the model only). The signature is
automatically generated using the data from the selected field.

### Relational fields

Non-default widgets, when available, are presented as bullet points or sub-headings.

#### Many2One (many2one)

`many2one`
The Many2One field is used to link another record (from another model) to the record
being edited. The recordâs name from the other model is then displayed on the record being edited.
On the Sales Order model, the Customer field is a Many2One field
pointing at the Contact model. This allows many sales orders to be linked to one contact (customer).
- To prevent users from creating a new record in the linked model, tick Disable
creation .
To prevent users from creating a new record in the linked model, tick Disable
creation .
- To prevent users from opening records in a pop-up window, tick Disable opening .
To prevent users from opening records in a pop-up window, tick Disable opening .
- To help users only select the right record, click on Domain to create a filter.
To help users only select the right record, click on Domain to create a filter.
- Badge : displays the value inside a rounded shape, similar to a tag. The value cannot
be edited on the UI.
Badge : displays the value inside a rounded shape, similar to a tag. The value cannot
be edited on the UI.
- Radio : displays all selectable values at the same time as radio buttons.
Radio : displays all selectable values at the same time as radio buttons.

#### One2Many (one2many)

`one2many`
The One2Many field is used to display the existing relations between a record on the
current model and multiple records from another model.
You could add a One2Many field on the Contact model to look at one customerâs many sales orders.
To use a One2Many field, the two models must have been linked already using a Many2One field . One2Many relations do not exist
independently: a reverse-search of existing Many2One relations is performed.

#### Lines (one2many)

`one2many`
The Lines field is used to create a table with rows and columns (e.g., the lines of
products on a sales order).
To modify the columns, click on the Lines field and then Edit List View .
To edit the form that pops up when a user clicks on Add a line , click on Edit Form View instead.

#### Many2Many (many2many)

`many2many`
The Many2Many field is used to link multiple records from another model to multiple
records on the current model. Many2Many fields can use Disable creation , Disable opening , Domain , just like Many2One fields .
On the Task model, the Assignees field is a Many2Many field pointing at
the Contact model. This allows a single user to be assigned to many tasks and many users to be assigned to a single task.
- Checkboxes : users can select several values using checkboxes.
Checkboxes : users can select several values using checkboxes.
- Tags : users can select several values appearing in rounded shapes, also known as tags . This has the same effect as selecting the Tags field .
Tags : users can select several values appearing in rounded shapes, also known as tags . This has the same effect as selecting the Tags field .

#### Tags (many2many)

`many2many`
The Tags field is used to display several values from another model appearing in rounded
shapes, also known as tags . This field type is a Many2Many field with the Tags widget selected by default.
Consequently, the Checkboxes and Many2Many widgets have the same effects as
described under Many2Many .
To display tags with different background colors, tick Use colors .

#### Related Field (related)

`related`
A Related Field is not a relational field per se; no relationship is created between
models. It uses an existing relationship to fetch and display information from another record.
To display the email address of a customer on the Sales Order model, use the Related
Field partner_id.email by selecting Customer and then Email .
`partner_id.email`

## Add a field to a view

With Studio, it is possible to add:
- a new field to a form or list view of a model
a new field to a form or list view of a model
- an existing field , i.e., a field that already exists on the model in question, to any view of that model
an existing field , i.e., a field that already exists on the model in question, to any view of that model
Add a new field to a form or list view to save it to the model and make it available as an
existing field in other views of the same model.

### Add a new field

Activate developer mode before adding a new field to see, and be able
to edit, the fieldâs technical name during configuration.
To add a new field, follow these steps:
- Navigate to the relevant form or list view, then click the ( Toggle Studio ) icon in the upper-right corner. Alternatively, with any app open,
click the ( Toggle Studio ) icon, then navigate to the relevant form
or list view.
Navigate to the relevant form or list view, then click the ( Toggle Studio ) icon in the upper-right corner. Alternatively, with any app open,
click the ( Toggle Studio ) icon, then navigate to the relevant form
or list view.
- In the Add tab, drag the relevant field type from the New Fields section and drop it in the desired
position. If the new field is a relational field , select
the relevant reciprocal field, model, or related field in the pop-up.
In the Add tab, drag the relevant field type from the New Fields section and drop it in the desired
position. If the new field is a relational field , select
the relevant reciprocal field, model, or related field in the pop-up.
- In the Properties tab, configure the fieldâs properties : Enter the Label to be displayed as the field name on the UI; this is also used to
generate the default technical name of the field. Click anywhere outside the Label field to see the Technical Name updated with the default technical name. Note The Technical Name of a new field can be edited in Studio during the
configuration process. At any other time, a fieldâs technical name can only be modified via the technical settings of the database . The technical name of a new field added using Studio is by default prefixed by x_studio_ . Optionally, select a different Widget via the dropdown; the default widget for the field type is selected by default. Optionally, configure any other field properties .
In the Properties tab, configure the fieldâs properties :
- Enter the Label to be displayed as the field name on the UI; this is also used to
generate the default technical name of the field.
Enter the Label to be displayed as the field name on the UI; this is also used to
generate the default technical name of the field.
- Click anywhere outside the Label field to see the Technical Name updated with the default technical name. Note The Technical Name of a new field can be edited in Studio during the
configuration process. At any other time, a fieldâs technical name can only be modified via the technical settings of the database . The technical name of a new field added using Studio is by default prefixed by x_studio_ .
Click anywhere outside the Label field to see the Technical Name updated with the default technical name.
- The Technical Name of a new field can be edited in Studio during the
configuration process. At any other time, a fieldâs technical name can only be modified via the technical settings of the database .
The Technical Name of a new field can be edited in Studio during the
configuration process. At any other time, a fieldâs technical name can only be modified via the technical settings of the database .
- The technical name of a new field added using Studio is by default prefixed by x_studio_ .
The technical name of a new field added using Studio is by default prefixed by x_studio_ .
`x_studio_`
- Optionally, select a different Widget via the dropdown; the default widget for the field type is selected by default.
Optionally, select a different Widget via the dropdown; the default widget for the field type is selected by default.
- Optionally, configure any other field properties .
Optionally, configure any other field properties .
- Click Close in the top-right corner to close Studio.
Click Close in the top-right corner to close Studio.

### Add an existing field

To add a field that exists on the model but that is not present on the current view, follow these
steps:
- Navigate to the relevant view, then click the ( Toggle
Studio ) icon in the upper-right corner. Alternatively, with any app open, click the ( Toggle Studio ) icon, then navigate to the relevant view.
Navigate to the relevant view, then click the ( Toggle
Studio ) icon in the upper-right corner. Alternatively, with any app open, click the ( Toggle Studio ) icon, then navigate to the relevant view.
- In the Add tab, in the left panel, click Existing
Fields to reveal a list of all the modelâs fields that are not currently
present in the view.
In the Add tab, in the left panel, click Existing
Fields to reveal a list of all the modelâs fields that are not currently
present in the view.
- Drag the relevant field and drop it in the desired position.
Drag the relevant field and drop it in the desired position.
- In the Properties tab, configure the relevant properties for the field in the current view. Note Various properties can be configured independently for different views, if needed, such as the Label , the Widget , the visibility of the field for certain user
groups, as well as whether or not the field is Invisible , Required ,
or Readonly .
In the Properties tab, configure the relevant properties for the field in the current view.
Various properties can be configured independently for different views, if needed, such as the Label , the Widget , the visibility of the field for certain user
groups, as well as whether or not the field is Invisible , Required ,
or Readonly .
- Click Close in the top-right corner to close Studio.
Click Close in the top-right corner to close Studio.

### Field properties

A series of general properties can be configured for most
combinations of field type and widget . Additional properties are
available depending on the specific field type and widget selected. For example, Date &
Time fields using the Date & Time or Date Range widget have various specific properties that can be configured.

#### General properties

- Class : Use Bootstrap or
other custom classes defined in Odoo to customize how the field is styled and displayed on the UI.
Class : Use Bootstrap or
other custom classes defined in Odoo to customize how the field is styled and displayed on the UI.
- Invisible : Enable this property when it is not necessary for users to view a field on
the UI. This helps declutter the UI by only showing the essential fields depending on a specific
situation.
Invisible : Enable this property when it is not necessary for users to view a field on
the UI. This helps declutter the UI by only showing the essential fields depending on a specific
situation.
- Required : Enable this property if a field should always be completed by the user
before being able to proceed.
Required : Enable this property if a field should always be completed by the user
before being able to proceed.
- Readonly : Enable this property if users should not be able to modify a field.
Readonly : Enable this property if users should not be able to modify a field.
- The Invisible property also applies inside Studio. To view hidden fields in
Studio, click on a viewâs View tab and enable Show Invisible Elements .
The Invisible property also applies inside Studio. To view hidden fields in
Studio, click on a viewâs View tab and enable Show Invisible Elements .
- The Invisible , Required , and Readonly properties can be
enabled for specific records only by clicking on Conditional and creating a filter. Example On the form view of the Contact model, the Title field only appears when Individual is selected, as that field would not be helpful for a Company contact.
The Invisible , Required , and Readonly properties can be
enabled for specific records only by clicking on Conditional and creating a filter.
On the form view of the Contact model, the Title field only appears when Individual is selected, as that field would not be helpful for a Company contact.
- Label : This is the field name on the UI; the label is used to generate the technical
name of the field.
Label : This is the field name on the UI; the label is used to generate the technical
name of the field.
- Help Tooltip : To explain the purpose of a field, add a description. The text is
displayed inside a tooltip box when hovering with your mouse over the question mark beside the
fieldâs label.
Help Tooltip : To explain the purpose of a field, add a description. The text is
displayed inside a tooltip box when hovering with your mouse over the question mark beside the
fieldâs label.
- Technical Name : To view a fieldâs technical name in Studio (and, during the
configuration of a new field, edit it if desired), activate developer mode . Tip If this field needs to be updated but is no longer editable via Studio, the technical name can
be modified via the technical settings of the database .
Technical Name : To view a fieldâs technical name in Studio (and, during the
configuration of a new field, edit it if desired), activate developer mode .
If this field needs to be updated but is no longer editable via Studio, the technical name can
be modified via the technical settings of the database .
- Widget : To change the default appearance or functionality of a field, select one of
the available widgets.
Widget : To change the default appearance or functionality of a field, select one of
the available widgets.
- Placeholder : To provide an example of how a field should be completed, add a fixed
placeholder text. The text appears in light gray until a value is entered.
Placeholder : To provide an example of how a field should be completed, add a fixed
placeholder text. The text appears in light gray until a value is entered.
- Dynamic Placeholder : To provide the value of the selected field as an example of how a
field should be completed. The text appears in light gray until a value is entered.
Dynamic Placeholder : To provide the value of the selected field as an example of how a
field should be completed. The text appears in light gray until a value is entered.
- Default value : To display a default value in a field when a record is created, add a
value.
Default value : To display a default value in a field when a record is created, add a
value.
- Allow visibility to groups : To limit which users can view the field, select one or
more user access groups .
Allow visibility to groups : To limit which users can view the field, select one or
more user access groups .
- Forbid visibility to groups : To prevent certain users from seeing the field, select
one or more user access groups .
Forbid visibility to groups : To prevent certain users from seeing the field, select
one or more user access groups .

#### Properties for Date & Time fields

For Date & Time fields using the Date & Time or Date Range widget, some specific properties are available:
- Minimal precision : Determine the smallest date unit that must be selected in the date
selector. The possible values are Day , Month , Year or Decade . If no value is selected, the
user must select a day in the date selector.
Minimal precision : Determine the smallest date unit that must be selected in the date
selector. The possible values are Day , Month , Year or Decade . If no value is selected, the
user must select a day in the date selector.
`Day`
`Month`
`Year`
`Decade`
- Maximal precision : Determine the largest date unit that can be used to navigate the
date selector. The possible values are Day , Month , Year or Decade . If no value is
selected, the user can navigate the date selector by decade.
Maximal precision : Determine the largest date unit that can be used to navigate the
date selector. The possible values are Day , Month , Year or Decade . If no value is
selected, the user can navigate the date selector by decade.
`Day`
`Month`
`Year`
`Decade`
- Warning for future dates : Enable this property to display a warning icon if a future
date is selected.
Warning for future dates : Enable this property to display a warning icon if a future
date is selected.
- Condensed display : Enable this property to show days, months and hours with no leading
zeros, e.g., 4/2/2025 8:05:00 instead of 04/02/2025 08:05:00 .
Condensed display : Enable this property to show days, months and hours with no leading
zeros, e.g., 4/2/2025 8:05:00 instead of 04/02/2025 08:05:00 .
`4/2/20258:05:00`
`04/02/202508:05:00`
- Show time : This property is enabled by default for Date & Time fields. On
a read-only field, disable the property to show only the date. This can keep a list view less
cluttered, for example.
Show time : This property is enabled by default for Date & Time fields. On
a read-only field, disable the property to show only the date. This can keep a list view less
cluttered, for example.
- Show seconds : This property is enabled by default for Date & Time fields.
Disable the property to show only hours and minutes.
Show seconds : This property is enabled by default for Date & Time fields.
Disable the property to show only hours and minutes.
- Time interval : Enter a value to determine the minute intervals shown in the time
selector. For example, enter 15 to allow quarter-hour intervals. The default value is set to 5
minutes.
Time interval : Enter a value to determine the minute intervals shown in the time
selector. For example, enter 15 to allow quarter-hour intervals. The default value is set to 5
minutes.
- Earliest accepted date : Enter the earliest date that can be selected in the date
selector in ISO-format, i.e., YYYY-MM-DD . If the current date is always the earliest accepted
date, enter today . On the date selector, dates prior to the earliest accepted date are grayed
out.
Earliest accepted date : Enter the earliest date that can be selected in the date
selector in ISO-format, i.e., YYYY-MM-DD . If the current date is always the earliest accepted
date, enter today . On the date selector, dates prior to the earliest accepted date are grayed
out.
`YYYY-MM-DD`
`today`
- Latest accepted date : Enter the latest date that can be selected in the date
selector in ISO-format, i.e., YYYY-MM-DD . If the current date is always the latest accepted
date, enter today . On the date selector, dates later than the latest accepted date are grayed
out.
Latest accepted date : Enter the latest date that can be selected in the date
selector in ISO-format, i.e., YYYY-MM-DD . If the current date is always the latest accepted
date, enter today . On the date selector, dates later than the latest accepted date are grayed
out.
`YYYY-MM-DD`
`today`

## Modify a fieldâs properties

To modify the properties of a field, follow these steps:
- Navigate to the relevant view, then click the ( Toggle
Studio ) icon in the upper-right corner. Alternatively, with any app open, click the ( Toggle Studio ) icon, then navigate to the relevant view.
Navigate to the relevant view, then click the ( Toggle
Studio ) icon in the upper-right corner. Alternatively, with any app open, click the ( Toggle Studio ) icon, then navigate to the relevant view.
- Click on the relevant field.
Click on the relevant field.
- In the Properties tab, make any desired changes to the field
properties . Tip Various properties can be configured independently for different views, such as the Label , the Widget , the visibility of the field for certain user
groups, as well as whether or not the field is Invisible , Required , or Readonly .
In the Properties tab, make any desired changes to the field
properties .
Various properties can be configured independently for different views, such as the Label , the Widget , the visibility of the field for certain user
groups, as well as whether or not the field is Invisible , Required , or Readonly .
- Click Close in the top-right corner to close Studio.
Click Close in the top-right corner to close Studio.
The Technical Name of a field (visible in Studio with developer mode activated) cannot be modified in Studio; this can be done via the
technical settings of the database .

### Modify a fieldâs technical name

To modify the technical name of a field, activate developer mode , then
follow these steps:
- With the field open in Studio, copy the technical name of the field.
With the field open in Studio, copy the technical name of the field.
- Remove the field from all views in Studio, then click Close to close Studio.
Remove the field from all views in Studio, then click Close to close Studio.
- Navigate to Settings app â£ Technical â£ Fields .
Navigate to Settings app â£ Technical â£ Fields .
- Paste the copied technical name into the search bar, then open the relevant field.
Paste the copied technical name into the search bar, then open the relevant field.
- Modify the Field Name as needed.
Modify the Field Name as needed.
Once the fieldâs technical name has been updated, the field can then be added (back) to the
relevant view(s) from the list of existing fields.
When updating the technical name of a field, make sure to keep at least the x_ prefix, which is
required for any custom field; for fields created using Studio, keep the x_studio_ prefix to
allow such fields to be more easily identified.
`x_`
`x_studio_`

## Remove a field from a view

To remove a field from a view, follow these steps:
- Navigate to the relevant view, then click the ( Toggle
Studio ) icon in the upper-right corner. Alternatively, with any app open, click the ( Toggle Studio ) icon, then navigate to the relevant view.
Navigate to the relevant view, then click the ( Toggle
Studio ) icon in the upper-right corner. Alternatively, with any app open, click the ( Toggle Studio ) icon, then navigate to the relevant view.
- Click on the relevant field.
Click on the relevant field.
- Scroll to the bottom of the Properties tab, then click Remove from view .
Scroll to the bottom of the Properties tab, then click Remove from view .
- Click Ok to confirm the action.
Click Ok to confirm the action.
- A removed field can be easily added back to the view at a
later stage, if needed.
A removed field can be easily added back to the view at a
later stage, if needed.
- If the intention is to declutter the view, it is also possible to modify a field and make it Invisible on the view in question.
If the intention is to declutter the view, it is also possible to modify a field and make it Invisible on the view in question.

Field types
Simple fields
Relational fields
Add a field to a view
Add a new field
Add an existing field
Field properties
Modify a fieldâs properties
Modify a fieldâs technical name
Remove a field from a view


Models, modules, and apps

# Models, modules, and apps

Models determine the logical structure of a database and how data is stored, organized, and
manipulated. In other words, a model is a table of information that can be linked with other tables.
A model usually represents a business concept, such as a sales order , contact , or product .
Modules and apps contain various elements, such as models, views, data files, web controllers, and
static web data.
All apps are modules. Larger, standalone modules are typically referred to as apps, whereas other
modules usually serve as add-ons to said apps.

## Suggested features

When you create a new model or app with Studio, you can choose to add up to 14 features to speed
up the creation process. These features bundle fields, default settings, and views that are usually
used together to provide some standard functionality. Most of these features can be added later on,
but adding them from the start makes the model creation process much easier. Furthermore, these
features interact together in some cases to increase their usefulness.
Creating a model with the Picture and Pipeline stages features enabled adds the
image in the card layout of the Kanban view .

### Contact details

Selecting Contact details adds to the Form view a Many2One field linked to the Contact model and
two of its Related Fields : Phone and Email . The Contact field is also added to the List view , and the Map view is activated.

### User assignment

Selecting User assignment adds to the Form view a Many2One field linked to the Contact model, with
the following Domain : Share User is not set to only allow the selection of Internal
Users . In addition, the many2one_avatar_user widget is used to display the userâs
avatar. The Responsible field is also added to the List view .
`ShareUserisnotset`

### Date & Calendar

Selecting Date & Calendar adds to the Form view a Date field and activates the Calendar view .

### Date range & Gantt

Selecting Date range & Gantt adds to the Form view two Date fields next to each other: one to set a start
date, the other to set an end date, using the daterange widget, and activates the Gantt view .

### Pipeline stages

Selecting Pipeline stages activates the Kanban view , adds several fields such as Priority and Kanban State , and three stages: New , In Progress , and Done . The Pipeline status bar and the Kanban State field are added to the Form view . The Color field is added to the List view .
The Pipeline stages feature can be added at a later stage.

### Tags

Selecting Tags adds to the Form and List views a Tags field , creating a Tag model with preconfigured access rights in
the process.

### Picture

Selecting Picture adds to the top-right of the Form view an Image field .
The Picture feature can be added at a later stage.

### Lines

Selecting Lines : adds to the Form view a Lines
field inside a Tab component.

### Notes

Selecting Notes adds to the Form view an Html
field using the full width of the form.

### Monetary value

Selecting Monetary value adds to the Form and List views a Monetary field . The Graph and Pivot views are also activated.
A Currency field is added and hidden from the view.

### Company

Selecting Company adds to the Form and List views a Many2One field linked to the Company model.
This is only useful if you work in a multi-company environment.

### Custom Sorting

Selecting Custom Sorting adds to the List view a drag handle icon to manually reorder records.

### Chatter

Selecting Chatter adds to the Form view Chatter
functionalities (sending messages, logging notes, and scheduling activities).
The Chatter feature can be added at a later stage.

### Archiving

Selecting Archiving adds to the Form and List views the Archive action and hides archived
records from searches and views by default.

## Export and import customizations

When you do any customization with Studio, a new module named studio_customization is
added to your database. You can export this module as a ZIP file using the Studio Export function. The module can then be imported into another Odoo database. This may be useful, for
example, when setting up a new module or for training purposes.
`studio_customization`
Exporting and importing customizations in this way, rather than using the standard Odoo
export and import functions, means data is imported in a
logical way. For example, if the module contains customers and sales orders, the customers are
created first, since these are required for the sales orders to be created.

### Export customizations

To export customizations, click the (Toggle Studio) button on the main
Odoo dashboard, then Export , then either:
- download all Studio customizations by clicking the Export button; or
download all Studio customizations by clicking the Export button; or
- choose what data to export by clicking Configure data and demo data to export .
choose what data to export by clicking Configure data and demo data to export .

#### Configure data to export

To select specific models to export, click New on the Studio Export screen,
then start typing the name of the relevant model or select it from the list.
Click Preset to see a list of all models in your database with records that have
been modified using Studio and all custom models created using Studio. To configure one of these
models for export, click on the model to open it and make the required changes.
Tick the following options as relevant:
- Demo : if the exported records should be considered as demo data when imported.
Demo : if the exported records should be considered as demo data when imported.
- Attachments : if attachments related to exported records should be included in the
export.
Attachments : if attachments related to exported records should be included in the
export.
- Updatable : if the exported records should be able to be updated during a module update.
Updatable : if the exported records should be able to be updated during a module update.
If necessary, edit the Domain to determine which of the modelâs records should be
exported. To do so, click the Edit Domain button or (Modify filter) then Edit Domain , as appropriate. Proceed to make any
required changes.
After configuring a model for export, click Studio Export to return to the main screen.
To download a ZIP file with the customizations for all the listed models, click Export .
It is not necessary to select one or more models as all listed models will be included in the
export. To remove a model from the export, select it and click the Actions button then Delete .
In the Studio Export window:
- leave the checkboxes unticked to export only the customizations done with Studio.
leave the checkboxes unticked to export only the customizations done with Studio.
- tick Include Data to include data from the selected models in the export.
tick Include Data to include data from the selected models in the export.
- tick Include Demo Data to include data from the selected models that is flagged
as demo data. Ticking this option also ticks Include Data .
tick Include Demo Data to include data from the selected models that is flagged
as demo data. Ticking this option also ticks Include Data .
Click the Export button to download the ZIP file.

### Import customizations

Before importing, make sure the destination database is on the same Odoo version and contains the
same apps and modules as the source database. Studio does not add the underlying modules as
dependencies of the exported module.
To import and install Studio customizations in another Odoo database:
- Connect to the destination database.
Connect to the destination database.
- Click the (Toggle Studio) button on the main Odoo dashboard, then Import .
Click the (Toggle Studio) button on the main Odoo dashboard, then Import .
- Upload the exported ZIP file. If demo data should be imported, tick Load demo data .
Upload the exported ZIP file. If demo data should be imported, tick Load demo data .
- Click Install .

Suggested features
Contact details
User assignment
Date & Calendar
Date range & Gantt
Pipeline stages
Tags
Picture
Lines
Notes
Monetary value
Company
Custom Sorting
Chatter
Archiving
Export and import customizations
Export customizations
Import customizations


PDF reports

# PDF reports

With Studio, you can edit existing PDF reports (e.g., invoices,
quotations, etc.) or create new ones .

## Default layout

The default layout of reports is managed outside Studio. Go to Settings , then, in
the Companies section of the main page, click Configure Document Layout .
Layout settings are company-specific but apply to all reports.
You can see how the different settings affect the report layout in the report preview on the
right side of the Configure your document layout window. When creating or editing a
report, you can see a preview of the report by clicking Print preview on the left
side of the screen.
Use the following settings:
- Layout : Seven layouts are available: Light Boxed Bold Striped Bubble Wave Folder
Layout : Seven layouts are available:
- Background : The following backgrounds are available: Blank : Nothing is displayed. Demo logo : A demo logo is displayed in the background. Custom : Upload a custom background image.
Background : The following backgrounds are available:
- Blank : Nothing is displayed.
Blank : Nothing is displayed.
- Demo logo : A demo logo is displayed in the background.
Demo logo : A demo logo is displayed in the background.
- Custom : Upload a custom background image.
Custom : Upload a custom background image.
- Text : Eight fonts are available: Lato, Roboto, Open Sans, Montserrat, Oswald,
Raleway, Tajawal (which supports Arabic and Latin scripts), and Fira Mono. Go to the Google Fonts
website to preview them.
Text : Eight fonts are available: Lato, Roboto, Open Sans, Montserrat, Oswald,
Raleway, Tajawal (which supports Arabic and Latin scripts), and Fira Mono. Go to the Google Fonts
website to preview them.
- Company logo : Click the Edit button to upload or change the logo. This
adds the logo to the companyâs record on the Company model, which you can access by going to Settings and then clicking Update Info in the Companies section.
Company logo : Click the Edit button to upload or change the logo. This
adds the logo to the companyâs record on the Company model, which you can access by going to Settings and then clicking Update Info in the Companies section.
- Colors : Change the primary and secondary colors used to structure reports. The default
colors are automatically generated based on the colors of the logo.
Colors : Change the primary and secondary colors used to structure reports. The default
colors are automatically generated based on the colors of the logo.
- Address : The company name and address are displayed in the header of external
reports . You can add multiple lines of text.
Address : The company name and address are displayed in the header of external
reports . You can add multiple lines of text.
- Tagline : This is displayed in the header of external reports using the Light, Striped, Bubble, Wave and Folder
layouts and in the footer of external reports using the Boxed and Bold layouts. You
can add multiple lines of text.
Tagline : This is displayed in the header of external reports using the Light, Striped, Bubble, Wave and Folder
layouts and in the footer of external reports using the Boxed and Bold layouts. You
can add multiple lines of text.
- Footer : This text is used in the footer of external reports . You can add multiple lines of text. You can also
edit the footer using the report editor .
Footer : This text is used in the footer of external reports . You can add multiple lines of text. You can also
edit the footer using the report editor .
- Paper format : This defines the default paper size of reports. You can select A4 (21 cm x 29.7 cm) and US Letter (21.59 cm x 27.54 cm). This can also be
defined for individual reports in the Paper format field in Studio . Note Other paper formats may be available depending on which apps or modules you have installed, for
example, label sheets for the Inventory app or event badges for the Events app.
Paper format : This defines the default paper size of reports. You can select A4 (21 cm x 29.7 cm) and US Letter (21.59 cm x 27.54 cm). This can also be
defined for individual reports in the Paper format field in Studio .
Other paper formats may be available depending on which apps or modules you have installed, for
example, label sheets for the Inventory app or event badges for the Events app.

## Creating new PDF reports

To create a new report for a model ,
(e.g., sales orders) access the model, click the ( Toggle Studio )
button, then click Reports . Click New and, in the popup window that opens,
select the type of report. This is solely used to determine what is displayed in the header and
footer:
- External : The header displays the companyâs logo and its name and address . For reports using the
Light, Striped, Bubble, Wave and Folder layouts, the tagline also appears in the header. The footer displays the values set in the Footer field and the page number. For
reports using the Boxed and Bold layouts, the tagline also appears in the footer.
- The header displays the companyâs logo and its name and address . For reports using the
Light, Striped, Bubble, Wave and Folder layouts, the tagline also appears in the header.
The header displays the companyâs logo and its name and address . For reports using the
Light, Striped, Bubble, Wave and Folder layouts, the tagline also appears in the header.
- The footer displays the values set in the Footer field and the page number. For
reports using the Boxed and Bold layouts, the tagline also appears in the footer.
The footer displays the values set in the Footer field and the page number. For
reports using the Boxed and Bold layouts, the tagline also appears in the footer.
- Internal : The header displays the userâs current date and time, the companyâs name and address and the page number. There is
no footer.
Internal : The header displays the userâs current date and time, the companyâs name and address and the page number. There is
no footer.
- Blank : There is neither a header nor a footer. Click in the upper left corner of the
page to edit the report.
Blank : There is neither a header nor a footer. Click in the upper left corner of the
page to edit the report.
Once you have created the report, you can start editing it .

## Editing PDF reports

To access the reports available for a model, access the model, click the ( Toggle Studio ) button, then click Reports . Select an
existing report to open it.
Alternatively, you can also open Studio, click Reports , and search for a specific
report or model.
It is strongly recommended to duplicate the standard report and make changes in the
duplicated version. To duplicate a report, hover the mouse pointer on the top right corner
of the report, click the ( vertical ellipsis ) icon, and
then select Duplicate .

### Options

Once you have selected or created a report, you can use the options in the left part of the screen
to:
- Change the Report name : The new name is applied everywhere (in Studio, in the Print menu under the ( gear ) icon in the form view, and in
the PDF file name).
Change the Report name : The new name is applied everywhere (in Studio, in the Print menu under the ( gear ) icon in the form view, and in
the PDF file name).
- Modify the Paper format : If no value is selected, the format defined in the default layout is used.
Modify the Paper format : If no value is selected, the format defined in the default layout is used.
- Show in print menu : to add the report to the Print menu in the form view.
Show in print menu : to add the report to the Print menu in the form view.
- Reload from attachment : to save the report as an attachment on the record the first
time it is generated and reload the original version of the report any subsequent time. This is
legally required for invoices and is mainly used in this case.
Reload from attachment : to save the report as an attachment on the record the first
time it is generated and reload the original version of the report any subsequent time. This is
legally required for invoices and is mainly used in this case.
- Limit visibility to groups : to limit the availability of the PDF report to specific user groups .
Limit visibility to groups : to limit the availability of the PDF report to specific user groups .
- Edit sources : to modify the report directly in the XML file .
Edit sources : to modify the report directly in the XML file .
- Reset report : to discard all changes made to the report and reset it to its standard
version.
Reset report : to discard all changes made to the report and reset it to its standard
version.
- Print preview : to generate and download a report preview.
Print preview : to generate and download a report preview.

### Report editor

The report editor allows you to modify the content and formatting of the report.
- You can Undo or Redo changes using the related buttons or the shortcuts CTRL + Z and CTRL + Y .
You can Undo or Redo changes using the related buttons or the shortcuts CTRL + Z and CTRL + Y .
`CTRL`
`Z`
`CTRL`
`Y`
- Changes are saved automatically when you leave the report or manually using the Save button.
Changes are saved automatically when you leave the report or manually using the Save button.
- You can reset the report to its standard version by clicking the Reset report button
in the left part of the screen.
You can reset the report to its standard version by clicking the Reset report button
in the left part of the screen.
Editing the header and footer of a report impacts all standard and custom reports.

#### Conditional blocks

The dashed rectangles represent conditional blocks ( if/else statements). These are used to
show/hide content based on specific conditions. Click on the block to view the conditions.
Select a value to preview its corresponding output and edit it if necessary.
Conditions can only be edited in the XML .

#### Other content

There are two types of text content in reports:
- Static text, i.e., the text that is not highlighted in blue, which can be modified directly in the
editor.
Static text, i.e., the text that is not highlighted in blue, which can be modified directly in the
editor.
- Dynamic text, i.e., the text that is highlighted in blue, which is replaced by field values when the report is generated, e.g., the sales order number or
the quotation date.
Dynamic text, i.e., the text that is highlighted in blue, which is replaced by field values when the report is generated, e.g., the sales order number or
the quotation date.
You can add content (e.g., fields, lists, tables, images, banners, etc.) to the report using
commands. Type / to open the powerbox , then type the
commandâs name or select it from the list.
`/`
To add static text to the report, type the text where you want it.
For more advanced changes, you can edit the report in the XML directly .
To add a field, type / and select the Field command. In the list that opens, select
or search for the field; click the right arrow next to the field name to access the list of related
fields if needed. Then, specify the default value that will be shown if the field is not completed
in the record and press Enter .
`/`
`Enter`
There are two types of tables in reports:
- Static tables , which are used to display static text or fields. For this type of table, you define
the number of columns and rows when adding the table.
Static tables , which are used to display static text or fields. For this type of table, you define
the number of columns and rows when adding the table.
- Dynamic tables , which are used to display data from relational fields .
For this type of table, you only define the number of columns when adding the table. The number
of rows in the generated report will be determined by the number of records in the related model
that are linked with the current model. Example In a sales order report, a dynamic table is used to show the order lines related to the sales
order. If the sales order contains 10 order lines, the table in the generated report has 10 rows;
if it contains two order lines, the table has two rows.
Dynamic tables , which are used to display data from relational fields .
For this type of table, you only define the number of columns when adding the table. The number
of rows in the generated report will be determined by the number of records in the related model
that are linked with the current model.
In a sales order report, a dynamic table is used to show the order lines related to the sales
order. If the sales order contains 10 order lines, the table in the generated report has 10 rows;
if it contains two order lines, the table has two rows.
To add a static table, type / and select the Table command. Determine the number of
columns and rows for the table. Once the table has been added, you can start editing it.
`/`
You can insert, move and delete columns and rows using the table tools. Position the cursor on top
of the column or to the left of the row then click the purple rectangle and select an option.
To resize a column, drag the column border to the desired position; reset all columns
to their standard size by selecting Reset Size from the table tools.
Add the field of your choice in a cell or add static text
by typing.
To add text in a structured way without using a table, you can use columns. Add columns by
typing / and selecting the appropriate command: 2 columns , 3 columns or 4 columns .
`/`
- Only relations of type one2many or many2many can be displayed as dynamic tables.
Only relations of type one2many or many2many can be displayed as dynamic tables.
`one2many`
`many2many`
- An existing dynamic table in a standard report has a more complex structure than a dynamic table
you add yourself. For such tables, it is possible to insert or delete columns; it is not possible
to move columns or to insert, move or delete rows.
An existing dynamic table in a standard report has a more complex structure than a dynamic table
you add yourself. For such tables, it is possible to insert or delete columns; it is not possible
to move columns or to insert, move or delete rows.
To add a dynamic table, type / and select the Dynamic Table command. In the list that
opens, select or search for the relation the table will be based on and press Enter . Once the
table has been added, you can start editing it.
`/`
`Enter`
You can insert, move and delete columns using the table tools, as for a static table . It is also possible to insert static rows
that will appear above or below the generated rows.
To add a field to a cell, delete any placeholder text then add the field of your choice . The dialog box that opens shows the source object for the
field (e.g., the Order Lines model) and the list of available fields.
Replace the Column name label by the label of your choice.
The default row automatically iterates over the fieldâs content, generating a row on the report
for each field value (e.g., one row per order line).
To format text in the report, select it, then format it using the options in the text editor .

### Editing the reportâs XML

Modifying the XML directly may result in report issues during upgrades . If this happens, simply copy your changes from the old
database into your upgraded database.
To edit the reportâs XML, click Edit sources in the left pane.

#### Examples

To change how data is presented in your report, you can modify a fieldâs default widget manually. In the example below, the order date shows
the date and time by default, while the unit price defaults to a precision of two decimal
places.
By using t-options , in this case the widget option, these fields can be modified to show
only the date and a precision of four decimal places, respectively:
`t-options`
`widget`
If you want to show/hide content based on specific conditions, you can manually add if/else control statements in the report XML.
`if/else`
For example, if you want to hide a custom data table if there are no tags, you can use the t-if attribute to define the condition, which is then evaluated as True or False . The table will
not be displayed if there are no tags in the quotation.
`t-if`
`True`
`False`
If you want to display another block in case the t-if statement is evaluated as False , you
can specify it using the t-else statement. The t-else block must directly follow the t-if block in the document structure. There is no need to specify any condition in the t-else attribute. As an example, letâs show a quick message explaining that there are no tags on the
quotation:
`t-if`
`False`
`t-else`
`t-else`
`t-if`
`t-else`
By using the t-if/t-else notation, the report editor recognizes that these sections are
mutually exclusive and should be displayed as conditional blocks:
`t-if/t-else`
You can switch conditions using the editor to preview their output:
If you wish to have multiple options, you can also use t-elif directives to add intermediary
conditions. For example, this is how the title of sales order reports changes based on the
condition of the underlying document.
`t-elif`
The title Pro-Forma Invoice is used depending on some contextual conditions. If these
conditions are not met and the state of the document is either draft or sent , then Quotation is used. If none of those conditions are met, the reportâs title is Order .
`draft`
`sent`
Working with images in a report can be challenging, as precise control over image size and
behavior is not always obvious. You can insert image fields using the report editor
(by using the Field command ), but inserting them in XML
using the t-field directive and accompanying t-options attributes provides better sizing and
positioning control.
`t-field`
`t-options`
For example, the following code outputs the field image_128 of the lineâs product as a
64px-wide image (with an automatic height based on the imageâs aspect ratio).
`image_128`
The following options are available for image widgets:
- width : width of the image, usually in pixels or CSS length units (e.g., rem ) (leave empty
for auto-width).
width : width of the image, usually in pixels or CSS length units (e.g., rem ) (leave empty
for auto-width).
`width`
`rem`
- height : height of the image, usually in pixels or CSS length units (e.g., rem ) (leave empty
for auto-height).
height : height of the image, usually in pixels or CSS length units (e.g., rem ) (leave empty
for auto-height).
`height`
`rem`
- class : CSS classes applied on the img tag; Bootstrap classes are available.
class : CSS classes applied on the img tag; Bootstrap classes are available.
`class`
`img`
- alt : alternative text of the image
alt : alternative text of the image
`alt`
- style : style attribute; it allows you to override styles more freely than with Bootstrap classes .
style : style attribute; it allows you to override styles more freely than with Bootstrap classes .
`style`
These attributes must contain strings, i.e., text enclosed within quotes within quotes, e.g., t-options-width="'64px'" (or, alternatively, a valid Python expression).
`t-options-width="'64px'"`
The image widget cannot be used on an img tag. Instead, set the t-field directive on a span (for inline content) or div (for block content) node.
`img`
`t-field`
`span`
`div`
For example, letâs add a column with the product image in the quotation table:
The t-options-width attribute restricts the image width to 64 pixels, and the Bootstrap classes
used in t-options-class create a thumbnail-like border with rounded corners and a shadow.
`t-options-width`
`t-options-class`

Default layout
Creating new PDF reports
Editing PDF reports
Options
Report editor
Editing the reportâs XML


Views

# Views

Views are the interface that allows displaying the data contained in a model . One model can have several views, which are simply different ways to show
the same data. In Studio, views are organized into four categories: general , multiple records , timeline , and reporting .
- To change the default view of a model, access Studio , go to Views , click the ( ellipsis ) icon next to the
desired view, and click Set as Default .
To change the default view of a model, access Studio , go to Views , click the ( ellipsis ) icon next to the
desired view, and click Set as Default .
- You can modify views using the built-in XML editor: Activate the Developer mode , go to the view you want to edit, select the View tab, and
click </> XML . Important If you are editing a view using the XML editor, avoid making changes directly to standard
and inherited views, as these would be reset and lost during updates or module upgrades.
Always make sure you select the right Studio inherited views: When you modify a
view in Studio by dragging and dropping a new field, for example, a specific Studio
inherited view and its corresponding XPath, which defines the modified part of the view, are
automatically generated.
You can modify views using the built-in XML editor: Activate the Developer mode , go to the view you want to edit, select the View tab, and
click </> XML .
If you are editing a view using the XML editor, avoid making changes directly to standard
and inherited views, as these would be reset and lost during updates or module upgrades.
Always make sure you select the right Studio inherited views: When you modify a
view in Studio by dragging and dropping a new field, for example, a specific Studio
inherited view and its corresponding XPath, which defines the modified part of the view, are
automatically generated.

## General views

The settings described below are found under the viewâs View tab unless specified
otherwise.

### Form

The Form view is used when creating and editing records, such as
contacts, sales orders, products, etc.
- To structure a form, drag and drop the Tabs and Columns element found under the + Add tab.
To structure a form, drag and drop the Tabs and Columns element found under the + Add tab.
- To prevent users from creating, editing, or deleting records, untick Can Create , Can Edit , or Can Delete .
To prevent users from creating, editing, or deleting records, untick Can Create , Can Edit , or Can Delete .
- To add a button, click Add a button at the top of the form, enter a Label ,
and select the buttonâs action: Run a Server Action : select the server action to
be executed from the dropdown list; Call a method : specify an existing Python method already defined in Odoo.
To add a button, click Add a button at the top of the form, enter a Label ,
and select the buttonâs action:
- Run a Server Action : select the server action to
be executed from the dropdown list;
Run a Server Action : select the server action to
be executed from the dropdown list;
- Call a method : specify an existing Python method already defined in Odoo.
Call a method : specify an existing Python method already defined in Odoo.
- To change a buttonâs label or style, click the button and edit its Label or Class (either btn-primary or btn-secondary ) in the Properties tab.
To change a buttonâs label or style, click the button and edit its Label or Class (either btn-primary or btn-secondary ) in the Properties tab.
`btn-primary`
`btn-secondary`
- To add a smart button, click the ( plus ) icon in the top-right
corner of the form. Enter a Label , choose an Icon , and select a related field .
To add a smart button, click the ( plus ) icon in the top-right
corner of the form. Enter a Label , choose an Icon , and select a related field .

### Activity

The Activity view is used to schedule and have an overview of
activities (emails, calls, etc.) linked to records.
This view can only be modified within Studio by editing the XML code.

### Search

The Search view is added on top of other views to filter, group, and
search records.
- To add custom Filters and structure them using Separators , go to the + Add tab and drag and drop them under Filters .
To add custom Filters and structure them using Separators , go to the + Add tab and drag and drop them under Filters .
- To add an existing field under the search dropdown menu, go to the + Add tab and
drag and drop it under Autocompletion Fields .
To add an existing field under the search dropdown menu, go to the + Add tab and
drag and drop it under Autocompletion Fields .

## Multiple records views

The settings described below are found under the viewâs View tab unless specified
otherwise.

### Kanban

The Kanban view is often used to support business flows by moving
records across stages or as an alternative way to display records inside cards .
If the Kanban view exists, it is used by default to display data on mobile devices
instead of the List view .
- To prevent users from creating new records, untick Can Create .
To prevent users from creating new records, untick Can Create .
- To create records directly within the view, in a minimalistic form, enable Quick
Create .
To create records directly within the view, in a minimalistic form, enable Quick
Create .
- To set a default grouping for records, select a field under Default Group By .
To set a default grouping for records, select a field under Default Group By .

### List

The List view is used to overview many records at once, look for
records, and edit simple records.
- To prevent users from creating, editing, or deleting records, untick Can Create , Can Edit , or Can Delete .
To prevent users from creating, editing, or deleting records, untick Can Create , Can Edit , or Can Delete .
- To create and edit records directly within the view, select either Add record at the
bottom , Add record on top or Open form view under When Creating Record . Note This prevents users from opening records in Form view from the List view.
To create and edit records directly within the view, select either Add record at the
bottom , Add record on top or Open form view under When Creating Record .
This prevents users from opening records in Form view from the List view.
- To edit several records at once, tick Enable Mass Editing .
To edit several records at once, tick Enable Mass Editing .
- To change the way records are sorted by default, select a field under Sort By .
To change the way records are sorted by default, select a field under Sort By .
- To set a default grouping for records, select a field under Default Group By .
To set a default grouping for records, select a field under Default Group By .
- To add a button, click Add a button at the top of the list, enter a Label ,
and select the buttonâs action: Run a Server Action : select the server action to
be executed from the dropdown list; Call a method : specify an existing Python method already defined in Odoo.
To add a button, click Add a button at the top of the list, enter a Label ,
and select the buttonâs action:
- Run a Server Action : select the server action to
be executed from the dropdown list;
Run a Server Action : select the server action to
be executed from the dropdown list;
- Call a method : specify an existing Python method already defined in Odoo.
Call a method : specify an existing Python method already defined in Odoo.
To add a ( drag handle ) icon to reorder records manually, add an Integer field with the Handle widget.

### Map

The Map view is used to display records on a map. For example, it
is used in the Field Service app to plan an itinerary between different tasks.
A Many2One field linked to the Contact model
is required to activate the view, as the contact address is used to position records on the map.
- To select which kind of contact should be used on the map, select it under Contact
Field .
To select which kind of contact should be used on the map, select it under Contact
Field .
- To hide the name or the address of the record, tick Hide Name or Hide
Address .
To hide the name or the address of the record, tick Hide Name or Hide
Address .
- To add information from other fields, select them under Additional Fields .
To add information from other fields, select them under Additional Fields .
- To have a route suggested between the different records, tick Enable Routing and
select which field should be used to sort records for the routing.
To have a route suggested between the different records, tick Enable Routing and
select which field should be used to sort records for the routing.

## Timeline views

- When you first activate one of the timeline views, you need to select which Date or Date & Time fields on your model should be used to define when the
records start and stop in order to display them on the view. You can modify the Start Date Field and Stop Date Field after activating the view.
When you first activate one of the timeline views, you need to select which Date or Date & Time fields on your model should be used to define when the
records start and stop in order to display them on the view. You can modify the Start Date Field and Stop Date Field after activating the view.
- The settings described below are found under the viewâs View tab unless specified
otherwise.
The settings described below are found under the viewâs View tab unless specified
otherwise.

### Calendar

The Calendar view is used to overview and manage records inside a
calendar.
- To create records directly within the view instead of opening the Form view , enable Quick Create . Note This only works on specific models that can be quick-created using only a name . However,
most models do not support quick creation and open the Form view to fill in the
required fields.
To create records directly within the view instead of opening the Form view , enable Quick Create .
This only works on specific models that can be quick-created using only a name . However,
most models do not support quick creation and open the Form view to fill in the
required fields.
- To color records on the calendar, select a field under Color . All the records sharing
the same value for that field are displayed using the same color. Note As the number of colors is limited, the same color can end up being assigned to different
values.
To color records on the calendar, select a field under Color . All the records sharing
the same value for that field are displayed using the same color.
As the number of colors is limited, the same color can end up being assigned to different
values.
- To display events lasting the whole day at the top of the calendar, select a Checkbox field that specifies if the event lasts the whole day.
To display events lasting the whole day at the top of the calendar, select a Checkbox field that specifies if the event lasts the whole day.
- To choose the default time scale used to display events, select Day , Week , Month , or Year under Default Display Mode .
To choose the default time scale used to display events, select Day , Week , Month , or Year under Default Display Mode .
You can also use a Delay Field to display the duration of the event in hours by
selecting a Decimal or Integer field on the model which specifies the duration of the
event. However, if you set an End Date Field , the Delay Field will not be
taken into account.

### Cohort

The Cohort view is used to examine the life cycle of records over
a time period. For example, it is used in the Subscriptions app to view the subscriptionsâ retention
rate.
- To display a measure (i.e., the aggregated value of a given field) by default on the view, select
a Measure Field .
To display a measure (i.e., the aggregated value of a given field) by default on the view, select
a Measure Field .
- To choose which time interval is used by default to group results, select Day , Week , Month , or Year under Interval .
To choose which time interval is used by default to group results, select Day , Week , Month , or Year under Interval .
- To change the cohort Mode , select either Retention the percentage
of records staying over a period of time, it starts at 100% and decreases with time or Churn the percentage of records moving out over a period of time - it starts at
0% and increases with time .
To change the cohort Mode , select either Retention the percentage
of records staying over a period of time, it starts at 100% and decreases with time or Churn the percentage of records moving out over a period of time - it starts at
0% and increases with time .
- To change the way the Timeline (i.e., the columns) progresses, select either Forward (from 0 to +15) or Backward (from -15 to 0). For most purposes,
the Forward timeline is used.
To change the way the Timeline (i.e., the columns) progresses, select either Forward (from 0 to +15) or Backward (from -15 to 0). For most purposes,
the Forward timeline is used.

### Gantt

The Gantt view is used to forecast and examine the overall progress of
records. Records are represented by a bar under a time scale.
- To prevent users from creating or editing records, untick Can Create or Can
Edit .
To prevent users from creating or editing records, untick Can Create or Can
Edit .
- To fill cells in gray whenever a record should not be created there (e.g., on weekends for
employees), tick Display Unavailability . Note The underlying model must support this feature, and support for it cannot be added using
Studio. It is supported for the Project, Time Off, Planning, and Manufacturing apps.
To fill cells in gray whenever a record should not be created there (e.g., on weekends for
employees), tick Display Unavailability .
The underlying model must support this feature, and support for it cannot be added using
Studio. It is supported for the Project, Time Off, Planning, and Manufacturing apps.
- To show a total row at the bottom, tick Display Total row .
To show a total row at the bottom, tick Display Total row .
- To collapse multiple records in a single row, tick Collapse First Level .
To collapse multiple records in a single row, tick Collapse First Level .
- To choose which way records are grouped by default on rows (e.g., per employee or project), select
a field under Default Group by .
To choose which way records are grouped by default on rows (e.g., per employee or project), select
a field under Default Group by .
- To define a default time scale to view records, select Day , Week , Month , or Year under Default Scale .
To define a default time scale to view records, select Day , Week , Month , or Year under Default Scale .
- To color records on the view, select a field under Color . All the records sharing the
same value for that field are displayed using the same color. Note As the number of colors is limited, the same color can be assigned to different values.
To color records on the view, select a field under Color . All the records sharing the
same value for that field are displayed using the same color.
As the number of colors is limited, the same color can be assigned to different values.
- To specify with which degree of precision each time scale should be divided by, select Quarter Hour , Half Hour , or Hour under Day
Precision , Half Day or Day under Week Precision , and Month Precision .
To specify with which degree of precision each time scale should be divided by, select Quarter Hour , Half Hour , or Hour under Day
Precision , Half Day or Day under Week Precision , and Month Precision .

## Reporting views

The settings described below are found under the viewâs View tab unless specified
otherwise.

### Pivot

The Pivot view is used to explore and analyze the data contained
in records in an interactive manner. It is especially useful to aggregate numeric data, create
categories, and drill down the data by expanding and collapsing different levels of data.
- To access all records whose data is aggregated under a cell, tick Access records from
cell .
To access all records whose data is aggregated under a cell, tick Access records from
cell .
- To divide the data into different categories, select field(s) under Column grouping , Row grouping - First level , or Row grouping - Second level .
To divide the data into different categories, select field(s) under Column grouping , Row grouping - First level , or Row grouping - Second level .
- To add different types of data to be measured using the view, select a field under Measures .
To add different types of data to be measured using the view, select a field under Measures .
- To display a count of records that made up the aggregated data in a cell, tick Display
count .
To display a count of records that made up the aggregated data in a cell, tick Display
count .

### Graph

The Graph view is used to showcase data from records in a bar,
line, or pie chart.
- To change the default chart, select Bar , Line , or Pie under Type .
To change the default chart, select Bar , Line , or Pie under Type .
- To choose a default data dimension (category), select a field under First dimension and, if needed, another under Second dimension .
To choose a default data dimension (category), select a field under First dimension and, if needed, another under Second dimension .
- To select a default type of data to be measured using the view, select a field under Measure .
To select a default type of data to be measured using the view, select a field under Measure .
- For Bar and Line charts only : To sort the different data categories by their value, select Ascending (from lowest to highest value) or Descending (from highest to
lowest) under Sorting .
For Bar and Line charts only : To sort the different data categories by their value, select Ascending (from lowest to highest value) or Descending (from highest to
lowest) under Sorting .
- For Bar and Pie charts only : To access all records whose data is aggregated under a data
category on the chart, tick Access records from graph .
For Bar and Pie charts only : To access all records whose data is aggregated under a data
category on the chart, tick Access records from graph .
- For Bar charts only : When using two data dimensions (categories), display the two columns on top
of each other by default by ticking Stacked graph .
For Bar charts only : When using two data dimensions (categories), display the two columns on top
of each other by default by ticking Stacked graph .

General views
Form
Activity
Search
Multiple records views
Kanban
List
Map
Timeline views
Calendar
Cohort
Gantt
Reporting views
Pivot
Graph


eCommerce

# eCommerce

Run a modern open-source online store with Odoo eCommerce. Learn how to sell online, promote
products and increase your average cart sizes.
Odoo offers a free custom domain name to all Odoo Online databases
for one year. Visitors can then access your website with an address such as www.example.com rather than the default example.odoo.com .
`www.example.com`
`example.odoo.com`
- Website Documentation
Website Documentation
- Odoo Tutorials: Website
Odoo Tutorials: Website
- Odoo Tutorials: eCommerce
Odoo Tutorials: eCommerce


B2B and B2C

# B2B and B2C

Odoo eCommerce is designed to fulfill the needs of both B2B and B2C companies. It allows you to
configure prices , manage access for specific
customers, and customize the website to support B2B,
B2C, or both business models.

## Prices

While B2C businesses sell directly to the end consumer with a tax-included price, B2B businesses usually exclude taxes and may even prefer to hide prices altogether, showcasing
only their products instead.
To configure a B2B-specific ecommerce shop, make sure the Tax-Excluded option is enabled, and complete the configuration to hide the
pricing .
To make sure that only customers with an account and granted access can see the prices, go to Website â£ eCommerce â£ Customers , click the (dropdown) icon from the search bar, and select the Archived filter.
Then click the Public user card, go to the Sales & Purchase tab, and
add the zero-priced pricelist configured to cover all countries . Keep the Public User contact Archived at all times. Website visitors now see the products without prices, while only customers with an account invitation and an assigned pricelist can view the pricing in the customer portal.
- B2B (tax excluded) and B2C (tax included) pricing
B2B (tax excluded) and B2C (tax included) pricing
- Discounts

## Access request

When running a B2B business, you usually hide the pricing on the
web shop and make it available for logged-in users only. To prevent anyone from signing up freely, set the Customer Account setting option to On invitation .
To create a page where customers request access, open the website editor , create a form , customize it, and in
the Action field, select Create a customer .
You can assign tags created on a contact form under Website â£ Configuration
â£ Customers to identify what kind of customers have submitted the form. To do so, select
a field in the form while in Edit mode, click the + Field button under
the Customize tab, and set the fieldâs Type to Tags .
Toggle the tags that should be automatically assigned when a customer fills in the form and set
the fieldâs Visibility to Hidden .
When a customer submits the form, a new contact is automatically created in the database. The
contact is assigned the first pricelist from the list of available pricelists, and, if applicable,
the specified tags.
Submitted requests can be found under the Website â£ eCommerce â£ Customers .
Select the customer you want to grant portal access to. Once done, the selected customer is able to
view the B2B prices and products. Make sure the correct pricelist is assigned to their
contact form.
- It is also possible to hide the entire shop from the public using the Ecommerce Access setting and only make it available for logged-in
customers.
It is also possible to hide the entire shop from the public using the Ecommerce Access setting and only make it available for logged-in
customers.
- Configure the checkout policy to
allow/disallow guest checkout for B2C businesses.
Configure the checkout policy to
allow/disallow guest checkout for B2C businesses.
- Enable the Shared Customer Accounts feature to allow customers to use the same account on all your websites.
Enable the Shared Customer Accounts feature to allow customers to use the same account on all your websites.

## Multiple websites

Settings are website-specific, which means it is possible to configure different behaviors for
each website. For example, you can set up a B2C website that allows guest checkout and displays tax-included prices , and a B2B website that requires sign-in and shows tax-excluded prices . However, each pricelist can only be assigned to one website at a time. If you want to use
the same pricelist on several websites, duplicate the pricelist and assign each copy to its
corresponding website.
If you are running a B2B and B2C business, we strongly recommend to create two separate
websites and assign a zero-priced pricelist to the B2B website and a regular pricelist to the B2C website.
In case, you prefer using a single website, configure it using country groups and assigning pricelists to customers, and deactivate the Selectable option.

## Additional features

### Invoice

Depending on the type of business (B2B or B2C), you might want to issue an invoice. An invoice can
either be generated automatically (for B2B) or on demand of the customer (for B2C). This process
can be automated if (and when) the online payment is confirmed .
To automate invoicing, enable the Automatic Invoice setting. If this
feature has not been enabled, the customer only receives an order confirmation.

### B2B fields at checkout

Use the Show B2B fields toggle in the website editor to display B2B-specific additional fields like VAT or Company Name during the delivery step.

Prices
Access request
Multiple websites
Additional features
Invoice
B2B fields at checkout


Ordering and checkout

# Ordering and checkout

Odoo eCommerce provides several options to organize the ordering and checkout process. It offers
different order button options and sequential checkout steps , some of which support additional features. The
related buttons and checkout pages can be customized using the website editor.

## Order buttons

To customize the ordering process in Odoo eCommerce, you can:
- change the Add to Cart buttonâs behavior,
change the Add to Cart buttonâs behavior,
- replace it with a customized button,
replace it with a customized button,
- add a Buy now button, and
add a Buy now button, and
- add an Order again button to the customer portal.
add an Order again button to the customer portal.

### Add to cart options

#### Default add to cart behavior

When clicking the Add to cart button, different actions can be triggered. To configure
them, go to Website â£ Configuration â£ Settings , scroll down to the Shop - Checkout Process section, and select one of the following options:
- Stay on Product Page : The customer remains on the productâs page.
Stay on Product Page : The customer remains on the productâs page.
- Go to cart : The customer is immediately redirected to the cart.
Go to cart : The customer is immediately redirected to the cart.
- Let the user decide (dialog) : The customer can choose if they want to go to the cart
( Proceed to Checkout ) or if they prefer to stay on the product page
( Continue Shopping ).
Let the user decide (dialog) : The customer can choose if they want to go to the cart
( Proceed to Checkout ) or if they prefer to stay on the product page
( Continue Shopping ).
This dialog box always appears regardless of the configuration to suggest optional products , if any.

#### Button customization

You can replace the Add to Cart button with a Contact Us button, which
redirects users to the default contact form.
Removing the ability to add products to the cart is often used by businesses that want to display
an online catalog but cannot share prices publicly (e.g., to offer custom or variable pricing).
To display the Contact Us button and a note saying Not Available For Sale , you need
to hide your prices on your product page.
`NotAvailableForSale`
The Contact Us button label, URL, and the Not Available For Sale text beneath the
product title and description can be modified on the productâs page while in Edit mode.

#### Additional add to cart buttons

You can add additional Add to Cart buttons and link them to specific products on any
website page.
To add them, open the website editor and place the Add to Cart Button inner content
building block. Once placed, click the button, scroll to the Add to Cart Button section, and configure the following:
- Product : Select the product to link the button with.
Product : Select the product to link the button with.
- Action : Choose if it should be an Add to Cart or Buy Now button.
Action : Choose if it should be an Add to Cart or Buy Now button.
- If the product has variants, either choose one or leave the option on Visitorâs
Choice , which prompts the customer to select a variant and then to Proceed to
Checkout or Continue Shopping .
If the product has variants, either choose one or leave the option on Visitorâs
Choice , which prompts the customer to select a variant and then to Proceed to
Checkout or Continue Shopping .
- The default Add to Cart button does not offer those options, but its label can be
changed.
The default Add to Cart button does not offer those options, but its label can be
changed.
While in Edit mode, it is also possible to show or hide the ( cart ) icon in the pageâs header. Click the header and then the ( cart ) button next to the Show Empty option
under the Customize tab.

### Buy now

To let customers choose to go to the review order step
directly, you can add an additional Buy now button. To do so, go to Website â£ Configuration â£ Settings . Under the Shop - Checkout
Process section, tick the Buy Now feature.
Alternatively, enable the feature by going to any productâs page while in Edit mode
and, in the Customize tab, clicking the Buy Now button
next to the Cart options.

### Re-order from portal

You can let customers re-order items from previous sales orders from their customer portal using the Order Again button. To add it, go to Website â£ Configuration â£
Settings . Under the Shop - Checkout Process section, tick the Re-order From
Portal feature.

## Checkout steps

During the checkout process, customers are taken through the following steps:
- Review order
- Delivery
- Extra info (if enabled)
Extra info (if enabled)
- Payment
- Order confirmation
Each step can be customized using the website editor by adding building blocks or opening the Customize tab to enable various
checkout options.
Content added through building blocks is specific to each step.
Restrict access to the shop and checkout for specific customers, e.g., in a B2B business setup.

### Review order

The Review Order step allows customers to see the items they added to their cart, adjust
quantities, or Remove products. Information related to the product prices and taxes
applied are also displayed. Customers can then click the Checkout button to continue to
the Delivery step.
Open the website editor to enable checkout options such
as:
- Suggested Accessories : to showcase accessory products ;
Suggested Accessories : to showcase accessory products ;
- Promo Code : to allow customers to redeem gift cards or apply discount codes ;
Promo Code : to allow customers to redeem gift cards or apply discount codes ;
- Add to Wishlist : Enable wishlists to allow
signed-in users to remove a product from their cart and add it to their wishlist using the Save for later option.
Add to Wishlist : Enable wishlists to allow
signed-in users to remove a product from their cart and add it to their wishlist using the Save for later option.
- If a fiscal position is detected
automatically, the product tax is determined based on the customerâs IP address.
If a fiscal position is detected
automatically, the product tax is determined based on the customerâs IP address.
- If the installed payment provider supports express checkout , a dedicated button is displayed,
allowing customers to go straight from the cart to the confirmation page without filling out
the contact form.
If the installed payment provider supports express checkout , a dedicated button is displayed,
allowing customers to go straight from the cart to the confirmation page without filling out
the contact form.

### Delivery

Once they have reviewed their order:
- Unsigned-in customers are prompted to Sign in or enter their Email
address , along with their delivery address and phone details;
Unsigned-in customers are prompted to Sign in or enter their Email
address , along with their delivery address and phone details;
- Signed-in customers can select the appropriate Delivery address .
Signed-in customers can select the appropriate Delivery address .
They can then choose a delivery method , select or enter their Billing
Address (or toggle the Same as delivery address switch if the billing and delivery
addresses are identical), and click Confirm to proceed to the next step.
- For B2B customers, you can also enable optional B2B fields in the website editor.
For B2B customers, you can also enable optional B2B fields in the website editor.
- You can add a checkbox for users without an account to sign up for a newsletter. To do so, go
to Website â£ Configuration â£ Settings . Under the Shop -
Checkout Process section, enable the Newsletter feature and select a Newsletter List .
You can add a checkbox for users without an account to sign up for a newsletter. To do so, go
to Website â£ Configuration â£ Settings . Under the Shop -
Checkout Process section, enable the Newsletter feature and select a Newsletter List .

### Extra info

You can add an Extra Info step in the checkout process to collect additional customer
information through an online form, which is then included in the sales order . To do so, enable the Extra
Step option in the website editor. The form can be customized as needed.
Alternatively, go to Website â£ Configuration â£ Settings , scroll to the Shop - Checkout Process section, enable Extra Step During Checkout , and
click Save . Click Configure Form to customize it.

### Payment

At the Payment step, customers Choose a payment method , enter their payment
details, and click Pay now .
You can require customers to agree to your terms and conditions before payment. To enable this option, go to the website editor and toggle the Accept Terms & Conditions feature.
Enable the developer mode and click the ( bug )
icon to display an availability report for payment
providers and payment methods, which helps diagnose potential availability issues on the payment
form.

### Order confirmation

The final step of the checkout process is the Order confirmation , which provides a
summary of the customerâs purchase details.
Order handling documentation

Order buttons
Add to cart options
Buy now
Re-order from portal
Checkout steps
Review order
Delivery
Extra info
Payment
Order confirmation