Javascript Referencia¶

Ez a dokumentum bemutatja az Odoo Javascript keretrendszert. Ez a keretrendszer nem egy nagy alkalmazás a kódsorok tekintetében, de meglehetősen általános, mivel alapvetően egy gép, amely egy deklaratív felületleírást élő alkalmazássá alakít, amely képes interakcióba lépni az adatbázis minden modelljével és rekordjával. Még az is lehetséges, hogy a web kliens segítségével módosítsuk a web kliens felületét.

Áttekintés¶

A Javascript keretrendszer három fő felhasználási esethez lett tervezve:

a web kliens: ez a privát webalkalmazás, ahol megtekinthetjük és szerkeszthetjük az üzleti adatokat. Ez egy egyoldalas alkalmazás (az oldal soha nem töltődik újra, csak az új adatokat kérdezi le a szerverről, amikor szükséges)
a weboldal: ez az Odoo nyilvános része. Lehetővé teszi egy azonosítatlan felhasználó számára, hogy böngésszen bizonyos tartalmakat, vásároljon vagy számos más műveletet hajtson végre, mint ügyfél. Ez egy klasszikus weboldal: különböző útvonalak vezérlőkkel és némi javascript, hogy működjön.
a értékesítési pont: ez az értékesítési pont felülete. Ez egy specializált egyoldalas alkalmazás.

Some javascript code is common to these three use cases, and is bundled together (see below in the assets section). This document will focus mostly on the architecture of the web client.

Web kliens¶

Egyoldalas alkalmazás¶

The web client is a single-page application: instead of requesting a full page from the server each time the user performs an action, it only loads what is needed to update the user interface (UI) as a result of that action. While doing this, it also takes care of updating information in the URL, so that, in most cases, refreshing the page or closing the browser and opening it again shows you the same thing.

A web kliens JS kódjának áttekintése¶

Here, we give a very quick overview of the web client code, in the web addon. The paths will be described relative to web/static/src. The following description is deliberately not exhaustive; the goal is only to give the reader a bird’s eye view of the architecture.

module_loader.js: this is the file that defines the Odoo javascript module system. It needs to be loaded before any other JS module.
core/: this folder contains code that forms the lowest level of the javascript framework and that can be used in the web client as well as the website, portal, and point of sale application.
weblient/: this folder contains files that are specific to the web client and cannot be used in the website or point of sale, such as the action manager and the action service.
webclient/webclient.js: this is the webclient component proper. It is mostly a wrapper for the action container and the navbar, and does a few things that are required upon starting the application, such as loading the state of the url.
webclient/actions/: this folder contains the code responsible for displaying and switching between actions.
views/: this folder contains the code for the view infrastructure, as well as most of the views (some types of views are added by other addons).
views/fields/: contains the definition of the various field components, as well as some utilities used by multiple fields.
search/ all these files define the search view (it is not a view in the point of view of the web client, only from the server point of view)

Mit tegyünk, ha egy fájl nem töltődik be/frissül¶

Számos különböző oka lehet annak, hogy egy fájl nem töltődik be megfelelően. Íme néhány dolog, amit megpróbálhat a probléma megoldására:

Make sure you saved your file; forgetting to do that happens to the best of us.
Take a look at the console (in the dev tools, usually opened with F12) and check for errors.
Try adding a console.log() at the beginning of your file so you can see if a file has been loaded or not. If it is not loaded, if may not be in the proper assets bundle, or the asset bundle may not be up to date.
Depending on your settings, the server may not regenerate the assets bundles after a file has been modified; there are a few options to solve this:
- restarting the server will force it to check if the asset bundle is up to date the next time it is requested
- in debug mode, there is an option in the debug menu ( button in the navbar) to force the server to regenerate the assets bundle on the fly without restarting.
- starting the server with the --dev=xml option will force the server to check if an asset bundle is up to date every time it is requested. We advise you to use this option when actively developing, but not in production.
Make sure you refresh your page after changing the code. Odoo currently does not have any hot module reloading mechanism.

Javascript kód betöltése¶

Large applications are usually broken up into smaller files, that need to be connected together. Some file may need to use code defined in another file. There are two ways of sharing code between files:

using the global scope (the window object) to read/write references to some objects or functions,
using a module system that will provide a way for each modules to export or import values, and will make sure that they are loaded in a proper order.

Bár lehetséges a globális hatókörben dolgozni, ennek számos problémája van:

It is difficult to ensure that implementation details are not exposed: function declarations in the global scope are accessible to all other code.
There is a single namespace, creating great potential for naming conflicts.
Dependencies are implicit: if a piece of code depends on another, the order in which they are loaded is important, but difficult to guarantee.

Using a module system helps resolve these issues: because modules specify their dependencies, the module system can load them in the proper order or emit an error if dependencies are missing or circular. Modules also form their own namespace, and can choose what to export, preventing exposure of implementation detail and naming collisions.

While we could use ECMAScript (ES) modules directly, there are a number of disadvantages to that approach: each ES module requires a network round trip, which becomes very slow when you have hundreds of files, and many files in Odoo need to be present despite not being imported by anything because they simply add code that the framework will use instead of the other way around.

Because of this, Odoo has a system of asset bundles. In these bundles, JavaScript files are ES modules with a special annotation at the top. These modules will be bundled together and transpiled to be usable by our module loader. While you can write code that doesn’t use this module system, it is generally not recommended.

(see Natív Javascript Modulok)

Patching classes¶

While we do our best to provide extension points that don’t require it, it is sometimes necessary to modify the behavior of an existing class in place. The goal is to have a mechanism to change a class and all future/present instances. This is done by using the patch utility function:

