[IMP] reference: rewrite and move views documentation to user_interface/
The documentation of the views is redone in order to be up to date and has allowed a better visualization of the task on the modifiers. task-2495504 closes odoo/documentation#3523 Related: odoo/odoo#104741 Related: odoo/enterprise#35255 Related: odoo/upgrade#4884 Signed-off-by: Julien Castiaux (juc) <juc@odoo.com>
This commit is contained in:
Gorash
parent
58b82b93d5
commit
83c2012f95
@ -10,9 +10,8 @@ Python framework
|
||||
backend/orm
|
||||
backend/data
|
||||
backend/actions
|
||||
backend/views
|
||||
backend/module
|
||||
backend/reports
|
||||
backend/module
|
||||
backend/security
|
||||
backend/performance
|
||||
backend/testing
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
|
||||
.. _reference/actions:
|
||||
|
||||
=======
|
||||
Actions
|
||||
=======
|
||||
@ -65,7 +62,7 @@ Window Actions (``ir.actions.act_window``)
|
||||
==========================================
|
||||
|
||||
The most common action type, used to present visualisations of a model through
|
||||
:ref:`views <reference/views>`: a window action defines a set of view types
|
||||
:doc:`views <../user_interface/view_records>`: a window action defines a set of view types
|
||||
(and possibly specific views) for a model (and possibly specific record of the
|
||||
model).
|
||||
|
||||
|
||||
@ -236,7 +236,7 @@ Defines an ``ir.ui.menu`` record with a number of defaults and fallbacks:
|
||||
``template``
|
||||
------------
|
||||
|
||||
Creates a :ref:`QWeb view <reference/views/qweb>` requiring only the ``arch``
|
||||
Creates a :ref:`QWeb view <reference/view_architecture/qweb>` requiring only the ``arch``
|
||||
section of the view, and allowing a few *optional* attributes:
|
||||
|
||||
``id``
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,27 +0,0 @@
|
||||
.. rst-class:: o-definition-list
|
||||
|
||||
``header``
|
||||
defines custom buttons similar to :ref:`list view buttons <reference/views/list/button>` in the control panel
|
||||
that perform an action/call a model's method.
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<header>
|
||||
<button name="toDoAlways" type="object" string="Always displayed" display="always"/>
|
||||
<button name="toDoSelection" type="object" string="Displayed if selection"/>
|
||||
</header>
|
||||
|
||||
Does not support any attribute but can have children:
|
||||
|
||||
.. rst-class:: o-definition-list
|
||||
|
||||
``button``
|
||||
as a :ref:`list view button <reference/views/list/button>` which accepts an extra attribute when placed in a `header`:
|
||||
|
||||
.. rst-class:: o-definition-list
|
||||
|
||||
``display``
|
||||
By default, those buttons are only displayed when some records are
|
||||
selected, and they apply on the selection. When the attribute ``display``
|
||||
is set to ``always``, the button is available all the time, even if there's
|
||||
no selection.
|
||||
@ -1112,8 +1112,8 @@ Provides information about Odoo models via its various fields.
|
||||
list of the model's fields through a :class:`~odoo.fields.One2many` to
|
||||
:ref:`reference/webservice/inspection/fields`
|
||||
``view_ids``
|
||||
:class:`~odoo.fields.One2many` to the :ref:`reference/views` defined
|
||||
for the model
|
||||
:class:`~odoo.fields.One2many` to the :doc:`../reference/user_interface//view_architecture`
|
||||
defined for the model
|
||||
``access_ids``
|
||||
:class:`~odoo.fields.One2many` relation to the
|
||||
:ref:`reference/security/acl` set on the model
|
||||
|
||||
@ -73,6 +73,7 @@ like this:
|
||||
'web/static/lib/bootstrap/**/*',
|
||||
'web/static/src/js/boot.js',
|
||||
'web/static/src/js/webclient.js',
|
||||
'web/static/src/xml/webclient.xml',
|
||||
],
|
||||
'web.qunit_suite_tests': [
|
||||
'web/static/src/js/webclient_tests.js',
|
||||
|
||||
@ -306,7 +306,7 @@ Here is an example of a basic counter widget:
|
||||
|
||||
For this example, assume that the template *some.template* (and is properly
|
||||
loaded: the template is in a file, which is properly defined in the assets of
|
||||
the module manifest ``'assets': {'web.assets_qweb': [...]}``, see
|
||||
the module manifest, see
|
||||
:ref:`assets <reference/assets>`.) is given by:
|
||||
|
||||
.. code-block:: xml
|
||||
@ -438,20 +438,6 @@ Widget API
|
||||
initialized but before it has been started. The root element generated by
|
||||
the template will be set as the DOM root of the widget.
|
||||
|
||||
.. attribute:: Widget.xmlDependencies
|
||||
|
||||
List of paths to xml files that need to be loaded before the
|
||||
widget can be rendered. This will not induce loading anything that has already
|
||||
been loaded. This is useful when you want to load your templates lazily,
|
||||
or if you want to share a widget between the website and the web client
|
||||
interface.
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
var EditorMenuBar = Widget.extend({
|
||||
xmlDependencies: ['/web_editor/static/src/xml/editor.xml'],
|
||||
...
|
||||
|
||||
.. attribute:: Widget.events
|
||||
|
||||
Events are a mapping of an event selector (an event name and an optional
|
||||
@ -630,36 +616,8 @@ override the *renderElement* method to do something else).
|
||||
The Qweb JS template engine is based on XML, and is mostly compatible with the
|
||||
python implementation.
|
||||
|
||||
Now, let us explain how the templates are loaded. Whenever the web client
|
||||
starts, a rpc is made to the */web/webclient/qweb* route. The server will then
|
||||
return a list of all templates defined in data files for each installed modules.
|
||||
The correct files are listed in the *web.assets_qweb* entry in each module
|
||||
manifest. It is also possible to lazy-load another bundle's templates by calling
|
||||
this same route and giving it the corresponding "bundle" query parameter.
|
||||
|
||||
The web client will wait for that list of template to be loaded, before starting
|
||||
its first widget.
|
||||
|
||||
This mechanism works quite well for our needs, but sometimes, we want to lazy
|
||||
load a template. For example, imagine that we have a widget which is rarely
|
||||
used. In that case, maybe we prefer to not load its template in the main file,
|
||||
in order to make the web client slightly lighter. In that case, we can use the
|
||||
*xmlDependencies* key of the Widget:
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
var Widget = require('web.Widget');
|
||||
|
||||
var Counter = Widget.extend({
|
||||
template: 'some.template',
|
||||
xmlDependencies: ['/myaddon/path/to/my/file.xml'],
|
||||
|
||||
...
|
||||
|
||||
});
|
||||
|
||||
With this, the *Counter* widget will load the xmlDependencies files in its
|
||||
*willStart* method, so the template will be ready when the rendering is performed.
|
||||
The web client will wait for that list of template (included into the current asset)
|
||||
to be loaded, before starting its first widget.
|
||||
|
||||
Event system
|
||||
============
|
||||
|
||||
@ -676,7 +676,7 @@ Request-based
|
||||
|
||||
Most Python-side uses of QWeb are in controllers (and during HTTP requests),
|
||||
in which case templates stored in the database (as
|
||||
:ref:`views <reference/views/qweb>`) can be trivially rendered by calling
|
||||
:ref:`views <reference/view_architecture/qweb>`) can be trivially rendered by calling
|
||||
:meth:`odoo.http.HttpRequest.render`:
|
||||
|
||||
.. code-block:: python
|
||||
|
||||
@ -7,5 +7,7 @@ User interface
|
||||
.. toctree::
|
||||
:titlesonly:
|
||||
|
||||
user_interface/view_records
|
||||
user_interface/view_architecture
|
||||
user_interface/scss_inheritance
|
||||
user_interface/icons
|
||||
|
||||
4038
content/developer/reference/user_interface/view_architecture.rst
Normal file
4038
content/developer/reference/user_interface/view_architecture.rst
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,47 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 727 255" width="727" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="pencil" width="26" height="22" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(3 3)">
|
||||
<path transform="scale(0.03 0.03)" d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
|
||||
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
|
||||
C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
|
||||
L27.473,390.597L0.3,512.69z" fill="#444444"/>
|
||||
</g>
|
||||
</pattern>
|
||||
|
||||
<pattern id="line" width="720" height="25" patternUnits="userSpaceOnUse">
|
||||
<g fill="none" stroke="#888888" stroke-width="1">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="109" y="0" rx="5" ry="5" width="241" height="25"/>
|
||||
<rect x="357" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="456" y="0" rx="5" ry="5" width="241" height="25"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#888888" stroke-width="0">
|
||||
|
||||
<g transform="translate(400 0)">
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke-width="1"/>
|
||||
<rect transform="translate(11 13)" rx="5" ry="5" width="22" height="22" fill="url(#pencil)"/>
|
||||
<text x="40" y="30" fill="#444444">Button1</text>
|
||||
</g>
|
||||
<g transform="translate(560 0)">
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke-width="1"/>
|
||||
<text x="16" y="33" fill="#444444" font-size="24px">$</text>
|
||||
<text x="40" y="23" fill="#444444">123</text>
|
||||
<text x="41" y="39" fill="#444444">Invoices</text>
|
||||
</g>
|
||||
<line x1="1" y1="0" x2="1" y2="50" stroke-width="1"/>
|
||||
<line x1="0" y1="50" x2="720" y2="50" stroke-width="1"/>
|
||||
<line x1="720" y1="0" x2="720" y2="50" stroke-width="1"/>
|
||||
|
||||
<rect transform="translate(0 70)" width="720" height="25" fill="url(#line)"/>
|
||||
<rect transform="translate(0 100)" width="720" height="25" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="720" height="25" fill="url(#line)"/>
|
||||
<rect transform="translate(0 160)" width="720" height="25" fill="url(#line)"/>
|
||||
<rect transform="translate(0 190)" width="720" height="25" fill="url(#line)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,95 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 727 255" width="727" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<g transform="translate(10 20)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">custom</text>
|
||||
</g>
|
||||
<g transform="translate(109 20)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="588" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field a</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 52)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label b</text>
|
||||
</g>
|
||||
<g transform="translate(109 52)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="588" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field b</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 83)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="687" height="25" fill="url(#diagonalHatch)" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#495057">title 1</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 115)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="340" height="25" fill="url(#diagonalHatch)" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#495057">title 2</text>
|
||||
</g>
|
||||
<g transform="translate(357 115)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label e</text>
|
||||
</g>
|
||||
<g transform="translate(456 115)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="241" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field e</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 147)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label c</text>
|
||||
</g>
|
||||
<g transform="translate(109 147)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="241" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field c</text>
|
||||
</g>
|
||||
<g transform="translate(357 147)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label f</text>
|
||||
</g>
|
||||
<g transform="translate(456 147)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="241" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field f</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 178)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label d</text>
|
||||
</g>
|
||||
<g transform="translate(109 178)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="241" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field d</text>
|
||||
</g>
|
||||
<g transform="translate(357 178)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label g</text>
|
||||
</g>
|
||||
<g transform="translate(456 178)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="241" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field g</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 210)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label h</text>
|
||||
</g>
|
||||
<g transform="translate(109 210)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="369" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field h</text>
|
||||
</g>
|
||||
<g transform="translate(485 210)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="25" stroke-width="1" stroke-dasharray="2 6"/>
|
||||
<text x="10" y="17" fill="#888888">label i</text>
|
||||
</g>
|
||||
<g transform="translate(584 210)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="113" height="25" stroke-width="1"/>
|
||||
<text x="10" y="17" fill="#888888">value of field i</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,30 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 705 235" width="705" height="235">
|
||||
<defs>
|
||||
<pattern id="fields" width="335" height="91" patternUnits="userSpaceOnUse">
|
||||
<g fill="none" stroke="#888888" stroke-width="1.2">
|
||||
<rect x="6" y="28" rx="5" ry="5" width="80" height="20" stroke-dasharray="2 6"/>
|
||||
<rect x="92" y="28" rx="5" ry="5" width="237" height="20"/>
|
||||
<rect x="6" y="52" rx="5" ry="5" width="80" height="20" stroke-dasharray="2 6"/>
|
||||
<rect x="92" y="52" rx="5" ry="5" width="237" height="20"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="#495057" stroke="none" stroke-width="1">
|
||||
<g transform="translate(10 10)">
|
||||
<rect x="0" y="0" width="686" height="215" fill="none" stroke="#888888"/>
|
||||
<text x="2" y="17">Title 1</text>
|
||||
</g>
|
||||
<g transform="translate(16 35)">
|
||||
<rect x="0" y="0" width="335" height="91" fill="url(#fields)" stroke="#495057"/>
|
||||
<text x="2" y="17">Title 1.1</text>
|
||||
</g>
|
||||
<g transform="translate(16 130)">
|
||||
<rect x="0" y="0" width="335" height="91" fill="url(#fields)" stroke="#495057"/>
|
||||
<text x="2" y="17">Title 1.2</text>
|
||||
</g>
|
||||
<g transform="translate(355 130)">
|
||||
<rect x="0" y="0" width="335" height="91" fill="url(#fields)" stroke="#495057"/>
|
||||
<text x="2" y="17">Title 1.3</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,27 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 716 180" width="716" height="180">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="none" stroke-width="1">
|
||||
<rect x="22" y="10" width="94" height="25" stroke="#495057" fill="url(#diagonalHatch)"/>
|
||||
<text x="48" y="27" fill="#495057">Page1</text>
|
||||
<rect x="118" y="10" width="94" height="25" stroke="#495057"/>
|
||||
<text x="144" y="27" fill="#495057">Page2</text>
|
||||
|
||||
<rect x="10" y="35" width="697" height="135" stroke="#495057"/>
|
||||
|
||||
<g fill="none" stroke="#888888" stroke-width="1" stroke-linecap="round">
|
||||
<rect x="15" y="42" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="114" y="42" rx="5" ry="5" width="241" height="25"/>
|
||||
<rect x="362" y="42" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="461" y="42" rx="5" ry="5" width="241" height="25"/>
|
||||
<rect x="15" y="73" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="114" y="73" rx="5" ry="5" width="241" height="25"/>
|
||||
<rect x="362" y="73" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="461" y="73" rx="5" ry="5" width="241" height="25"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,38 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 727 255" width="727" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#888888" stroke-width="1">
|
||||
<g transform="translate(0 20)">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="109" y="0" rx="5" ry="5" width="588" height="25"/>
|
||||
</g>
|
||||
<g transform="translate(0 52)">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="687" height="25" fill="url(#diagonalHatch)" stroke="#495057" stroke-dasharray="2 6"/>
|
||||
<text x="20" y="17" fill="#495057" stroke="none">Title 1</text>
|
||||
</g>
|
||||
<g transform="translate(0 84)">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="109" y="0" rx="5" ry="5" width="588" height="25"/>
|
||||
</g>
|
||||
<g transform="translate(0 116)">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="109" y="0" rx="5" ry="5" width="241" height="25"/>
|
||||
<rect x="357" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="456" y="0" rx="5" ry="5" width="241" height="25"/>
|
||||
</g>
|
||||
<g transform="translate(0 148)">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="340" height="25" fill="url(#diagonalHatch)" stroke="#495057" stroke-dasharray="2 6"/>
|
||||
<text x="20" y="17" fill="#495057" stroke="none">Title 2</text>
|
||||
<rect x="357" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="456" y="0" rx="5" ry="5" width="241" height="25"/>
|
||||
</g>
|
||||
<g transform="translate(0 180)">
|
||||
<rect x="10" y="0" rx="5" ry="5" width="94" height="25" stroke-dasharray="2 6"/>
|
||||
<rect x="109" y="0" rx="5" ry="5" width="241" height="25"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,18 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 230" width="660" height="230">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<text x="14" y="31" fill="#888888" style="font-weight: bold;">Column 1</text>
|
||||
<rect x="10" y="40" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="10" y="130" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
|
||||
<text x="174" y="31" fill="#888888" style="font-weight: bold;">Column 2</text>
|
||||
<rect x="170" y="40" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
|
||||
<text x="334" y="31" fill="#888888" style="font-weight: bold;">Column 2</text>
|
||||
<rect x="330" y="40" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,25 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 230" width="660" height="230">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<text x="14" y="31" fill="#888888" style="font-weight: bold;">Column 1</text>
|
||||
|
||||
<rect x="10" y="40" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="14" y="60" fill="#888888">Name 1</text>
|
||||
|
||||
<rect x="10" y="130" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="14" y="150" fill="#888888">Name 3</text>
|
||||
|
||||
<text x="174" y="31" fill="#888888" style="font-weight: bold;">Column 2</text>
|
||||
|
||||
<rect x="170" y="40" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="174" y="60" fill="#888888">Name 2</text>
|
||||
|
||||
<text x="334" y="31" fill="#888888" style="font-weight: bold;">Column 2</text>
|
||||
<rect x="330" y="40" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="334" y="60" fill="#888888">Name 4</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,25 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 260" width="660" height="260">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<text x="14" y="31" fill="#888888" style="font-weight: bold;">Column 1</text>
|
||||
<rect x="10" y="44" width="50" height="10" fill="#00bb00" stroke-width="0"/>
|
||||
<rect x="60" y="44" width="50" height="10" fill="#bbbbbb" stroke-width="0"/>
|
||||
<text x="122" y="52" fill="#888888" style="font-weight: bold; font-size: 0.6em;">12,988</text>
|
||||
<rect x="10" y="70" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="10" y="170" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
|
||||
<text x="174" y="31" fill="#888888" style="font-weight: bold;">Column 2</text>
|
||||
<rect x="170" y="44" width="100" height="10" fill="#ff9900" stroke-width="0"/>
|
||||
<text x="288" y="52" fill="#888888" style="font-weight: bold; font-size: 0.6em;">6,700</text>
|
||||
<rect x="170" y="70" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
|
||||
<text x="334" y="31" fill="#888888" style="font-weight: bold;">Column 2</text>
|
||||
<rect x="330" y="44" width="100" height="10" fill="#bbbbbb" stroke-width="0"/>
|
||||
<text x="442" y="52" fill="#888888" style="font-weight: bold; font-size: 0.6em;">18,000</text>
|
||||
<rect x="330" y="70" rx="3" ry="3" width="144" height="80" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,31 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 255" width="660" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="line" width="700" height="28" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(0 0)" fill="none" stroke="#495057" stroke-width="1">
|
||||
<rect x="18" y="7" width="10" height="10"/>
|
||||
<rect x="40" y="1" rx="5" ry="5" width="280" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="330" y="1" rx="5" ry="5" width="100" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="440" y="1" rx="5" ry="5" width="104" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="554" y="1" rx="5" ry="5" width="80" height="25" stroke-dasharray="1.2 6"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="240" stroke-width="1"/>
|
||||
<rect x="10" y="10" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="17" y="17" width="10" height="10" stroke-width="1"/>
|
||||
<text x="40" y="28" fill="#888888">Name</text>
|
||||
<text x="330" y="28" fill="#888888">Amount</text>
|
||||
<text x="440" y="28" fill="#888888">Currency</text>
|
||||
<text x="560" y="28" fill="#888888">Tax</text>
|
||||
|
||||
<rect transform="translate(0 40)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 70)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 100)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 160)" width="700" height="28" fill="url(#line)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,44 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 255" width="660" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="line" width="700" height="28" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(0 0)" fill="none" stroke="#495057" stroke-width="1">
|
||||
<rect x="18" y="7" width="10" height="10"/>
|
||||
<rect x="40" y="1" rx="5" ry="5" width="160" height="25" stroke-dasharray="1.2 6"/>
|
||||
|
||||
<rect transform="translate(216 3)" rx="5" ry="5" width="22" height="22" fill="url(#pencil)" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<rect x="254" y="3" rx="5" ry="5" width="60" height="22" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="257" y="20" fill="#000000" stroke="none">Button1</text>
|
||||
|
||||
<rect x="330" y="1" rx="5" ry="5" width="100" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="440" y="1" rx="5" ry="5" width="104" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="554" y="1" rx="5" ry="5" width="80" height="25" stroke-dasharray="1.2 6"/>
|
||||
</g>
|
||||
</pattern>
|
||||
<pattern id="pencil" width="26" height="22" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(3 3)">
|
||||
<path transform="scale(0.03 0.03)" d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
|
||||
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
|
||||
C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
|
||||
L27.473,390.597L0.3,512.69z" fill="#495057"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="240" stroke-width="1"/>
|
||||
<rect x="10" y="10" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="17" y="17" width="10" height="10" stroke-width="1"/>
|
||||
<text x="40" y="28" fill="#888888">Name</text>
|
||||
<text x="330" y="28" fill="#888888">Amount</text>
|
||||
<text x="440" y="28" fill="#888888">Currency</text>
|
||||
<text x="560" y="28" fill="#888888">Tax</text>
|
||||
|
||||
<rect transform="translate(0 40)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 70)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 100)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 160)" width="700" height="28" fill="url(#line)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,44 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 255" width="660" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="line" width="700" height="28" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(0 0)" fill="none" stroke="#495057" stroke-width="1">
|
||||
<rect x="18" y="7" width="10" height="10"/>
|
||||
<rect x="40" y="1" rx="5" ry="5" width="280" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="330" y="1" rx="5" ry="5" width="100" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="440" y="1" rx="5" ry="5" width="104" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="554" y="1" rx="5" ry="5" width="80" height="25" stroke-dasharray="1.2 6"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="240" stroke-width="1"/>
|
||||
<rect x="10" y="10" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="17" y="17" width="10" height="10" stroke-width="1"/>
|
||||
<text x="40" y="28" fill="#888888">Name</text>
|
||||
<text x="330" y="28" fill="#888888">Amount</text>
|
||||
<text x="440" y="28" fill="#888888">Currency</text>
|
||||
<text x="560" y="28" fill="#888888">Tax</text>
|
||||
|
||||
<rect transform="translate(0 40)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 70)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 100)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 160)" width="700" height="28" fill="url(#line)"/>
|
||||
|
||||
<g transform="translate(20 194)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="94" height="22" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="3" y="17" fill="#000000" stroke="none">Add an item</text>
|
||||
</g>
|
||||
<g transform="translate(129 194)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="103" height="22" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="3" y="17" fill="#000000" stroke="none">Add a section</text>
|
||||
</g>
|
||||
<g transform="translate(243 194)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="84" height="22" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="3" y="17" fill="#000000" stroke="none">Add a note</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,34 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 255" width="660" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="line" width="700" height="28" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(0 0)" fill="none" stroke="#495057" stroke-width="1">
|
||||
<rect x="18" y="7" width="10" height="10"/>
|
||||
<rect x="40" y="1" rx="5" ry="5" width="280" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="330" y="1" rx="5" ry="5" width="100" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="440" y="1" rx="5" ry="5" width="104" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="554" y="1" rx="5" ry="5" width="80" height="25" stroke-dasharray="1.2 6"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="240" stroke-width="1"/>
|
||||
<rect x="10" y="10" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="17" y="17" width="10" height="10" stroke-width="1"/>
|
||||
<text x="40" y="28" fill="#495057">My Custom Name</text>
|
||||
<text x="330" y="28" fill="#495057">Amount</text>
|
||||
<text x="440" y="28" fill="#495057">Currency</text>
|
||||
<text x="560" y="28" fill="#495057">Tax</text>
|
||||
|
||||
<rect transform="translate(0 40)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 70)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 100)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 160)" width="700" height="28" fill="url(#line)"/>
|
||||
|
||||
<rect x="10" y="225" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="335" y="243" fill="#495057">123.45 €</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,56 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 255" width="660" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="line" width="700" height="28" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(0 0)" fill="none" stroke="#495057" stroke-width="1">
|
||||
<rect x="18" y="7" width="10" height="10"/>
|
||||
<rect x="40" y="1" rx="5" ry="5" width="280" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="330" y="1" rx="5" ry="5" width="100" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="440" y="1" rx="5" ry="5" width="104" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="554" y="1" rx="5" ry="5" width="80" height="25" stroke-dasharray="1.2 6"/>
|
||||
</g>
|
||||
</pattern>
|
||||
<pattern id="pencil" width="26" height="22" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(3 3)">
|
||||
<path transform="scale(0.03 0.03)" d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
|
||||
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
|
||||
C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
|
||||
L27.473,390.597L0.3,512.69z" fill="#495057"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="240" stroke-width="1"/>
|
||||
<rect x="10" y="10" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="17" y="17" width="10" height="10" stroke-width="1"/>
|
||||
<text x="40" y="28" fill="#888888">Name</text>
|
||||
<text x="330" y="28" fill="#888888">Amount</text>
|
||||
<text x="440" y="28" fill="#888888">Currency</text>
|
||||
<text x="560" y="28" fill="#888888">Tax</text>
|
||||
|
||||
<g transform="translate(10 46)">
|
||||
<text x="26" y="12" fill="#888888">Admin (3)</text>
|
||||
<rect transform="translate(117 -3)" rx="5" ry="5" width="22" height="22" fill="url(#pencil)" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<rect x="147" y="-3" rx="5" ry="5" width="60" height="22" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="150" y="14" fill="#000000">Button1</text>
|
||||
</g>
|
||||
<rect transform="translate(0 70)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 100)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="700" height="28" fill="url(#line)"/>
|
||||
|
||||
<g transform="translate(10 164)">
|
||||
<text x="26" y="12" fill="#888888">Demo (0)</text>
|
||||
<rect transform="translate(117 -3)" rx="5" ry="5" width="22" height="22" fill="url(#pencil)" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<rect x="147" y="-3" rx="5" ry="5" width="60" height="22" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="150" y="14" fill="#000000">Button1</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 190)">
|
||||
<text x="26" y="12" fill="#888888">Jhon (1)</text>
|
||||
<rect transform="translate(117 -3)" rx="5" ry="5" width="22" height="22" fill="url(#pencil)" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
</g>
|
||||
<rect transform="translate(0 214)" width="700" height="28" fill="url(#line)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,56 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 255" width="660" height="255">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="line" width="700" height="28" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(0 0)" fill="none" stroke="#888888" stroke-width="1">
|
||||
<rect x="18" y="7" width="10" height="10"/>
|
||||
<rect x="40" y="1" rx="5" ry="5" width="280" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="330" y="1" rx="5" ry="5" width="100" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="440" y="1" rx="5" ry="5" width="104" height="25" stroke-dasharray="1.2 6"/>
|
||||
<rect x="554" y="1" rx="5" ry="5" width="80" height="25" stroke-dasharray="1.2 6"/>
|
||||
</g>
|
||||
</pattern>
|
||||
<pattern id="pencil" width="26" height="22" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(3 3)">
|
||||
<path transform="scale(0.03 0.03)" d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
|
||||
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
|
||||
C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
|
||||
L27.473,390.597L0.3,512.69z" fill="#495057"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#888888" stroke-width="0">
|
||||
|
||||
<g transform="translate(10 15)">
|
||||
<rect x="0" y="0" rx="5" ry="5" width="50" height="25" fill="#cccccc" stroke-width="1"/>
|
||||
<text x="8" y="17" fill="#495057">New</text>
|
||||
|
||||
<rect x="150" y="0" rx="5" ry="5" width="83" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="154" y="17" fill="#888888">3 selected</text>
|
||||
|
||||
<rect x="240" y="0" rx="5" ry="5" width="66" height="25" stroke-width="1" stroke-dasharray="1 4"/>
|
||||
<text x="246" y="17" fill="#000000">Button1</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(10 46)">
|
||||
<rect x="10" y="10" width="636" height="180" stroke-width="1"/>
|
||||
<rect x="10" y="10" width="636" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<rect x="17" y="17" width="10" height="10" stroke-width="1"/>
|
||||
<text x="40" y="28" fill="#888888">Name</text>
|
||||
<text x="330" y="28" fill="#888888">Amount</text>
|
||||
<text x="440" y="28" fill="#888888">Currency</text>
|
||||
<text x="560" y="28" fill="#888888">Tax</text>
|
||||
|
||||
<rect transform="translate(0 40)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect x="18" y="47" width="10" height="10" fill="#495057"/>
|
||||
<rect transform="translate(0 70)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect x="18" y="77" width="10" height="10" fill="#495057"/>
|
||||
<rect transform="translate(0 100)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect transform="translate(0 130)" width="700" height="28" fill="url(#line)"/>
|
||||
<rect x="18" y="137" width="10" height="10" fill="#495057"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,21 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 54" width="660" height="54">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="search" width="30" height="30" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(2 2)">
|
||||
<circle cx="16" cy="16" r="6" stroke="black" stroke-width="3" fill="none"/>
|
||||
<line x1="21" y1="21" x2="28" y2="28" stroke="black" stroke-width="3"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="34" stroke-width="1"/>
|
||||
<rect transform="translate(8 6)" width="30" height="30" fill="url(#search)"/>
|
||||
<rect x="50" y="14" width="54" height="25" fill="#dddddd" stroke-width="1"/>
|
||||
<text x="54" y="31" fill="#888888" style="font-weight: bold;">Name</text>
|
||||
<rect x="104" y="14" width="130" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="110" y="31" fill="#888888">Searching value</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,44 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 160" width="660" height="160">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="search" width="30" height="30" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(2 2)">
|
||||
<circle cx="16" cy="16" r="6" stroke="black" stroke-width="3" fill="none"/>
|
||||
<line x1="21" y1="21" x2="28" y2="28" stroke="black" stroke-width="3"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="34" stroke-width="1"/>
|
||||
<rect transform="translate(8 6)" width="30" height="30" fill="url(#search)"/>
|
||||
<rect x="50" y="14" width="144" height="25" fill="#dddddd" stroke-width="1"/>
|
||||
<text x="54" y="31" fill="#888888" style="font-weight: bold;">My Custom Name</text>
|
||||
<rect x="194" y="14" width="160" height="25" fill="url(#diagonalHatch)" stroke-width="1"/>
|
||||
<text x="200" y="31" fill="#888888">Default value search</text>
|
||||
|
||||
<text x="370" y="31" fill="#888888">aaa</text>
|
||||
<text x="396" y="31" fill="#333333">|</text>
|
||||
<text x="620" y="32" fill="#888888">▼</text>
|
||||
|
||||
<g>
|
||||
<rect x="10" y="50" width="636" height="100" stroke-width="1"/>
|
||||
|
||||
<text x="30" y="76" fill="#888888">Search</text>
|
||||
<text x="86" y="76" fill="#888888" style="font-weight: bold;">Amount</text>
|
||||
<text x="156" y="76" fill="#888888">for:</text>
|
||||
<text x="186" y="76" fill="#888888" style="font-style: italic;">aaa</text>
|
||||
|
||||
<text x="30" y="102" fill="#888888">Search</text>
|
||||
<text x="86" y="102" fill="#888888" style="font-weight: bold;">Currency</text>
|
||||
<text x="162" y="102" fill="#888888">for:</text>
|
||||
<text x="192" y="102" fill="#888888" style="font-style: italic;">aaa</text>
|
||||
|
||||
<text x="30" y="128" fill="#888888">Search</text>
|
||||
<text x="86" y="128" fill="#888888" style="font-weight: bold;">Reference</text>
|
||||
<text x="170" y="128" fill="#888888">for:</text>
|
||||
<text x="200" y="128" fill="#888888" style="font-style: italic;">aaa</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,33 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 160" width="660" height="160">
|
||||
<defs>
|
||||
<pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="5" stroke="#cccccc" stroke-width="1"/>
|
||||
</pattern>
|
||||
<pattern id="search" width="30" height="30" patternUnits="userSpaceOnUse">
|
||||
<g transform="translate(2 2)">
|
||||
<circle cx="16" cy="16" r="6" stroke="black" stroke-width="3" fill="none"/>
|
||||
<line x1="21" y1="21" x2="28" y2="28" stroke="black" stroke-width="3"/>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<g font-family="Arial" font-size="16px" direction="ltr" fill="none" stroke="#495057" stroke-width="0">
|
||||
<rect x="10" y="10" width="636" height="34" stroke-width="1"/>
|
||||
<rect transform="translate(8 6)" width="30" height="30" fill="url(#search)"/>
|
||||
<rect x="50" y="14" width="86" height="25" fill="#dddddd" stroke-width="1"/>
|
||||
<text x="54" y="31" fill="#888888" style="font-weight: bold;">My orders</text>
|
||||
|
||||
<text x="620" y="32" fill="#888888">▼</text>
|
||||
|
||||
<g>
|
||||
<rect x="10" y="50" width="636" height="100" stroke-width="1"/>
|
||||
|
||||
<text x="40" y="76" fill="#888888" style="font-weight: bold;text-decoration: underline;">Filters</text>
|
||||
<text x="40" y="106" fill="#888888">Unassigned</text>
|
||||
<text x="24" y="135" fill="#888888">x</text>
|
||||
<text x="40" y="136" fill="#888888" style="font-weight: bold;">My orders</text>
|
||||
|
||||
<text x="240" y="76" fill="#888888" style="font-weight: bold;text-decoration: underline;">Group By</text>
|
||||
<text x="240" y="106" fill="#888888">Category</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
343
content/developer/reference/user_interface/view_records.rst
Normal file
343
content/developer/reference/user_interface/view_records.rst
Normal file
@ -0,0 +1,343 @@
|
||||
============
|
||||
View Records
|
||||
============
|
||||
|
||||
Views are what define how records should be displayed to end-users. They are specified in XML which
|
||||
means that they can be edited independently from the models that they represent. They are flexible
|
||||
and allow a high level of customization of the screens that they control. There exist various types
|
||||
of views. Each of them represents a mode of visualization: *form*, *list*, *kanban*, etc.
|
||||
|
||||
.. todo:: Build doc of ir_ui_view.py ?
|
||||
|
||||
.. _reference/view_records/structure:
|
||||
|
||||
Generic structure
|
||||
=================
|
||||
|
||||
Basic views generally share the common structure defined below. Placeholders are denoted in all
|
||||
caps.
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<record id="ADDON.MODEL_view_TYPE" model="ir.ui.view">
|
||||
<field name="name">NAME</field>
|
||||
<field name="model">MODEL</field>
|
||||
<!--
|
||||
<field name="groups_id" eval="GROUPS"/>
|
||||
<field name="priority">PRIORITY</field>
|
||||
-->
|
||||
<!--
|
||||
<field name="inherit_id" ref="REFERENCE"/>
|
||||
<field name="mode">PRIMARY</field>
|
||||
-->
|
||||
<field name="arch" type="xml">
|
||||
<VIEW_TYPE>
|
||||
<views/>
|
||||
</VIEW_TYPE>
|
||||
</field>
|
||||
</record>
|
||||
|
||||
.. _reference/view_records/types:
|
||||
|
||||
View types
|
||||
==========
|
||||
|
||||
- :ref:`Form <reference/view_architecture/form>` ->
|
||||
display and edit the data from a single record
|
||||
- :ref:`List <reference/view_architecture/list>` ->
|
||||
view and edit multiple records
|
||||
- :ref:`Search <reference/view_architecture/search>` ->
|
||||
apply filters and perform searches (the result are displayed in the current view list, kanban...)
|
||||
- :ref:`Kanban <reference/view_architecture/kanban>` ->
|
||||
displays records as "cards" configurable as a small template
|
||||
- :ref:`Qweb <reference/view_architecture/qweb>` ->
|
||||
templating of reporting, website...
|
||||
- :ref:`Graph <reference/view_architecture/graph>` ->
|
||||
visualize aggregations over a number of records or record groups
|
||||
- :ref:`Pivot <reference/view_architecture/pivot>` ->
|
||||
display aggregations as a `pivot table`_
|
||||
- :ref:`Calendar <reference/view_architecture/calendar>` ->
|
||||
display records as events in a daily, weekly, monthly or yearly calendar
|
||||
|
||||
.. raw:: html
|
||||
|
||||
<span class="badge" style="background-color:#AD5E99">Enterprise feature</span>
|
||||
|
||||
- :ref:`Cohort <reference/view_architecture/cohort>` ->
|
||||
display and understand the way some data changes over a period of time
|
||||
- :ref:`Gantt <reference/view_architecture/gantt>` ->
|
||||
display records as a Gantt charts (for scheduling)
|
||||
- :ref:`Grid <reference/view_architecture/grid>` ->
|
||||
display computed information in numerical cells are hardly configurable
|
||||
- :ref:`Map <reference/view_architecture/map>` ->
|
||||
display records on a map and the routes between them
|
||||
|
||||
.. _reference/view_records/fields:
|
||||
|
||||
Fields
|
||||
======
|
||||
|
||||
View objects expose a number of fields. They are optional unless specified otherwise.
|
||||
|
||||
:name:
|
||||
:class:`~odoo.fields.Char`
|
||||
|
||||
Only useful as a mnemonic/description of the view when looking for one in a list of some sort.
|
||||
Most Odoo view names start with the name of the addon and end with the type of view being discussed.
|
||||
|
||||
:model:
|
||||
:class:`~odoo.fields.Char` (mandatory)
|
||||
|
||||
The model linked to the view, if applicable.
|
||||
|
||||
:arch:
|
||||
:class:`~odoo.fields.Text`
|
||||
|
||||
The description of the view layout depending on :doc:`view type <view_architecture>`
|
||||
|
||||
:groups_id:
|
||||
:class:`~odoo.fields.Many2many` -> :class:`~odoo.addons.base.models.res_users.Groups`
|
||||
|
||||
The groups allowed to use/access the current view.
|
||||
|
||||
If the view extends an existing view, the extension will only be applied
|
||||
for a given user if the user has access to the provided ``groups_id``.
|
||||
|
||||
:priority:
|
||||
:class:`~odoo.fields.Integer`
|
||||
|
||||
When a view is requested by ``model`` and ``type``, the view matching the
|
||||
model and the type, with the lowest priority will be returned (it is the
|
||||
default view).
|
||||
|
||||
It also defines the order of views application during :ref:`view
|
||||
inheritance <reference/view_records/inheritance>`. When a view is requested
|
||||
by ``id``, if its mode is not ``primary`` its *closest* parent with ``mode``
|
||||
``primary`` is matched.
|
||||
|
||||
:inherit_id:
|
||||
:class:`~odoo.fields.Many2one`
|
||||
|
||||
Reference to the parent view on which the inheritance will be applied. It
|
||||
value is uset by default. Specify the parent using the ``ref`` attribute as
|
||||
`ref="ADDON.MODEL_parent_view_TYPE"`. The addon name (separate by dot) is
|
||||
not necessary if the inheritance is done on a record of the same module.
|
||||
|
||||
See :ref:`inheritance <reference/view_records/inheritance>` information
|
||||
|
||||
:mode:
|
||||
:class:`~odoo.fields.Selection`: ``extension`` / ``primary``
|
||||
|
||||
Only applies if this view inherits from an other one (inherit_id is not False/Null).
|
||||
|
||||
**extension** (default)
|
||||
if this view is requested the closest primary view is looked up (via inherit_id),
|
||||
then all views inheriting from it with this view's model are applied
|
||||
**primary**
|
||||
the closest primary view is fully resolved (even if it uses a different model than
|
||||
this one), then this view's inheritance specs (<xpath/>) are applied, and the result
|
||||
is used as if it were this view's actual arch.
|
||||
|
||||
An example of where you would want to override ``mode`` while using
|
||||
``inherit_id`` is delegation inheritance.
|
||||
In that case your derived model will be separate from its parent and views
|
||||
matching with one won't match with the other. Suppose you inherit from a view
|
||||
associated with the parent model and want to customize the derived view to
|
||||
show data from the derived model. The ``mode`` of the derived view needs to
|
||||
be set to ``primary``, because it's the base (and maybe only) view for that
|
||||
derived model. Otherwise the :ref:`view matching <reference/view_records/inheritance/view-matching>`
|
||||
rules won't apply.
|
||||
|
||||
See :ref:`inheritance <reference/view_records/inheritance>` information
|
||||
|
||||
.. note:: The current context and user access rights may also impact the view abilities.
|
||||
|
||||
.. _reference/view_records/inheritance:
|
||||
|
||||
Inheritance
|
||||
===========
|
||||
|
||||
Inheritance allows you to customize delivered views. This makes it possible, for example,
|
||||
to add content according to the modules installed, or to deliver different displays
|
||||
according to the action.
|
||||
|
||||
Inherit views generally share the common structure defined below. Placeholders are
|
||||
denoted in all caps. This synthetic view will update a node targeted by an xpath, and
|
||||
an other targeted by his name and attributes.
|
||||
|
||||
The two following :ref:`view fields <reference/view_records/fields>` `inherit_id` and
|
||||
`mode` are used to specify inherited views.
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<record id="ADDON.MODEL_view_TYPE" model="ir.ui.view">
|
||||
<field name="model">MODEL</field>
|
||||
<field name="inherit_id" ref="VIEW_REFERENCE"/>
|
||||
<!--
|
||||
<field name="mode">PRIMARY</field>
|
||||
-->
|
||||
<field name="arch" type="xml">
|
||||
<xpath expr="XPATH" position="inside">
|
||||
CONTENT
|
||||
</xpath>
|
||||
<NODE ATTRIBUTES="VALUES" position="replace">
|
||||
<CONTENT/>
|
||||
</NODE>
|
||||
</field>
|
||||
</record>
|
||||
|
||||
.. _reference/view_records/inheritance/view-matching:
|
||||
|
||||
View resolution
|
||||
---------------
|
||||
|
||||
Resolution generates the final ``arch`` for a requested/matched ``primary``
|
||||
view:
|
||||
|
||||
#. if the view has a parent, the parent is fully resolved then the current
|
||||
view's inheritance specs are applied
|
||||
#. if the view has no parent, its ``arch`` is used as-is
|
||||
#. the current view's children with mode ``extension`` are looked up and their
|
||||
inheritance specs are applied depth-first (a child view is applied, then
|
||||
its children, then its siblings)
|
||||
|
||||
The inheritance is applied according to ``inherit_id``. If several view
|
||||
record inherit the same view, the order is determined by the ``priority``.
|
||||
|
||||
The result of applying children views yields the final ``arch``
|
||||
|
||||
.. todo:: NOTE on fields_view_get and link to ORM ?
|
||||
|
||||
Inheritance specs
|
||||
-----------------
|
||||
|
||||
Inheritance specs are comprised of an element locator, to match
|
||||
the inherited element in the parent view, and children element that
|
||||
will be used to modify the inherited element.
|
||||
|
||||
There are three types of element locators for matching a target element:
|
||||
|
||||
* An ``xpath`` element with an ``expr`` attribute. ``expr`` is an XPath_
|
||||
expression\ [#hasclass]_ applied to the current ``arch``, the first node
|
||||
it finds is the match
|
||||
* a ``field`` element with a ``name`` attribute, matches the first ``field``
|
||||
with the same ``name``. All other attributes are ignored during matching
|
||||
* any other element: the first element with the same name and identical
|
||||
attributes (ignoring ``position`` and ``version`` attributes) is matched
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<xpath expr="page[@name='pg']/group[@name='gp']/field" position="inside">
|
||||
<field name="description"/>
|
||||
</xpath>
|
||||
|
||||
<div name="name" position="replace">
|
||||
<field name="name2"/>
|
||||
</div>
|
||||
|
||||
The view's specs are applied sequentially.
|
||||
|
||||
.. [#hasclass] an extension function is added for simpler matching in QWeb
|
||||
views: ``hasclass(*classes)`` matches if the context node has
|
||||
all the specified classes
|
||||
|
||||
Inheritance position
|
||||
--------------------
|
||||
|
||||
The inheritance spec may have an optional ``position`` attribute specifying
|
||||
how the matched node should be altered. By default the value is ``inside``.
|
||||
|
||||
:inside:
|
||||
the content of the inheritance spec is appended to the matched node
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<notebook position="inside">
|
||||
<page string="New feature">
|
||||
...
|
||||
</page>
|
||||
</notebook>
|
||||
|
||||
:after:
|
||||
the content of the inheritance spec is added to the matched node's
|
||||
parent, after the matched node
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<xpath expr="//field[@name='x_field']" position="after">
|
||||
<field name="x_other_field"/>
|
||||
</xpath>
|
||||
|
||||
:before:
|
||||
the content of the inheritance spec is added to the matched node's
|
||||
parent, before the matched node
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<field name=x_field" position="before">
|
||||
<field name="x_other_field"/>
|
||||
</field>
|
||||
|
||||
:replace:
|
||||
the content of the inheritance spec replaces the matched node.
|
||||
Any text node containing only ``$0`` within the contents of the spec will
|
||||
be replaced by a complete copy of the matched node, effectively wrapping
|
||||
the matched node.
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<xpath expr="//field[@name='x_field']" position="replace">
|
||||
<div class="wrapper">
|
||||
$0
|
||||
</div>
|
||||
</xpath>
|
||||
|
||||
:attributes:
|
||||
the content of the inheritance spec should be ``attribute`` elements
|
||||
with a ``name`` attribute and an optional body:
|
||||
|
||||
* if the ``attribute`` element has a body, a new attributed named
|
||||
after its ``name`` is created on the matched node with the
|
||||
``attribute`` element's text as value
|
||||
* if the ``attribute`` element has no body, the attribute named after
|
||||
its ``name`` is removed from the matched node. If no such attribute
|
||||
exists, an error is raised
|
||||
* if the ``attribute`` element has an ``add`` attribute, a ``remove`` attribute, or both, the
|
||||
value of the matched node's attribute named after ``name`` is recomputed to include the
|
||||
value(s) of ``add`` (separated by ``separator``) and delete the value(s) of ``remove``
|
||||
(separated by ``separator``). If ``separator`` is not provided, ``,`` is used instead.
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<field name="x_field" position="attributes">
|
||||
<attribute name="invisible">True</attribute>
|
||||
<attribute name="class" add="mt-1 mb-1" remove="mt-2 mb-2" separator=" "/>
|
||||
</field>
|
||||
|
||||
:move:
|
||||
can be used as a direct child of a inheritance spec
|
||||
with a ``inside``, ``replace``, ``after`` or ``before`` ``position`` attribute
|
||||
to move a node.
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<xpath expr="//@target" position="after">
|
||||
<xpath expr="//@node" position="move"/>
|
||||
</xpath>
|
||||
|
||||
<field name="target_field" position="after">
|
||||
<field name="my_field" position="move"/>
|
||||
</field>
|
||||
|
||||
Model Commons
|
||||
=============
|
||||
|
||||
.. currentmodule:: odoo.addons.base.models.ir_ui_view
|
||||
.. automethod:: Model.get_views
|
||||
.. automethod:: Model.get_view
|
||||
|
||||
|
||||
.. _pivot table: https://en.wikipedia.org/wiki/Pivot_table
|
||||
.. _XPath: https://en.wikipedia.org/wiki/XPath
|
||||
.. _path: https://en.wikipedia.org/wiki/Path_(computing)
|
||||
.. _boolean: https://docs.python.org/3/library/stdtypes.html#boolean-values
|
||||
@ -56,13 +56,14 @@ Business objects
|
||||
Declared as Python classes, these resources are automatically persisted
|
||||
by Odoo based on their configuration
|
||||
|
||||
:ref:`Object views <reference/views>`
|
||||
:doc:`Object views <../reference/user_interface/view_architecture>`
|
||||
Definition of business objects UI display
|
||||
|
||||
:ref:`Data files <reference/data>`
|
||||
XML or CSV files declaring the model metadata :
|
||||
|
||||
* :ref:`views <reference/views>` or :ref:`reports <reference/reports>`,
|
||||
* :doc:`views <../reference/user_interface/view_architecture>` or :ref:`reports
|
||||
<reference/reports>`,
|
||||
* configuration data (modules parametrization, :ref:`security rules <reference/security>`),
|
||||
* demonstration data
|
||||
* and more
|
||||
@ -304,7 +305,7 @@ requests, the view with the correct type and the lowest priority will be
|
||||
used (so the lowest-priority view of each type is the default view for that
|
||||
type).
|
||||
|
||||
:ref:`View inheritance <reference/views/inheritance>` allows altering views
|
||||
:ref:`View inheritance <reference/view_records/inheritance>` allows altering views
|
||||
declared elsewhere (adding or removing content).
|
||||
|
||||
Generic view declaration
|
||||
@ -398,11 +399,11 @@ Form views can also use plain HTML for more flexible layouts:
|
||||
<form string="Idea Form">
|
||||
<header>
|
||||
<button string="Confirm" type="object" name="action_confirm"
|
||||
states="draft" class="oe_highlight" />
|
||||
invisible="state != 'draft'" class="oe_highlight" />
|
||||
<button string="Mark as done" type="object" name="action_done"
|
||||
states="confirmed" class="oe_highlight"/>
|
||||
invisible="state != 'confirmed'" class="oe_highlight"/>
|
||||
<button string="Reset to draft" type="object" name="action_draft"
|
||||
states="confirmed,done" />
|
||||
invisible="state not in ['confirmed', 'done']" />
|
||||
<field name="state" widget="statusbar"/>
|
||||
</header>
|
||||
<sheet>
|
||||
@ -1288,7 +1289,7 @@ A report is a combination two elements:
|
||||
the *report* contextual menu rather than the *action* one. There is no
|
||||
technical difference but putting elements in the right place helps users.
|
||||
|
||||
* A standard :ref:`QWeb view <reference/views/qweb>` for the actual report:
|
||||
* A standard :ref:`QWeb view <reference/view_architecture/qweb>` for the actual report:
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
|
||||
@ -19,8 +19,9 @@ Master data is usually part of the technical or business requirements for the mo
|
||||
words, such data is often necessary for the module to work properly. This data will always be
|
||||
installed when installing the module.
|
||||
|
||||
We already met technical data previously since we have defined :ref:`views <reference/views>` and
|
||||
:ref:`actions <reference/actions>`. Those are one kind of master data.
|
||||
We already met technical data previously since we have defined :doc:`views
|
||||
<../reference/user_interface/view_records>` and :doc:`actions <../reference/backend/actions>`. Those
|
||||
are one kind of master data.
|
||||
|
||||
On top of technical data, business data can be defined, e.g. countries, currencies, units of measure,
|
||||
as well as complete country localization (legal reports, tax definitions, chart of account), and much
|
||||
|
||||
@ -64,13 +64,14 @@ An Odoo module **can** contain a number of elements:
|
||||
these classes are automatically mapped to database columns thanks to the
|
||||
:abbr:`ORM (Object-Relational Mapping)` layer.
|
||||
|
||||
:ref:`Object views <reference/views>`
|
||||
:doc:`Object views <../../reference/user_interface/view_architecture>`
|
||||
Define UI display
|
||||
|
||||
:ref:`Data files <reference/data>`
|
||||
XML or CSV files declaring the model data:
|
||||
|
||||
* :ref:`views <reference/views>` or :ref:`reports <reference/reports>`,
|
||||
* :doc:`views <../../reference/user_interface/view_architecture>` or
|
||||
:ref:`reports <reference/reports>`,
|
||||
* configuration data (modules parametrization, :ref:`security rules <reference/security>`),
|
||||
* demonstration data
|
||||
* and more
|
||||
|
||||
@ -47,7 +47,7 @@ Actions
|
||||
=======
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/actions`.
|
||||
:doc:`../../reference/backend/actions`.
|
||||
|
||||
.. note::
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ List
|
||||
====
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/views/list`.
|
||||
:ref:`reference/view_architecture/list`.
|
||||
|
||||
.. note::
|
||||
|
||||
@ -72,7 +72,7 @@ Form
|
||||
====
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/views/form`.
|
||||
:ref:`reference/view_architecture/form`.
|
||||
|
||||
.. note::
|
||||
|
||||
@ -134,7 +134,7 @@ Search
|
||||
======
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/views/search`.
|
||||
:ref:`reference/view_architecture/search`.
|
||||
|
||||
.. note::
|
||||
|
||||
@ -154,8 +154,9 @@ Search
|
||||
|
||||
Search views are slightly different from the list and form views since they don't display
|
||||
*content*. Although they apply to a specific model, they are used to filter
|
||||
other views' content (generally aggregated views such as :ref:`reference/views/list`).
|
||||
Beyond the difference in use case, they are defined the same way.
|
||||
other views' content (generally aggregated views such as
|
||||
:ref:`reference/view_architecture/list`). Beyond the difference in use case, they are
|
||||
defined the same way.
|
||||
|
||||
Their root element is ``<search>``. The most basic version of this view simply
|
||||
lists all the fields for which a shortcut is desired:
|
||||
|
||||
@ -20,7 +20,7 @@ Action Type
|
||||
===========
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/actions` and :ref:`reference/exceptions`.
|
||||
:doc:`../../reference/backend/actions` and :ref:`reference/exceptions`.
|
||||
|
||||
.. note::
|
||||
|
||||
|
||||
@ -16,7 +16,8 @@ This chapter covers a very small subset of what can be done in the views. Do not
|
||||
read the reference documentation for a more complete overview.
|
||||
|
||||
**Reference**: the documentation related to this chapter can be found in
|
||||
:ref:`reference/views`.
|
||||
:doc:`../../reference/user_interface/view_records` and
|
||||
:doc:`../../reference/user_interface/view_architecture`.
|
||||
|
||||
Inline Views
|
||||
============
|
||||
@ -271,41 +272,41 @@ behavior customizations, we can add the ``options`` attribute to several field w
|
||||
In :ref:`tutorials/getting_started/06_firstui`, we saw that reserved fields were used for
|
||||
specific behaviors. For example, the ``active`` field is used to automatically filter out
|
||||
inactive records. We added the ``state`` as a reserved field as well. It's now time to use it!
|
||||
A ``state`` field is used in combination with a ``states`` attribute in the view to display
|
||||
A ``state`` field is used in combination with a ``invisible`` attribute in the view to display
|
||||
buttons conditionally.
|
||||
|
||||
.. exercise:: Add conditional display of buttons.
|
||||
|
||||
Use the ``states`` attribute to display the header buttons conditionally as depicted
|
||||
Use the ``invisible`` attribute to display the header buttons conditionally as depicted
|
||||
in this section's **Goal** (notice how the 'Sold' and 'Cancel' buttons change when the state is modified).
|
||||
|
||||
Tip: do not hesitate to search for ``states=`` in the Odoo XML files for some examples.
|
||||
Tip: do not hesitate to search for ``invisible=`` in the Odoo XML files for some examples.
|
||||
|
||||
More generally, it is possible to make a field ``invisible``, ``readonly`` or ``required`` based
|
||||
on the value of other fields thanks to the ``attrs`` attribute. Note that ``invisible`` can also be applied
|
||||
to other elements of the view such as ``button`` or ``group``.
|
||||
on the value of other fields. Note that ``invisible`` can also be appliedto other elements of
|
||||
the view such as ``button`` or ``group``.
|
||||
|
||||
The ``attrs`` is a dictionary with the property as a key and a domain as a value. The domain gives
|
||||
the condition in which the property applies. For example:
|
||||
``invisible``, ``readonly`` or ``required`` can have ``True``, ``False`` or a domain as value.
|
||||
The domain gives the condition in which the property applies. For example:
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
<form>
|
||||
<field name="description" attrs="{'invisible': [('is_partner', '=', False)]}"/>
|
||||
<field name="description" invisible="not is_partner"/>
|
||||
<field name="is_partner" invisible="1"/>
|
||||
</form>
|
||||
|
||||
This means that the ``description`` field is invisible when ``is_partner`` is ``False``. It is
|
||||
important to note that a field used in an ``attrs`` **must** be present in the view. If it
|
||||
important to note that a field used in ``invisible`` **must** be present in the view. If it
|
||||
should not be displayed to the user, we can use the ``invisible`` attribute to hide it.
|
||||
|
||||
.. exercise:: Use ``attrs``.
|
||||
.. exercise:: Use ``invisible``.
|
||||
|
||||
- Make the garden area and orientation invisible in the ``estate.property`` form view when
|
||||
there is no garden.
|
||||
- Make the 'Accept' and 'Refuse' buttons invisible once the offer state is set.
|
||||
- Do not allow adding an offer when the property state is 'Offer Accepted', 'Sold' or
|
||||
'Canceled'. To do this use the ``readonly`` ``attrs``.
|
||||
'Canceled'. To do this use the ``readonly`` attribute.
|
||||
|
||||
.. warning::
|
||||
|
||||
@ -385,7 +386,7 @@ Search
|
||||
------
|
||||
|
||||
**Reference**: the documentation related to this section can be found in
|
||||
:ref:`reference/views/search` and :ref:`reference/views/search/defaults`.
|
||||
:ref:`reference/view_architecture/search` and :ref:`reference/view_architecture/search/defaults`.
|
||||
|
||||
.. note::
|
||||
|
||||
|
||||
@ -166,7 +166,7 @@ View Inheritance
|
||||
================
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/views/inheritance`.
|
||||
:ref:`reference/view_records/inheritance`.
|
||||
|
||||
.. note::
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ Concrete Example: A Kanban View
|
||||
===============================
|
||||
|
||||
**Reference**: the documentation related to this topic can be found in
|
||||
:ref:`reference/views/kanban`.
|
||||
:ref:`reference/view_architecture/kanban`.
|
||||
|
||||
.. note::
|
||||
|
||||
@ -111,7 +111,7 @@ it is possible to add it outside of the ``<templates>`` element.
|
||||
Refer to the **Goal** of the section for a visual example.
|
||||
|
||||
Let's give the final touch to our view: the properties must be grouped by type by default. You
|
||||
might want to have a look at the various options described in :ref:`reference/views/kanban`.
|
||||
might want to have a look at the various options described in :ref:`reference/view_architecture/kanban`.
|
||||
|
||||
.. exercise:: Add default grouping.
|
||||
|
||||
|
||||
@ -166,7 +166,7 @@ whenever it is set to `true`.
|
||||
.. seealso::
|
||||
- `Example: A field inheriting another
|
||||
<{GITHUB_PATH}/addons/account/static/src/components/account_type_selection>`_
|
||||
- :ref:`Documentation on xpath <reference/views/inheritance>`
|
||||
- :ref:`Documentation on xpath <reference/view_records/inheritance>`
|
||||
|
||||
4. Message for some customers
|
||||
=============================
|
||||
|
||||
@ -259,7 +259,7 @@ Report Inheritance
|
||||
:align: center
|
||||
:alt: An inherited report
|
||||
|
||||
Inheritance in QWeb uses the same ``xpath`` elements as :ref:`views inheritance <reference/views/inheritance>`.
|
||||
Inheritance in QWeb uses the same ``xpath`` elements as :ref:`views inheritance <reference/view_records/inheritance>`.
|
||||
A QWeb template refers to its parent template in a different way though. It is even easier to do by just adding
|
||||
the ``inherit_id`` attribute to the ``template`` element and setting it equal to the *module.parent_template_id*.
|
||||
|
||||
|
||||
@ -535,7 +535,7 @@ characteristics:
|
||||
.. note::
|
||||
The rationale behind using QWeb instead of existing javascript template
|
||||
engines is the extensibility of pre-existing (third-party) templates, much
|
||||
like Odoo :ref:`views <reference/views>`.
|
||||
like Odoo :doc:`views <../reference/user_interface/view_records>`.
|
||||
|
||||
Most javascript template engines are text-based which precludes easy
|
||||
structural extensibility where an XML-based templating engine can be
|
||||
@ -1649,7 +1649,7 @@ Existing web components
|
||||
The Action Manager
|
||||
------------------
|
||||
|
||||
In Odoo, many operations start from an :ref:`action <reference/actions>`:
|
||||
In Odoo, many operations start from an :doc:`action <../reference/backend/actions>`:
|
||||
opening a menu item (to a view), printing a report, ...
|
||||
|
||||
Actions are pieces of data describing how a client should react to the
|
||||
@ -1664,7 +1664,7 @@ Using the Action Manager
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
The action manager can be invoked explicitly from javascript code by creating
|
||||
a dictionary describing :ref:`an action <reference/actions>` of the right
|
||||
a dictionary describing :doc:`an action <../reference/backend/actions>` of the right
|
||||
type, and calling an action manager instance with it.
|
||||
|
||||
:func:`~odoo.Widget.do_action` is a shortcut of :class:`~odoo.Widget`
|
||||
@ -1819,7 +1819,7 @@ multiple views depending on the original action's requirements:
|
||||
The Views
|
||||
~~~~~~~~~
|
||||
|
||||
Most :ref:`Odoo views <reference/views>` are implemented through a subclass
|
||||
Most :doc:`Odoo views <../reference/user_interface/view_records>` are implemented through a subclass
|
||||
of :class:`odoo.web.View` which provides a bit of generic basic structure
|
||||
for handling events and displaying model information.
|
||||
|
||||
|
||||
@ -622,7 +622,7 @@ and having opened a listing of teachers. From the listing it is possible to
|
||||
view.
|
||||
|
||||
If there is no definition of how to present records (a
|
||||
:ref:`view <reference/views>`) Odoo will automatically create a basic one
|
||||
:doc:`view <../reference/user_interface/view_records>`) Odoo will automatically create a basic one
|
||||
on-the-fly. In our case it works for the "list" view for now (only displays
|
||||
the teacher's name) but in the "form" view the HTML ``biography`` field is
|
||||
displayed side-by-side with the ``name`` field and not given enough space.
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/reference/backend/views') }}" class="stretched-link">
|
||||
<a href="{{ pathto('developer/reference/user_interface/view_records') }}" class="stretched-link">
|
||||
{{ _("Regular Views") }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
3
redirects/17.0.txt
Normal file
3
redirects/17.0.txt
Normal file
@ -0,0 +1,3 @@
|
||||
# developer/reference
|
||||
|
||||
developer/reference/backend/views.rst developer/reference/user_interface/view_records.rst
|
||||
Loading…
Reference in New Issue
Block a user