[IMP] Studio: update views page

task-3553099

closes odoo/documentation#10449

Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
This commit is contained in:
Audrey (auva) 2024-07-18 14:35:26 +02:00
parent 4f40ebd78f
commit d811aef87c
14 changed files with 71 additions and 77 deletions

View File

@ -2,28 +2,27 @@
Views Views
===== =====
Views are the interface that allows displaying the data contained in a model. One model can have Views are the interface that allows displaying the data contained in a :doc:`model
several views, which are simply different ways to show the same data. In Studio, views are organized <models_modules_apps>`. One model can have several views, which are simply different ways to show
into four categories: :ref:`general <studio/views/general>`, :ref:`multiple records the same data. In Studio, views are organized into four categories: :ref:`general
<studio/views/multiple-records>`, :ref:`timeline <studio/views/timeline>`, and :ref:`reporting <studio/views/general>`, :ref:`multiple records <studio/views/multiple-records>`, :ref:`timeline
<studio/views/reporting>`. <studio/views/timeline>`, and :ref:`reporting <studio/views/reporting>`.
.. tip:: .. tip::
To change the default view of a model, go to :menuselection:`Studio --> Views --> Dropdown menu - To change the default view of a model, :ref:`access Studio <studio/access>`, go to
(⋮) --> Set as Default`. :guilabel:`Views`, click the :icon:`fa-ellipsis-v` (:guilabel:`ellipsis`) icon next to the
desired view, and click :guilabel:`Set as Default`.
- You can modify views using the built-in XML editor: Activate the :ref:`Developer mode
<developer-mode>`, go to the view you want to edit, select the :guilabel:`View` tab, and
click :guilabel:`</> XML`.
.. note:: .. important::
You can modify views by using the built-in XML editor. To do so, activate :ref:`Developer mode If you are editing a view using the XML editor, avoid making changes directly to standard
<developer-mode>`, go to the view you want to edit, select the :guilabel:`View` tab and then and inherited views, as these would be reset and lost during updates or module upgrades.
click on :guilabel:`</> XML`. 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
.. important:: inherited view and its corresponding XPath, which defines the modified part of the view, are
If you are editing a view using the XML editor, avoid making changes directly to standard automatically generated.
views and inherited views, as those would be reset and would not be kept in case of an update
or module upgrade. Always make sure you select the right Studio inherited views. Indeed, when
you modify a view in Studio by drag-and-dropping a new field, a specific Studio inherited view
and its XPath, the latter which defines which part of the view is modified, are automatically
generated.
.. _studio/views/general: .. _studio/views/general:
@ -39,18 +38,27 @@ General views
Form Form
---- ----
The :guilabel:`Form` view is used when creating and editing records, such as contacts, sales orders, The :guilabel:`Form` :icon:`fa-address-card` view is used when creating and editing records, such as
products, etc. contacts, sales orders, products, etc.
- To structure a form, drag-and-drop the :guilabel:`Tabs and Columns` element found under the - To structure a form, drag and drop the :guilabel:`Tabs and Columns` element found under the
:guilabel:`+ Add` tab. :guilabel:`+ Add` tab.
- To prevent users from creating, editing, or deleting records, untick :guilabel:`Can Create`, - To prevent users from creating, editing, or deleting records, untick :guilabel:`Can Create`,
:guilabel:`Can Edit`, or :guilabel:`Can Delete`. :guilabel:`Can Edit`, or :guilabel:`Can Delete`.
- To add a button, click :guilabel:`Add a button` at the top of the form, enter a :guilabel:`Label`,
and select the button's action:
- :guilabel:`Run a Server Action`: select the :ref:`server action <reference/actions/server>` to
be executed from the dropdown list;
- :guilabel:`Call a method`: specify an existing Python method already defined in Odoo.
- To add a smart button, click the :icon:`fa-plus-square` (:guilabel:`plus`) icon in the top-right
corner of the form. Enter a :guilabel:`Label`, choose an :guilabel:`Icon`, and select a
:ref:`related field <studio/fields/relational-fields/related-field>`.
.. example:: .. example::
.. image:: views/form-sales-order.png .. image:: views/form-sales-order.png
:align: center
:alt: Sales order model's Form view :alt: Sales order model's Form view
.. _studio/views/general/activity: .. _studio/views/general/activity:
@ -58,8 +66,8 @@ products, etc.
Activity Activity
-------- --------
The :guilabel:`Activity` view is used to schedule and have an overview of activities (emails, calls, The :guilabel:`Activity` :icon:`fa-clock-o` view is used to schedule and have an overview of
etc.) linked to records. activities (emails, calls, etc.) linked to records.
.. note:: .. note::
This view can only be modified within Studio by editing the XML code. This view can only be modified within Studio by editing the XML code.
@ -67,7 +75,6 @@ etc.) linked to records.
.. example:: .. example::
.. image:: views/activity-lead-opportunity.png .. image:: views/activity-lead-opportunity.png
:align: center
:alt: Lead/Opportunity model's Activity view :alt: Lead/Opportunity model's Activity view
.. _studio/views/general/search: .. _studio/views/general/search:
@ -75,17 +82,17 @@ etc.) linked to records.
Search Search
------ ------
The :guilabel:`Search` view is added on top of other views to filter, group, and search records. The :guilabel:`Search` :icon:`oi-search` view is added on top of other views to filter, group, and
search records.
- To add custom :guilabel:`Filters` and structure them using :guilabel:`Separators`, go to the - To add custom :guilabel:`Filters` and structure them using :guilabel:`Separators`, go to the
:guilabel:`+ Add` tab and drag and drop them under :guilabel:`Filters`. :guilabel:`+ Add` tab and drag and drop them under :guilabel:`Filters`.
- To add an existing field under the search dropdown menu, go to the :guilabel:`+ Add` tab and - To add an existing field under the search dropdown menu, go to the :guilabel:`+ Add` tab and
drag-and-drop it under :guilabel:`Autocompletion Fields`. drag and drop it under :guilabel:`Autocompletion Fields`.
.. example:: .. example::
.. image:: views/search-project-kanban.png .. image:: views/search-project-kanban.png
:align: center
:alt: Project model's Search view on the Kanban view :alt: Project model's Search view on the Kanban view
.. _studio/views/multiple-records: .. _studio/views/multiple-records:
@ -102,8 +109,8 @@ Multiple records views
Kanban Kanban
------ ------
The :guilabel:`Kanban` view is often used to support business flows by moving records across stages The :guilabel:`Kanban` :icon:`oi-view-kanban` view is often used to support business flows by moving
or as an alternative way to display records inside *cards*. records across stages or as an alternative way to display records inside *cards*.
.. note:: .. note::
If the :guilabel:`Kanban` view exists, it is used by default to display data on mobile devices If the :guilabel:`Kanban` view exists, it is used by default to display data on mobile devices
@ -112,13 +119,11 @@ or as an alternative way to display records inside *cards*.
- To prevent users from creating new records, untick :guilabel:`Can Create`. - To prevent users from creating new records, untick :guilabel:`Can Create`.
- To create records directly within the view, in a minimalistic form, enable :guilabel:`Quick - To create records directly within the view, in a minimalistic form, enable :guilabel:`Quick
Create`. Create`.
- To change the way records are grouped by default, select a new group under :guilabel:`Default - To set a default grouping for records, select a field under :guilabel:`Default Group By`.
Group by`.
.. example:: .. example::
.. image:: views/kanban-project.png .. image:: views/kanban-project.png
:align: center
:alt: Project model's Kanban view :alt: Project model's Kanban view
.. _studio/views/multiple-records/list: .. _studio/views/multiple-records/list:
@ -126,13 +131,14 @@ or as an alternative way to display records inside *cards*.
List List
---- ----
The :guilabel:`List` view is used to overview many records at once, look for records, and edit The :guilabel:`List` :icon:`oi-view-list` view is used to overview many records at once, look for
simple records. records, and edit simple records.
- To prevent users from creating, editing, or deleting records, untick :guilabel:`Can Create`, - To prevent users from creating, editing, or deleting records, untick :guilabel:`Can Create`,
:guilabel:`Can Edit`, or :guilabel:`Can Delete`. :guilabel:`Can Edit`, or :guilabel:`Can Delete`.
- To create and edit records directly within the view, select either :guilabel:`New record on top` - To create and edit records directly within the view, select either :guilabel:`Add record at the
or :guilabel:`New record at the bottom` under :guilabel:`Editable`. bottom`, :guilabel:`Add record on top` or :guilabel:`Open form view` under
:guilabel:`When Creating Record`.
.. note:: .. note::
This prevents users from opening records in :ref:`Form view <studio/views/general/form>` from the This prevents users from opening records in :ref:`Form view <studio/views/general/form>` from the
@ -140,19 +146,24 @@ simple records.
- To edit several records at once, tick :guilabel:`Enable Mass Editing`. - To edit several records at once, tick :guilabel:`Enable Mass Editing`.
- To change the way records are sorted by default, select a field under :guilabel:`Sort By`. - To change the way records are sorted by default, select a field under :guilabel:`Sort By`.
- To set a default grouping for records, select a field under :guilabel:`Default Group By`.
- To add a button, click :guilabel:`Add a button` at the top of the list, enter a :guilabel:`Label`,
and select the button's action:
- :guilabel:`Run a Server Action`: select the :ref:`server action <reference/actions/server>` to
be executed from the dropdown list;
- :guilabel:`Call a method`: specify an existing Python method already defined in Odoo.
.. tip:: .. tip::
To add a drag handle icon to reorder records manually, add an :ref:`Integer field To add a :icon:`oi-draggable` (:guilabel:`drag handle`) icon to reorder records manually, add an
<studio/fields/simple-fields/integer>` with the :guilabel:`Handle` widget. :ref:`Integer field <studio/fields/simple-fields/integer>` with the :guilabel:`Handle` widget.
.. image:: views/list-drag-handle.png .. image:: views/list-drag-handle.png
:align: center
:alt: Drag handle icon enabling to sort records manually in List view :alt: Drag handle icon enabling to sort records manually in List view
.. example:: .. example::
.. image:: views/list-sales-order.png .. image:: views/list-sales-order.png
:align: center
:alt: Sales order model's List view :alt: Sales order model's List view
.. _studio/views/multiple-records/map: .. _studio/views/multiple-records/map:
@ -160,8 +171,8 @@ simple records.
Map Map
--- ---
The :guilabel:`Map` view is used to display records on a map. For example, it is used in the Field The :guilabel:`Map` :icon:`fa-map-marker` view is used to display records on a map. For example, it
Service app to plan an itinerary between different tasks. is used in the Field Service app to plan an itinerary between different tasks.
.. note:: .. note::
A :ref:`Many2One field <studio/fields/relational-fields/many2one>` linked to the *Contact* model A :ref:`Many2One field <studio/fields/relational-fields/many2one>` linked to the *Contact* model
@ -169,7 +180,7 @@ Service app to plan an itinerary between different tasks.
- To select which kind of contact should be used on the map, select it under :guilabel:`Contact - To select which kind of contact should be used on the map, select it under :guilabel:`Contact
Field`. Field`.
- To hide the name or the address of the record, tick :guilabel:`Hide name` or :guilabel:`Hide - To hide the name or the address of the record, tick :guilabel:`Hide Name` or :guilabel:`Hide
Address`. Address`.
- To add information from other fields, select them under :guilabel:`Additional Fields`. - To add information from other fields, select them under :guilabel:`Additional Fields`.
- To have a route suggested between the different records, tick :guilabel:`Enable Routing` and - To have a route suggested between the different records, tick :guilabel:`Enable Routing` and
@ -178,7 +189,6 @@ Service app to plan an itinerary between different tasks.
.. example:: .. example::
.. image:: views/map-task.png .. image:: views/map-task.png
:align: center
:alt: Task model's Map view :alt: Task model's Map view
.. _studio/views/timeline: .. _studio/views/timeline:
@ -200,7 +210,8 @@ Timeline views
Calendar Calendar
-------- --------
The :guilabel:`Calendar` view is used to overview and manage records inside a calendar. The :guilabel:`Calendar` :icon:`fa-calendar` view is used to overview and manage records inside a
calendar.
- To create records directly within the view instead of opening the :ref:`Form view - To create records directly within the view instead of opening the :ref:`Form view
<studio/views/general/form>`, enable :guilabel:`Quick Create`. <studio/views/general/form>`, enable :guilabel:`Quick Create`.
@ -224,7 +235,7 @@ The :guilabel:`Calendar` view is used to overview and manage records inside a ca
:guilabel:`Month`, or :guilabel:`Year` under :guilabel:`Default Display Mode`. :guilabel:`Month`, or :guilabel:`Year` under :guilabel:`Default Display Mode`.
.. note:: .. note::
You can also use :guilabel:`Delay Field` to display the duration of the event in hours by You can also use a :guilabel:`Delay Field` to display the duration of the event in hours by
selecting a :ref:`Decimal <studio/fields/simple-fields/decimal>` or :ref:`Integer selecting a :ref:`Decimal <studio/fields/simple-fields/decimal>` or :ref:`Integer
<studio/fields/simple-fields/integer>` field on the model which specifies the duration of the <studio/fields/simple-fields/integer>` field on the model which specifies the duration of the
event. However, if you set an :guilabel:`End Date Field`, the :guilabel:`Delay Field` will not be event. However, if you set an :guilabel:`End Date Field`, the :guilabel:`Delay Field` will not be
@ -233,7 +244,6 @@ The :guilabel:`Calendar` view is used to overview and manage records inside a ca
.. example:: .. example::
.. image:: views/calendar-event.png .. image:: views/calendar-event.png
:align: center
:alt: Calendar Event model's Calendar view :alt: Calendar Event model's Calendar view
.. _studio/views/timeline/cohort: .. _studio/views/timeline/cohort:
@ -241,8 +251,9 @@ The :guilabel:`Calendar` view is used to overview and manage records inside a ca
Cohort Cohort
------ ------
The :guilabel:`Cohort` view is used to examine the life cycle of records over a time period. For The :guilabel:`Cohort` :icon:`oi-view-cohort` view is used to examine the life cycle of records over
example, it is used in the Subscriptions app to view the subscriptions' retention rate. 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 - To display a measure (i.e., the aggregated value of a given field) by default on the view, select
a :guilabel:`Measure Field`. a :guilabel:`Measure Field`.
@ -259,7 +270,6 @@ example, it is used in the Subscriptions app to view the subscriptions' retentio
.. example:: .. example::
.. image:: views/cohort-subscription.png .. image:: views/cohort-subscription.png
:align: center
:alt: Subscription model's Cohort view :alt: Subscription model's Cohort view
.. _studio/views/timeline/gantt: .. _studio/views/timeline/gantt:
@ -267,8 +277,8 @@ example, it is used in the Subscriptions app to view the subscriptions' retentio
Gantt Gantt
----- -----
The :guilabel:`Gantt` view is used to forecast and examine the overall progress of records. Records The :guilabel:`Gantt` :icon:`fa-tasks` view is used to forecast and examine the overall progress of
are represented by a bar under a time scale. records. Records are represented by a bar under a time scale.
- To prevent users from creating or editing records, untick :guilabel:`Can Create` or :guilabel:`Can - To prevent users from creating or editing records, untick :guilabel:`Can Create` or :guilabel:`Can
Edit`. Edit`.
@ -299,7 +309,6 @@ are represented by a bar under a time scale.
.. example:: .. example::
.. image:: views/gantt-planning.png .. image:: views/gantt-planning.png
:align: center
:alt: Planning Shift model's Gantt view :alt: Planning Shift model's Gantt view
.. _studio/views/reporting: .. _studio/views/reporting:
@ -316,9 +325,9 @@ Reporting views
Pivot Pivot
----- -----
The :guilabel:`Pivot` view is used to explore and analyze the data contained in records in an The :guilabel:`Pivot` :icon:`oi-view-pivot` view is used to explore and analyze the data contained
interactive manner. It is especially useful to aggregate numeric data, create categories, and drill in records in an interactive manner. It is especially useful to aggregate numeric data, create
down the data by expanding and collapsing different levels of data. 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 :guilabel:`Access records from - To access all records whose data is aggregated under a cell, tick :guilabel:`Access records from
cell`. cell`.
@ -332,7 +341,6 @@ down the data by expanding and collapsing different levels of data.
.. example:: .. example::
.. image:: views/pivot-purchase-report.png .. image:: views/pivot-purchase-report.png
:align: center
:alt: Purchase Report model's Pivot view :alt: Purchase Report model's Pivot view
.. _studio/views/reporting/graph: .. _studio/views/reporting/graph:
@ -340,7 +348,8 @@ down the data by expanding and collapsing different levels of data.
Graph Graph
----- -----
The :guilabel:`Graph` view is used to showcase data from records in a bar, line, or pie chart. The :guilabel:`Graph` :icon:`fa-area-chart` view is used to showcase data from records in a bar,
line, or pie chart.
- To change the default chart, select :guilabel:`Bar`, :guilabel:`Line`, or :guilabel:`Pie` under - To change the default chart, select :guilabel:`Bar`, :guilabel:`Line`, or :guilabel:`Pie` under
:guilabel:`Type`. :guilabel:`Type`.
@ -359,20 +368,5 @@ The :guilabel:`Graph` view is used to showcase data from records in a bar, line,
.. example:: .. example::
.. image:: views/graph-sales-report.png .. image:: views/graph-sales-report.png
:align: center :alt: Sales Analysis Report model's Bar chart on Graph view
:alt: Sales Analysis Report model's Bar chart on Graph view :scale: 75%
.. _studio/views/reporting/dashboard:
Dashboard
---------
The :guilabel:`Dashboard` view is used to display multiple reporting views and key performance
indicators. Which elements are displayed on the view depends on the configuration of the other
reporting views.
.. example::
.. image:: views/dashboard-sales-report.png
:align: center
:alt: Sales Analysis Report model's Dashboard view

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 292 KiB

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 10 KiB