import { Hamster } from "@web/core/hamster"
import { patch } from "@web/core/utils/patch";

patch(Hamster.prototype, {
    sleep() {
        super.sleep(...arguments);
        console.log("zzzz");
    },
});

When patching methods, you need to patch the class» prototype, but if you would like to patch a static property of the class, you need to patch the class itself.

Patching is a dangerous operation and should be done with care as it will modify all instances of the class, even if they have already been created. To avoid weird issues, patches should be applied as soon as possible, at the top-level of your module. Patching classes at runtime can result in extremely difficult to debug issues if the class has already been instanciated.

Regiszterek¶

A common need in the Odoo ecosystem is to extend/change the behaviour of the base system from the outside (by installing an application, i.e. a different module). For example, one may need to add a new field widget in some views. In that case, and many others, the usual process is to create the desired component, then add it to a registry (registering step), to make the rest of the web client aware of its existence.

There are a few registries available in the system. The registries that are used by the framework are categories on the main registry, that can be imported from @web/core/registry

field registry

A mező nyilvántartás tartalmazza az összes mező widgetet, amelyet a web kliens ismer. Amikor egy nézetnek (általában űrlap vagy lista/kanban) szüksége van egy mező widgetre, itt fogja keresni. Egy tipikus használati eset így néz ki:

import { registry } from "@web/core/registry";
class PadField extends Component { ... }

registry.category("fields").add("pad", {
  component: PadField,
  supportedTypes: ["char"],
  // ...
});

nézet nyilvántartás

This registry contains all JS views known to the web client.

akció nyilvántartás

We keep track of all client actions in this registry. This is where the action manager looks up whenever it needs to create a client action. Client actions can be a function - the function will be called when the action is invoked, and the returned value will be executed as a follow up action if needed - or an Owl component that will be displayed when executing that action.

Szolgáltatások¶

Within the webclient, there are some concerns that cannot be handled by a single component, as the concern is transversal, involves many components, or needs to maintain some state for as long as the application is alive.

Services are a solution to these problems: they are created during application startup, are available to components through the hook useService, and stay alive for the entire lifetime of the application.

For example, we have the orm service whose job is to allow interacting with business objects on the server.

Here is a simplified example on how the orm service is implemented:

import { registry } from "@web/core/registry";
export const OrmService = {
    start() {
        return {
            read(...) { ... },
            write(...) { ... },
            unlink(...) { ... },
            ...
        }
    },
};
registry.category("services").add("orm", OrmService);

Using services¶

Services are available in the environment, but should generally be used through the useService hook, which prevents calling methods on the service after a component has been destroyed, and prevents further code from executing after a method call if the component was destroyed during the call.

class SomeComponent extends Component {
    setup() {
        this.orm = useService("orm");
    }
    // ...
    getActivityModelViewID(model) {
        return this.orm.call(model, "get_activity_view_id", this.params);
    }
}

Talking to the server¶

There are typically two use cases when working on Odoo: one may need to call a method on a (python) model (this goes through the controller /web/dataset/call_kw), or one may need to directly call a controller (available on some route).

Calling a method on a python model is done through the orm service:

return this.orm.call("some.model", "some_method", [some, args]);

Directly calling a controller is done through the rpc service:

return this.rpc("/some/route/", {
    some: param,
});

Megjegyzés

The rpc service doesn’t really perform what is generally understood as a remote procedure call (RPC), but for historical reasons, within Odoo we generally call any network request performed in JavaScript an RPC. As highlighted in the previous paragraph, if you want to call a method on a model, you should use the orm service.

Értesítések¶

The Odoo framework has a standard way to communicate various information to the user: notifications, which are displayed on the top right of the user interface. The types of notification follow the bootstrap toasts:

info: useful to display some informational feedback as a consequence of an action that cannot fail.
success: the user performed an action that can sometimes fail but didn’t.
warning: the user performed an action that could only be partially completed. Also useful if something is wrong but wasn’t caused by the user directly, or is not particularly actionable.
success: the user tried to performed an action but it couldn’t be completed.

Notifications can also be used to ask a question to the user without disturbing their workflow: e.g. a phone call received through VOIP: a sticky notification could be displayed with two buttons to Accept or Decline.

Displaying notifications¶

There are two ways to display notifications in Odoo:

The notification service allows component to display notifications from JS code by calling the add method.
The display_notification client action allows to trigger the display of a notification from python (e.g. in the method called when the user clicked on a button of type object). This client action uses the notification service.

Notifications have a few options:

title: string, opcionális. Ez a címként jelenik meg felül.
message: string, optional. The content of the notification. Can be a markup object to display formatted text.
sticky: boolean, opcionális (alapértelmezett false). Ha igaz, az értesítés addig marad, amíg a felhasználó el nem utasítja. Ellenkező esetben az értesítés automatikusan bezárul egy rövid késleltetés után.
type: string, optional (default „warning”). Determines the style of the notification. Possible values: „info”, „success”, „warning”, „danger”
className: string, optional. This is a css class name that will be automatically added to the notification. This could be useful for styling purpose, even though its use is discouraged.

Here are some examples on how to display notifications in JS:

// note that we call _t on the text to make sure it is properly translated.
this.notification.add({
    title: _t("Success"),
    message: _t("Your signature request has been sent.")
});
this.notification.add({
    title: _t("Error"),
    message: _t("Filter name is required."),
    type: "danger",
});

And in Python:

# note that we call _(string) on the text to make sure it is properly translated.
def show_notification(self):
    return {
        'type': 'ir.actions.client',
        'tag': 'display_notification',
        'params': {
            'title': _('Success'),
            'message': _('Your signature request has been sent.'),
            'sticky': False,
        }
    }

Rendszertálca¶

The Systray is the right part of the navbar in the interface, where the web client displays a few widgets, such as the messaging menu.

When the systray is created by the navbar, it will look for all registered systray items and display them.

There is currently no specific API for systray items. They are Owl components, and can communicate with their environment just like other components, e.g. by interacting with services.

Új Systray elem hozzáadása¶

Items can be added to the systray by adding them to the „systray” registry:

import { registry } from "@web/core/registry"
class MySystrayComponent extends Component {
    ...
}
registry.category("systray").add("MySystrayComponent", MySystrayComponent, { sequence: 1 });

The items are ordered in the systray according to their sequence in the systray registry.

Fordításkezelés¶

Some translations are made on the server side (basically all text strings rendered or processed by the server), but there are strings in the static files that need to be translated. The way it currently works is the following:

each translatable string is tagged with the special function _t
ezeket a szövegeket a szerver használja a megfelelő PO fájlok generálásához
amikor a web kliens betöltődik, meghívja a /web/webclient/translations útvonalat, amely visszaadja az összes fordítható kifejezés listáját
at runtime, whenever the function _t is called, it will look up in this list in order to find a translation, and return it or the original string if none is found.

Vegye figyelembe, hogy a fordítások részletesebben vannak kifejtve, a szerver nézőpontjából, a Modulok fordítása dokumentumban.

import { _t } from "@web/core/l10n/translation";

class SomeComponent extends Component {
    static exampleString = _t("this should be translated");
    ...
    someMethod() {
        const str = _t("some text");
    }
}

Note that using the translation function requires some care: the string given as an argument cannot be dynamic, as it is extracted statically from the code to generate the PO files and serves as the identifier for the term to translate. If you need to inject some dynamic content in the string, _t supports placeholders:

import { _t } from "@web/core/l10n/translation";
const str = _t("Hello %s, you have %s unread messages.", user.name, unreadCount);

Notice how the string itself is fixed. This allows the translation function to retrieve the translated string before using it for interpolation.

Munkamenet¶

The webclient needs some information from the python to function properly. To avoid an extra round-trip with the server by making a network request in JavaScript, this information is serialized directly in the page, and can be accessed in JS through the @web/session module.

Információ hozzáadása a munkamenethez¶

When the /web route is loaded, the server injects this information in a script tag. The information is obtained by calling the method session_info of the model ir.http. You can override this method to add information to the returned dictionary.

from odoo import models
from odoo.http import request

class IrHttp(models.AbstractModel):
    _inherit = 'ir.http'

    def session_info(self):
        result = super(IrHttp, self).session_info()
        result['some_key'] = get_some_value_from_db()
        return result

Most az érték JavaScript-ben olvasható a munkamenetből:

import { session } from "@web/session"
const myValue = session.some_key;
...

Note that this mechanism is designed to reduce the amount of communication needed by the web client to be ready. It is only appropriate for data which is cheap to compute (a slow session_info call will delay the loading for the web client for everyone), and for data which is required early in the initialization process.

Nézetek¶

The word „view” has more than one meaning. This section is about the design of the javascript code of the views, not the structure of the arch or anything else.

While views are just owl components, the built-in views generally have the same structure: a component called „SomethingController” which is the root of the view. This component creates an instance of some „model” (an object responsible for managing the data), and has a subcomponent called a „renderer” that handles the display logic.

Mezők¶

A web kliens élményének jelentős része az adatok szerkesztéséről és létrehozásáról szól. Ennek a munkának a nagy részét mező widgetek segítségével végzik, amelyek tisztában vannak a mező típusával és azzal, hogy egy értéket hogyan kell megjeleníteni és szerkeszteni.

Díszítések¶

A lista nézethez hasonlóan a mező widgetek is egyszerű támogatást nyújtanak a díszítésekhez. A díszítések célja, hogy egyszerű módot biztosítsanak a szöveg színének meghatározására a rekord aktuális állapotától függően. Például:

<field name="state" decoration-danger="amount &lt; 10000"/>

Az érvényes díszítésnevek a következők:

decoration-bf
decoration-it
decoration-danger
decoration-info
decoration-muted
decoration-primary
decoration-success
decoration-warning

Minden decoration-X dekoráció egy css osztályhoz lesz hozzárendelve text-X néven, amely egy szabványos bootstrap css osztály (kivéve a text-it és text-bf, amelyeket az odoo kezel, és amelyek az italic és bold formázásnak felelnek meg). Vegye figyelembe, hogy a decoration attribútum értékének érvényes python kifejezésnek kell lennie, amelyet a rekord értékelési kontextusában értékelnek ki.

Nem relációs mezők¶

Itt dokumentáljuk az összes alapértelmezés szerint elérhető nem relációs mezőt, különösebb sorrend nélkül.

Egész szám (integer)

Ez az alapértelmezett mezőtípus az integer típusú mezők esetében.

Támogatott mezőtípusok: integer

Opciók:

type: setting the input type ("text" by default, can be set on "number")
In edit mode, the field is rendered as an input with the HTML attribute type set on "number" (so user can benefit the native support, especially on mobile). In this case, the default formatting is disabled to avoid incompability.
<field name="int_value" options="{'type': 'number'}" />
step: állítsa be a lépést az érték növelésére és csökkentésére, amikor a felhasználó a gombokra kattint (csak szám típusú bemenet esetén, alapértelmezés szerint 1)
<field name="int_value" options="{'type': 'number', 'step': 100}" />
format: formázza-e a számot. (true alapértelmezés szerint)
Alapértelmezés szerint a számok a helyi paraméterek szerint vannak formázva. Ez az opció megakadályozza a mező értékének formázását.
<field name="int_value" options='{"format": false}' />

Lebegő (float)

Ez az alapértelmezett mezőtípus a float típusú mezők számára.

Támogatott mezőtípusok: float

Attribútumok:

digits: megjelenített pontosság

<field name="factor" digits="[42,5]" />

Opciók:

type: setting the input type ("text" by default, can be set on "number")
In edit mode, the field is rendered as an input with the HTML attribute type set on "number" (so user can benefit the native support, especially on mobile). In this case, the default formatting is disabled to avoid incompability.
<field name="int_value" options="{'type': 'number'}" />
step: állítsa be a lépést az érték növelésére és csökkentésére, amikor a felhasználó a gombokra kattint (csak szám típusú bemenet esetén, alapértelmezés szerint 1)
<field name="int_value" options="{'type': 'number', 'step': 0.1}" />
format: formázza-e a számot. (true alapértelmezés szerint)
Alapértelmezés szerint a számok a helyi paraméterek szerint vannak formázva. Ez az opció megakadályozza a mező értékének formázását.
<field name="int_value" options="{'format': false}" />

Idő (float_time)

Ennek a widgetnek a célja, hogy megfelelően jelenítse meg az időintervallumot (órákban) reprezentáló lebegőpontos értéket. Például a 0.5 0:30-ként, vagy a 4.75 4:45-ként kell formázódjon.

Támogatott mezőtípusok: float

Float Faktor (float_factor)

Ez a widget célja, hogy megfelelően jelenítse meg a lebegőpontos értéket, amelyet az opciókban megadott tényezővel konvertáltak. Tehát például az adatbázisban tárolt érték 0.5, és a tényező 3, akkor a widget értékét 1.5-ként kell formázni.

Támogatott mezőtípusok: float

Lebegőpontos kapcsoló (float_toggle)

Ennek a widgetnek a célja, hogy az input mezőt egy olyan gombbal helyettesítse, amely az opciókban megadott lehetséges értékek tartományát tartalmazza. Minden kattintás lehetővé teszi a felhasználó számára, hogy végigmenjen a tartományon. A cél itt az, hogy a mező értékét egy előre meghatározott választékra korlátozzuk. Továbbá, a widget támogatja a tényező konverziót, mint a float_factor widget (A tartomány értékeinek a konverzió eredményének kell lenniük).

Támogatott mezőtípusok: float

<field name="days_to_close" widget="float_toggle" options="{'factor': 2, 'range': [0, 4, 8]}" />

Logikai (boolean)

Ez az alapértelmezett mezőtípus a boolean típusú mezők esetében.

Támogatott mezőtípusok: boolean

Karakter (char)

Ez az alapértelmezett mezőtípus a char típusú mezők esetében.

Támogatott mezőtípusok: char

Dátum (date)

Ez az alapértelmezett mezőtípus a date típusú mezők számára. Egy szövegdobozból és egy dátumválasztóból áll.

Támogatott mezőtípusok: date

Opciók:

min_date / max_date: sets limit dates for accepted values. By default, the earliest accepted date is 1000-01-01 and the latest is 9999-12-31. Accepted values are SQL-formatted dates (yyyy-MM-dd HH:mm:ss) or "today".
<field name="datefield" options="{'min_date': 'today', 'max_date': '2023-12-31'}" />
warn_future: figyelmeztetést jelenít meg, ha az érték a jövőben van (a mai nap alapján).
<field name="datefield" options="{'warn_future': true}" />

Dátum és idő (datetime)

Ez az alapértelmezett mezőtípus a datetime típusú mezők számára. Az értékek mindig az ügyfél időzónájában vannak.

Támogatott mezőtípusok: datetime

Opciók:

lásd Date Field opciók
rounding: az időválasztóban elérhető percek generálásához használt növekmény. Ez nem befolyásolja a tényleges értéket, csak a kiválasztási legördülő menüben elérhető opciók számát (alapértelmezett: 5).
<field name="datetimefield" options="{'rounding': 10}" />
show_seconds: when set to false, it hides the seconds from the datetime field. The field will still accept datetime values, but the seconds will be hidden in the UI (default: true).
<field name="datetimefield" widget="datetime" options="{'show_seconds': false}" />
show_time: when set to false, it hides the time part from the datetime field. The field will still accept datetime values, but the time part will be hidden in the UI (default: true).
<field name="datetimefield" widget="datetime" options="{'show_time': false}" />

Dátumtartomány (daterange)

Ez a widget lehetővé teszi a felhasználó számára, hogy egyetlen választóból kezdő és befejező dátumot válasszon ki.

Támogatott mezőtípusok: date, datetime

Opciók:

lásd Date Field vagy Date & Time Field opciók
start_date_field: mező, amelyet a dátumtartomány kezdőértékének beállítására/lekérésére használnak (nem használható end_date_field-el együtt).
<field name="end_date" widget="daterange" options="{'start_date_field': 'start_date'}" />
end_date_field: mező, amelyet a dátumtartomány végértékének beállítására/lekérésére használnak (nem használható start_date_field-el együtt).
<field name="start_date" widget="daterange" options="{'end_date_field': 'end_date'}" />

Hátralévő napok (remaining_days)

Ez a widget dátum és dátum-idő mezőkön használható. Csak olvasható módban a mező értéke és a mai nap közötti különbséget (napokban) jeleníti meg. Szerkesztési módban a widget normál dátum vagy dátum-idő mezővé alakul.

Támogatott mezőtípusok: date, datetime

Pénznem (monetary)

Ez az alapértelmezett mezőtípus a monetary típusú mezőkhöz. Pénznem megjelenítésére szolgál. Ha van megadva pénznem mező az opciókban, azt használja, ellenkező esetben az alapértelmezett pénznemet használja (a munkamenetben).

Támogatott mezőtípusok: monetary, float

Opciók:

currency_field: egy másik mezőnév, amelynek egy many2one típusú pénznemnek kell lennie.
<field name="value" widget="monetary" options="{'currency_field': 'currency_id'}" />

Szöveg (text)

Ez az alapértelmezett mezőtípus a text típusú mezők számára.

Támogatott mezőtípusok: text

Fogantyú (handle)

Ennek a mezőnek az a feladata, hogy handle-ként jelenjen meg, és lehetővé teszi a különböző rekordok átrendezését húzással és ejtéssel.

Figyelem

Meg kell adni azt a mezőt, amely alapján a rekordok rendezve vannak.

Figyelem

Nem támogatott, ha ugyanazon a listán több mező is van fogantyú widgettel.

Támogatott mezőtípusok: integer

E-mail (email)

Ez a mező email címet jelenít meg. A fő oka annak, hogy használjuk, az, hogy olvasási módban megfelelő href attribútummal rendelkező horgonycímkeként van megjelenítve.

Támogatott mezőtípusok: char

Telefon (phone)

Ez a mező egy telefonszámot jelenít meg. A fő oka annak, hogy használjuk, az, hogy olvasási módban horgonylecímkével és megfelelő href-fel van megjelenítve, de csak bizonyos esetekben: csak akkor szeretnénk kattinthatóvá tenni, ha az eszköz képes hívni ezt a konkrét számot.

Támogatott mezőtípusok: char

URL (url)

Ez a mező egy URL-t jelenít meg (olvasási módban). A fő oka annak, hogy használjuk, az, hogy horgonylecímkével, megfelelő css osztályokkal és href-fel van megjelenítve.

Továbbá, a horgonylecímke szövege testreszabható a text attribútummal (ez nem változtatja meg a href értékét).

Támogatott mezőtípusok: char

<field name="foo" widget="url" text="Some URL" />

Opciók:

website_path: (default: false) by default, the widget forces (if not already the case) the href value to begin with "http://" except if this option is set to true, thus allowing redirections to the database’s own website.

Tartomány (domain)

A domain mező lehetővé teszi a felhasználó számára, hogy egy technikai előtagú domaint hozzon létre egy fa-szerű felület segítségével, és valós időben lássa a kiválasztott rekordokat. Hibakeresési módban egy bemenet is rendelkezésre áll, hogy közvetlenül be lehessen írni az előtag karakter domaint (vagy hogy olyan összetett domaineket építsenek, amelyeket a fa-szerű felület nem tesz lehetővé).

Vegye figyelembe, hogy ez csak statikus domainekre korlátozódik (nincsenek dinamikus kifejezések vagy hozzáférés a kontextus változókhoz).

Támogatott mezőtípusok: char

Opciók:

model: the name of the char field encoding the res_model on which the domain applies.

foldable (default: false): if true, the domain field is rendered compactly and unfolds itself upon user interaction.

in_dialog (default: false): if true, the widget opens a dialog when the user wants to edit the domain whereas by default, the domain editor is rendered just below the value.

Link gomb (link_button)

A LinkButton widget valójában egyszerűen egy span-t jelenít meg egy ikonnal és a szövegértékkel tartalomként. A link kattintható, és egy új böngészőablakot nyit meg az értékével mint URL.

Támogatott mezőtípusok: char

Képfájl (image)

This widget is used to represent a binary value as an image. In some cases, the server returns a bin_size instead of the real image (a bin_size is a string representing a file size, such as "6.5kb"). In that case, the widget will make an image with a source attribute corresponding to an image on the server.

Támogatott mezőtípusok: binary

Opciók:

preview_image: ha a kép csak bin_size formátumban van betöltve, akkor ez az opció hasznos lehet a web kliens tájékoztatására, hogy az alapértelmezett mezőnév nem az aktuális mező neve, hanem egy másik mező neve.
<field name="image" widget="image" options="{'preview_image': 'image_128'}" />
accepted_file_extensions: the file extension the user can pick from the file input dialog box (default value is "image/*")

(cf: accept attribute on <input type="file" />)

Bináris fájl (binary)

Általános widget bináris fájl mentéséhez/letöltéséhez.

Támogatott mezőtípusok: binary

Attribútumok:

filename: egy bináris fájl mentésekor elveszik a fájl neve, mivel csak a bináris értéket menti. A fájl neve egy másik mezőben menthető el. Ehhez egy filename attribútumot kell beállítani egy, a nézetben jelen lévő mezőre.
<field name="datas" filename="datas_fname" />

Opciók:

accepted_file_extensions: a fájlkiterjesztés, amelyet a felhasználó kiválaszthat a fájlbeviteli párbeszédablakban

(cf: accept attribute on <input type="file" />)

Prioritás (priority)

Ez a widget csillagok halmazaként jelenik meg, lehetővé téve a felhasználó számára, hogy rákattintva kiválasszon egy értéket vagy sem. Ez például hasznos lehet egy feladat magas prioritásúként való megjelölésére.

Vegye figyelembe, hogy ez a widget readonly módban is működik, ami szokatlan.

Támogatott mezőtípusok: selection

Kép csatolmány (attachment_image)

Kép widget many2one mezőkhöz. Ha a mező be van állítva, ez a widget képként jelenik meg a megfelelő src URL-lel. Ez a widget nem viselkedik másképp szerkesztési vagy csak olvasható módban, csak a kép megtekintésére hasznos.

Támogatott mezőtípusok: many2one

<field name="displayed_image_id" widget="attachment_image" />

Címke kiválasztás (label_selection)

Ez a widget egy egyszerű, nem szerkeszthető címkét jelenít meg. Ez csak információ megjelenítésére hasznos, nem szerkesztésre.

Támogatott mezőtípusok: selection

Opciók:

classes: egy leképezés a kiválasztási értéktől egy CSS osztálynévig

<field
    name="state"
    widget="label_selection"
    options="{
        'classes': {
            'draft': 'default',
            'cancel': 'default',
            'none': 'danger',
        },
    }"
/>

Állapot kiválasztás (state_selection)

Ez egy speciális kiválasztási widget. Feltételezi, hogy a rekordnak vannak előre meghatározott mezői, amelyek jelen vannak a nézetben: stage_id, legend_normal, legend_blocked, legend_done. Ez leginkább egy projekt feladatának állapotának megjelenítésére és megváltoztatására szolgál, további információkkal a legördülő menüben.

Támogatott mezőtípusok: selection

<field name="kanban_state" widget="state_selection" />

Állapot kiválasztás - Lista nézet (list.state_selection)

Lista nézetekben a state_selection mező alapértelmezés szerint a címkét jeleníti meg az ikon mellett.

Támogatott mezőtípusok: selection

Opciók:

hide_label: elrejti a címkét az ikon mellett

<field name="kanban_state" widget="state_selection" options="{'hide_label': true}" />

Kedvenc (boolean_favorite)

Ez a widget egy üres (vagy nem üres) csillagként jelenik meg, a logikai értéktől függően. Vegye figyelembe, hogy csak olvasható módban is szerkeszthető.

Támogatott mezőtípusok: boolean

Kapcsoló (boolean_toggle)

Egy kapcsoló gombot jelenít meg, amely egy logikai értéket képvisel. Ez a boolean mező egy almezője, amelyet leginkább a megjelenés megváltoztatására használnak.

Támogatott mezőtípusok: boolean

Statisztikai Információ (statinfo)

Ez a widget statisztikai információk megjelenítésére szolgál egy stat button-ban. Alapvetően csak egy címke egy számmal.

Támogatott mezőtípusok: integer, float

Opciók:

label_field: ha meg van adva, a widget a label_field értékét használja szövegként.

<button
    name="%(act_payslip_lines)d"
    icon="fa-money"
    type="action"
>
    <field
        name="payslip_count"
        widget="statinfo"
        string="Payslip"
        options="{'label_field': 'label_tasks'}"
    />
</button>

Százalékos Torta (percentpie)

Ez a widget statisztikai információk megjelenítésére szolgál egy stat button formájában. Hasonló a statinfo widgethez, de az információ kördiagram formájában van ábrázolva (üres-től teljesig). Vegye figyelembe, hogy az értéket százalékként értelmezik (egy szám 0 és 100 között).

Támogatott mezőtípusok: integer, float

<field name="replied_ratio" string="Replied" widget="percentpie" />

Haladásjelző sáv (progressbar)

Egy érték ábrázolása haladásjelző sávként (0-tól egy adott értékig)

Támogatott mezőtípusok: integer, float

Opciók:

editable: logikai érték, amely meghatározza, hogy a value szerkeszthető-e
current_value: az aktuális érték lekérése a nézetben jelen lévő mezőből
max_value: a maximális érték lekérése a nézetben jelen lévő mezőből
edit_max_value: logikai érték, amely meghatározza, hogy a max_value szerkeszthető-e
title: a sáv címe, amely a sáv tetején jelenik meg

-> nem fordítandó, használja a title attribútumot (nem opciót) helyette, ha a kifejezést le kell fordítani

<field
    name="absence_of_today"
    widget="progressbar"
    options="{
        'current_value': 'absence_of_today',
        'max_value': 'total_employee',
        'editable': false,
    }"
/>

Folyóirat irányítópult grafikon (dashboard_graph)

Ez egy speciálisabb widget, amely hasznos egy adathalmazt ábrázoló grafikon megjelenítésére. Például a könyvelési irányítópult kanban nézetében használják.

Feltételezi, hogy a mező egy adathalmaz JSON sorosítása.

Támogatott mezőtípusok: char

Attribútumok:

graph_type: string, can be either "line" or "bar"

<field name="dashboard_graph_data" widget="dashboard_graph" graph_type="line" />

Ace szerkesztő (ace)

Ez a widget szövegmezőkön való használatra készült. XML és Python szerkesztéséhez biztosítja az Ace Editort.

Támogatott mezőtípusok: char, text

Jelvény (badge)

Megjeleníti az értéket egy bootstrap jelvény tablettában.

Támogatott mezőtípusok: char, selection, many2one

Alapértelmezés szerint a jelvény világosszürke háttérrel rendelkezik, de testreszabható a Decoration mechanizmus használatával. Például, hogy egy adott feltétel alatt piros jelvényt jelenítsen meg:

<field name="foo" widget="badge" decoration-danger="state == 'cancel'" />

Relációs mezők¶

Kiválasztás (selection)

Támogatott mezőtípusok: selection

Attribútumok:
placeholder: egy karakterlánc, amelyet arra használnak, hogy információt jelenítsen meg, amikor nincs kiválasztott érték
<field name="tax_id" widget="selection" placeholder="Select a tax" />

Rádió (radio)

Ez a FielSelection egy almezője, de arra specializálódott, hogy az összes érvényes választási lehetőséget rádiógombokként jelenítse meg.

Vegye figyelembe, hogy ha many2one rekordokon használják, akkor több rpc-t hajtanak végre a kapcsolódó rekordok name_gets lekéréséhez.

Támogatott mezőtípusok: selection, many2one

Opciók:

horizontal: ha true, a rádiógombok vízszintesen jelennek meg.

<field name="recommended_activity_type_id" widget="radio" options="{'horizontal': true}"/>

Jelvény kiválasztás (selection_badge)

Ez a selection mező egy almezője, de arra specializálódott, hogy az összes érvényes választási lehetőséget téglalap alakú jelvényekként jelenítse meg.

Támogatott mezőtípusok: selection, many2one

<field name="recommended_activity_type_id" widget="selection_badge" />

Many2one (many2one)

Alapértelmezett widget a many2one mezőkhöz.

Támogatott mezőtípusok: many2one

Attribútumok:

can_create: engedélyezi a kapcsolódó rekordok létrehozását (elsőbbséget élvez a no_create opcióval szemben)
can_write: engedélyezi a kapcsolódó rekordok szerkesztését (alapértelmezett: true)

Opciók:

quick_create: engedélyezi a kapcsolódó rekordok gyors létrehozását (alapértelmezett: true)
no_create: prevent the creation of related records - hide both the Create „xxx” and Create and Edit dropdown menu items (default: false)
no_quick_create: prevent the quick creation of related records - hide the Create „xxx” dropdown menu item (default: false)
no_create_edit: elrejti a Létrehozás és szerkesztés legördülő menüpontot (alapértelmezett: false)
create_name_field: amikor egy kapcsolódó rekordot hozunk létre, ha ez az opció be van állítva, a create_name_field értéke az input értékével lesz kitöltve (alapértelmezett: name)
always_reload: logikai, alapértelmezett false. Ha true, a widget mindig végez egy további name_get hívást a név értékének lekérésére. Ez akkor használatos, ha a name_get metódus felül van írva (kérjük, ne tegye ezt)
no_open: logikai, alapértelmezett false. Ha true-ra van állítva, a many2one nem irányít át a rekordra, amikor rákattintanak (csak olvasható módban)

<field name="currency_id" options="{'no_create': true, 'no_open': true}" />

Many2one vonalkód (many2one_barcode)

A many2one mezők widgetje lehetővé teszi a kamera megnyitását mobil eszközről (Android/iOS) vonalkód beolvasásához.

A many2one mező specializációja, ahol a felhasználó a natív kamerát használhatja vonalkód beolvasására. Ezután a name_search segítségével keresi meg ezt az értéket.

Ha ez a widget be van állítva, és a felhasználó nem használja a mobilalkalmazást, akkor visszaáll a szokásos many2one (Many2OneField) mezőre.

Támogatott mezőtípusok: many2one

Many2one Avatar (many2one_avatar)

Ez a widget csak olyan many2one mezőkön támogatott, amelyek egy image.mixin-ből származó modellre mutatnak. Csak olvasható módban a kapcsolódó rekord képét jeleníti meg a display_name mellett. Vegye figyelembe, hogy ebben az esetben a display_name nem kattintható link. Szerkesztéskor pontosan úgy viselkedik, mint a szokásos many2one.

Támogatott mezőtípusok: many2one

Many2one Avatar Felhasználó (many2one_avatar_user)

Ez a widget a Many2OneAvatar specializációja. Amikor az avatarra kattintunk, megnyitunk egy csevegőablakot a megfelelő felhasználóval. Ez a widget csak olyan many2one mezőkön állítható be, amelyek a res.users modellre mutatnak.

Támogatott mezőtípusok: many2one (a res.users-re mutat)

Many2one Avatar Alkalmazott (many2one_avatar_employee)

Ugyanaz, mint a many2one_avatar_user, de many2one mezők esetén, amelyek a hr.employee-re mutatnak.

Támogatott mezőtípusok: many2one (a hr.employee-re mutat)

Many2many (many2many)

Alapértelmezett widget a many2many mezőkhöz.

Támogatott mezőtípusok: many2many

Attribútumok:

mode: string, az alapértelmezett nézet megjelenítéséhez
domain: az adatok korlátozása egy adott tartományra

Opciók:

create_text: lehetővé teszi a szöveg testreszabását, amely új rekord hozzáadásakor jelenik meg
link: tartomány, amely meghatározza, hogy a rekordok hozzáadhatók-e a kapcsolathoz (alapértelmezett: true).
unlink: tartomány, amely meghatározza, hogy a rekordok eltávolíthatók-e a kapcsolatról (alapértelmezett: true).

Many2many Bináris Fájl (many2many_binary)

Ez a widget segíti a felhasználót egy vagy több fájl egyidejű feltöltésében vagy törlésében.

Vegye figyelembe, hogy ez a widget kifejezetten az ir.attachment modellhez készült.

Támogatott mezőtípusok: many2many

Opciók:

accepted_file_extensions: a fájlkiterjesztés, amelyet a felhasználó kiválaszthat a fájlbeviteli párbeszédablakban

(cf: accept attribute on <input type="file" />)

Many2many címkék (many2many_tags)

Egy many2many mező megjelenítése címkék listájaként.

Támogatott mezőtípusok: many2many

Opciók:

create: domain, amely meghatározza, hogy létrehozhatók-e új címkék (alapértelmezett: true).

<field name="category_id" widget="many2many_tags" options="{'create': [['some_other_field', '>', 24]]}" />

color_field: egy numerikus mező neve, amelynek jelen kell lennie a nézetben. Egy szín kerül kiválasztásra az értékétől függően.
<field name="category_id" widget="many2many_tags" options="{'color_field': 'color'}" />
no_edit_color: true értékre állítva eltávolítja a címkék színének megváltoztatásának lehetőségét (alapértelmezett: false).
<field name="category_id" widget="many2many_tags" options="{'color_field': 'color', 'no_edit_color': true}" />
edit_tags: set to true to add the possibility to update tag related record by clicking on the tags. (default: false).
<field name="category_id" widget="many2many_tags" options="{'edit_tags': true}" />

Many2many címkék - Űrlap nézet (form.many2many_tags)

A many2many_tags widget specializációja űrlap nézetekhez. Tartalmaz extra kódot a címke színének szerkesztéséhez.

Támogatott mezőtípusok: many2many

Many2many címkék - Kanban nézet (kanban.many2many_tags)

A many2many_tags widget specializációja kanban nézetekhez.

Támogatott mezőtípusok: many2many

Many2many jelölőnégyzetek (many2many_checkboxes)

Ez a mező egy jelölőnégyzetek listáját jeleníti meg, és lehetővé teszi a felhasználó számára, hogy kiválasszon egy részhalmazt a lehetőségekből. Vegye figyelembe, hogy a megjelenített értékek száma 100-ra van korlátozva. Ez a korlát nem testreszabható. Egyszerűen lehetővé teszi az extrém esetek kezelését, amikor ez a widget helytelenül van beállítva egy mezőn, amelynek hatalmas comodelje van. Ilyen esetekben egy lista nézet megfelelőbb, mivel lehetővé teszi a lapozást és a szűrést.

Támogatott mezőtípusok: many2many

One2many (one2many)

Alapértelmezett widget az one2many mezőkhöz. Általában egy al-lista nézetben vagy egy al-kanban nézetben jeleníti meg az adatokat.

Támogatott mezőtípusok: one2many

Opciók:

create: domain, amely meghatározza, hogy létrehozhatók-e kapcsolódó rekordok (alapértelmezett: true).
delete: domain, amely meghatározza, hogy törölhetők-e kapcsolódó rekordok (alapértelmezett: true).
<field name="turtles" options="{'create': [['some_other_field', '>', 24]]}" />
create_text: egy sztring, amelyet az «Add» címke/szöveg testreszabására használnak.
<field name="turtles" options="{'create_text': 'Add turtle'}" />

Állapot sáv (statusbar)

Ez egy mező, amely kifejezetten az űrlap nézetekhez tartozik. Ez a sáv sok űrlap tetején, amely egy folyamatot képvisel, és lehetővé teszi egy adott állapot kiválasztását.

Támogatott mezőtípusok: selection, many2one

Referencia (reference)

A reference mező egy select (a modellhez) és egy many2one mező (az értékéhez) kombinációja. Lehetővé teszi egy rekord kiválasztását egy tetszőleges modellen.

Támogatott mezőtípusok: char, reference

Opciók:

model_field: egy ir.model neve, amely tartalmazza a kiválasztható rekordok modelljét. Ha ez az opció be van állítva, a reference mező select része nem jelenik meg.

Widgetek¶

Ribbon (web_ribbon)

This widget displays a ribbon at the top right corner of the kanban card or the form view sheet, for instance, to indicate archived records.

<widget name="web_ribbon" title="Archived" bg_color="text-bg-danger"/>

Attribútumok:

title: text displayed in the ribbon.
tooltip: text displayed in the ribbon’s tooltip.
bg-class: classname to set on the ribbon, typically to define the ribbon’s color.

Hét napjai (week_days)

Ez a widget jelölőnégyzetek listáját jeleníti meg a hét napjaihoz, minden naphoz 1 jelölőnégyzetet, és lehetővé teszi a felhasználó számára, hogy kiválasszon egy részhalmazt a lehetőségek közül.

<widget name="week_days" />

Kliens műveletek¶

A client action is a component that can be displayed as the main element in the webclient, occupying all the space below the navbar, just like an act_window_action. This is useful when you need a component that is not closely linked to an existing view or a specific model. For example, the Discuss application is a client action.

A kliens művelet egy kifejezés, amelynek különböző jelentései vannak, a kontextustól függően:

a szerver szempontjából ez egy ir_action modell rekordja, egy tag mezővel, amely char típusú
from the perspective of the web client, it is an Owl component registered in the action registry under the same key its tag

Whenever a menu item is associated with a client action, opening it will simply fetch the action definition from the server, then lookup its tag in the action registry to get the component definition. This component will then be rendered by the action container.

Kliens akció hozzáadása¶

A client action is a component that will control the part of the screen below the navbar. Defining a client action is as simple as creating an Owl component and adding it to the action registry.

import { registry } from "@web/core/registry";
class MyClientAction extends Component { ... }
registry.category("actions").add("my-custom-action", ClientAction);

Ezután, hogy a kliens akciót használhassuk a web kliensben, létre kell hoznunk egy kliens akció rekordot (az ir.actions.client modell egy rekordját) a megfelelő tag attribútummal:

<record id="my_client_action" model="ir.actions.client">
    <field name="name">Some Name</field>
    <field name="tag">my-custom-action</field>
</record>