Javascriptリファレンス

このドキュメントは、Odoo Javascriptフレームワークを提供しています。 このフレームワークは、コードの行では大きなアプリケーションではありませんが、非常に一般的です。 宣言的なインターフェイス記述をライブアプリケーションに変える機械だからです データベース内のすべてのモデルやレコードとやり取りすることができます Web クライアントを使用して、Web クライアントのインターフェイスを変更することも可能です。

概要

Javascriptフレームワークは、主に以下の3つのユースケースで動作するように設計されています。

  • ウェブクライアント:これはプライベートWebアプリケーションで、ビジネスデータを表示および編集することができます。 これは単一のページアプリケーションです (ページは再読み込みされることはありません、必要なときには新しいデータだけがサーバーから取得されます)

  • ウェブサイト:これはOdooの公開部分です。 これにより、未確認のユーザーは、いくつかのコンテンツを参照したり、買い物をしたり、クライアントとして多くのアクションを実行したりすることができます。 これは古典的なウェブサイトです。コントローラーといくつかのJavaScriptを使用して動作するさまざまなルートです。

  • 販売ポイント:これは販売時点のインターフェイスです。それは専門的なシングルページアプリケーションです。

一部の javascript コードは、これらの 3 つのユースケースに共通しており、まとめられています (アセットセクションを参照してください)。 このドキュメントは主にWebクライアントのアーキテクチャに焦点を当てます。

Web client

シングルページアプリケーション

Web クライアントは単一ページのアプリケーションです: ユーザーがアクションを実行するたびにサーバーからフルページを要求する代わりに。 そのアクションの結果として、ユーザー インターフェイス (UI) を更新するために必要なものだけをロードします。 これを行っている間、ほとんどの場合、URL内の情報を更新することも行います。 ページを更新するか、ブラウザを閉じて再度開くと同じことがわかります。

Web クライアント JS コードの概要

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: これは、Odoo javascriptモジュールシステムを定義するファイルです。他のJSモジュールよりも前にロードする必要があります。

  • core/: このフォルダには、javascriptフレームワークの最低レベルを形成するコードが含まれており、ウェブクライアントとウェブサイトで使用することができます。 ポータルと販売時点のアプリケーション。

  • weblient/: このフォルダにはウェブクライアント固有のファイルが含まれており、ウェブサイトや販売時点では使用できません。 アクションマネージャーやアクションサービスなどです

  • webclient/webclient.js: これはwebclientコンポーネントのプロパティです。 これは主にアクションコンテナとナビバーのラッパーです アプリケーションを起動する際に必要ないくつかのことを行います 例えば url の状態をロードするなどです

  • webclient/actions/: このフォルダには、アクションの表示と切り替えを担当するコードが含まれています。

  • views/: このフォルダにはビューインフラストラクチャのコードが含まれています ビューのほとんどと同様に (いくつかの種類のビューは他のアドオンによって追加されます)。

  • views/fields/: 様々なフィールドコンポーネントの定義と、複数のフィールドで使用されているユーティリティが含まれています。

  • search/ これらすべてのファイルが検索ビューを定義します（Webクライアントのビューのビューではありません） サーバーの観点からのみ)

ファイルが読み込まれない／更新されない場合の対処法

ファイルが正しく読み込まれない理由はさまざまです。ここでは、その問題を解決するために試せることをいくつかご紹介します。

  • あなたがあなたのファイルを保存したことを確認してください。それを行うことを忘れることは私たちの最善に起こります。

  • コンソール(開発ツールでは通常F12で開かれています)を見て、エラーを確認してください。

  • ファイルの先頭に console.log() を追加して、ファイルがロードされたかどうかを確認します。 ロードされていない場合は、適切な資産バンドルにない場合、または資産バンドルが最新でない場合があります。

  • 設定によっては、ファイルが変更された後に、サーバーが資産バンドルを再生成しないことがあります。 これを解決する方法はいくつかあります

    • サーバーを再起動すると、次回リクエスト時にアセットバンドルが最新であるかどうかを強制的に確認します

    • デバッグモードで デバッグメニュー(navbarの:icon:`fa-bug`ボタン)には、再起動せずにサーバーにアセットバンドルを強制的に生成させるオプションがあります。

    • --dev=xml オプションでサーバーを起動すると、要求されるたびにアセットバンドルが最新であるかどうかをサーバーに強制的に確認します。 私たちは、積極的に開発する場合は、このオプションを使用することをお勧めしますが、本番環境では使用しません。

  • コードを変更した後、ページを更新してください。Odooには現在ホットモジュールリロードメカニズムがありません。

Javascriptコードを読み込み中

大規模なアプリケーションは通常、一緒に接続する必要がある小さなファイルに分割されます。 ファイルによっては、別のファイルで定義されたコードを使用する必要があります。ファイル間でコードを共有するには、2つの方法があります:

  • グローバルスコープ（window オブジェクト）を使用して、一部のオブジェクトや関数への参照を読み書きします。

  • 各モジュールが値をエクスポートまたはインポートする方法を提供するモジュールシステムを使用します 適切な順序で装填されていることを確認します

グローバルスコープで動作することは可能ですが、これにはいくつかの問題があります。

  • 実装の詳細が公開されていないことを確認することは困難です。グローバルスコープ内の関数宣言は他のすべてのコードにアクセス可能です。

  • 単一の名前空間があり、名前の衝突に大きな可能性があります。

  • 依存関係は暗黙的である:コードの一部が別のものに依存する場合、それらがロードされる順序は重要であるが、保証することは困難である。

モジュールシステムを使用すると、以下の問題を解決できます: モジュールが依存関係を指定するため。 モジュールシステムは適切な順序でそれらをロードしたり、依存関係がない場合や循環している場合にエラーを発生させることができます。 モジュールは独自の名前空間を形成し、エクスポートするものを選択でき、実装の詳細や命名衝突の暴露を防ぐことができます。

ECMAScript (ES) モジュールを直接使用することはできますが、そのアプローチにはいくつかの欠点があります。各ES モジュールにはネットワークの往復が必要です。 何百ものファイルがあればとても遅くなります Odooの多くのファイルは、何もインポートされていないにもかかわらず存在する必要があります。なぜなら、フレームワークが他の方法で使用するコードを単に追加するからです。

このため、Odooにはアセットバンドルのシステムがあります。 これらのバンドルでは、JavaScriptファイルは上部に特別なアノテーションが付いたESモジュールです。 これらのモジュールは一緒にバンドルされ、当社のモジュールローダーで使用できるようにトランスパイルされます。 このモジュールシステムを使用しないコードを書くことはできますが、一般的には推奨されません。

( :ref:`frontend/modules/native_js`を参照)

クラスにパッチを適用しています

私たちはそれを必要としない拡張ポイントを提供するために最善を尽くします。 既存のクラスの動作を*場所*に変更する必要がある場合があります。 目標は、クラスとすべての将来/現在のインスタンスを変更するメカニズムを持つことです。これは patch ユーティリティ関数を使用して行います。

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

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

メソッドにパッチを適用する場合、クラスのプロトタイプにパッチを適用する必要があります。 クラスの静的なプロパティにパッチを適用したい場合は、クラス自体にパッチを適用する必要があります。

パッチ適用は危険な操作であり、クラスのすべてのインスタンスを変更するため、注意を払って行う必要があります。 たとえ既に作られたとしてもです 奇妙な問題を避けるためには、モジュールの最上位レベルでパッチをできるだけ早く適用する必要があります。 実行時にクラスにパッチを適用すると、クラスがすでにインスタンス化されている場合、問題のデバッグが非常に困難になります。

Registries

Odooエコシステムの一般的な必要性は、基本システムの動作を外部から拡張/変更することです(アプリケーションをインストールすることによって)。 をクリックします。別のモジュールです。たとえば、ビューに新しいフィールドウィジェットを追加する必要があります。 その場合、他の多くの場合、通常のプロセスは、所望のコンポーネントを作成することです。 それをレジストリ(登録ステップ)に追加し、ウェブクライアントの残りの部分をその存在を認識させます。

システムにはいくつかのレジストリがあります。 フレームワークで使用されるレジストリはメインレジストリのカテゴリで、:js:data:`@web/core/registry`からインポートできます。

フィールドレジストリ

フィールド レジストリには、Web クライアントに知られているすべてのフィールド ウィジェットが含まれます。 ビュー（通常はフォームまたはリスト/カンバン）がフィールドウィジェットを必要とするたびに、このようになります。典型的なユースケースは次のようになります。

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

registry.category("fields").add("pad", {
  component: PadField,
  supportedTypes: ["char"],
  // ...
});
レジストリを表示

このレジストリには、Web クライアントに知られているすべての JS ビューが含まれています。

アクションレジストリ

このレジストリ内のすべてのクライアントアクションを追跡します。 これは、クライアントアクションを作成する必要があるたびにアクションマネージャが参照する場所です。 クライアントアクションは関数にすることができます - アクションが呼び出されたときに関数が呼び出されます そして返された値は、必要に応じてフォローアップアクションとして実行されます。つまり、そのアクションを実行するときに表示される Owl コンポーネントです。

サービス

webclient内には、単一のコンポーネントでは扱えないいくつかの懸念があります。 多くのコンポーネントが関与するか、アプリケーションが生きている限り、ある状態を維持する必要があります。

サービスは、アプリケーションの起動時に作成される、これらの問題の解決策です。 はフックの useService を介してコンポーネントが利用でき、アプリケーションの寿命全体を生き続けます。

例えば、サーバー上のビジネス オブジェクトとのやり取りを可能にする orm サービスがあります。

Orm サービスの実装方法を簡単に説明します。

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

サービスの使用

サービスは環境内で利用できますが、一般的には useService フックを介して使用する必要があります。 コンポーネントが破壊された後にサービスのメソッドを呼び出すのを防ぎます コンポーネントが呼び出し中に破壊された場合、メソッド呼び出し後にさらにコードが実行されないようにします。

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

サーバーと通話中

Odoo で作業する場合は、通常、2 つのユースケースがあります。1 つは (python) モデルでメソッドを呼び出す必要があるかもしれません (これはコントローラ `/web/dataset/call_kw`を通過します)。 または、直接コントローラを呼び出す必要がある場合があります (いくつかのルートで利用可能)。

  • Pythonモデルでメソッドを呼び出すことは、ormサービスを通して行われます。

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

  • コントローラを直接呼び出すことは、rpc サービスを介して行われます。

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

注釈

rpcサービスは、一般的にリモートプロシージャコール(RPC)として理解されているものを実際に実行しません。 しかし、歴史的な理由から、私たちは一般的にJavaScriptで実行されるネットワーク要求をRPCと呼んでいます。 前の段落でハイライトされているように、モデルでメソッドを呼び出したい場合は、ormサービスを使用する必要があります。

通知

Odooフレームワークには、ユーザーにさまざまな情報を伝えるための標準的な方法があります。 画面の右上に表示されます 通知の種類は、ブートストラップのトーストに従います。

  • info: 失敗しないアクションの結果として、いくつかの情報フィードバックを表示するのに便利です。

  • success: ユーザーは失敗することがありますが、そうではないアクションを実行しました。

  • 警告: ユーザーは部分的にしか完了できないアクションを実行しました。 何かが間違っているが、直接ユーザーによって引き起こされなかった、または特に実用的でない場合にも便利です。

  • success: ユーザーがアクションを実行しようとしましたが、完了できませんでした。

通知は、ワークフローを妨げることなくユーザーに質問するためにも使用できます。 VOIP を介して受信した電話: 付箋通知を表示することができます 2 つのボタンで 受け入れる または 拒否 。

通知の表示

Odoo で通知を表示するには 2 つの方法があります。

  • notification サービスは、コンポーネントが add メソッドを呼び出して、JS コードからの通知を表示することを可能にします。

  • display_notification クライアントアクションはPythonからの通知の表示をトリガーすることを許可します (例: は、ユーザーがオブジェクトのボタンをクリックしたときに呼び出されるメソッドです。このクライアントアクションは通知サービスを使用します。

通知にはいくつかの*オプション*があります。

  • title: string, optional. これはタイトルとして上に表示されます。

  • message: string, optional. The content of the notification. can be a markup object to display formatted text.

  • sticky: boolean, optional (default false). trueの場合、ユーザーが削除するまで通知は保持されます。 そうでなければ、短い遅延の後に通知は自動的に閉じられます。

  • type: string, optional (default "warning"). 通知のスタイルを指定します。 可能な値: "info", "success", "warning", "dang"

  • className: string, optional. This is a css class name that will be automatically added to the notification. これは、使用をお勧めしませんが、スタイリングの目的に役立ちます。

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",
});

そして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,
        }
    }

Systray

Systray はインターフェイスのナビゲーションバーの右側にあり、メッセージングメニューなどのいくつかのウィジェットがウェブクライアントに表示されます。

sysstray が navbar によって作成されると、登録されている systray アイテムをすべて探し、それらを表示します。

現在、systraay 項目に特定の API はありません。 彼らはフクロウのコンポーネントであり、サービスとのやり取りなど、他のコンポーネントと同じように環境と通信することができます。

新しいSystrayアイテムを追加する

アイテムは "systray" レジストリに追加することで追加できます:

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

アイテムは systraay レジストリ内のシーケンスに従って順序付けされます。

翻訳管理

いくつかの翻訳はサーバー側で行われます (基本的にはサーバーによってレンダリングまたは処理されたすべてのテキスト文字列)。 静的ファイルには翻訳が必要な文字列が入っています 現在の動作方法は次のとおりです。

  • 各翻訳可能な文字列は特殊関数 _t でタグ付けされます

  • これらの文字列は、適切な PO ファイルを生成するためにサーバーによって使用されます

  • Webクライアントがロードされるたびに、ルート*/web/webclient/translations*を呼び出し、すべての翻訳可能な用語のリストを返します

  • 実行時に、関数 _t が呼ばれると、翻訳を見つけるためにこのリストで検索されます。 見つからない場合は元の文字列を返します。

翻訳は、サーバーの観点から、ドキュメント モジュールの翻訳 で詳細に説明されていることに注意してください。

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

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

翻訳関数を使用するには注意が必要です。引数として与えられた文字列は動的ではありません。 コードから静的に抽出され、PO ファイルを生成し、翻訳用語の識別子として機能します。 文字列に動的なコンテンツを挿入する必要がある場合、`_t`はプレースホルダをサポートします。

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

文字列自体が固定されていることに注意してください。これにより、翻訳関数は補間のために翻訳された文字列を*前*に取得することができます。

セッション

webclient は python から正しく機能するためにいくつかの情報を必要とします。 JavaScriptでネットワーク要求を行うことによって、サーバーとの余分な往復を避けるために。 この情報はページ内で直接シリアル化され、@web/session モジュールを介して JS でアクセスできます。

セッションに情報を追加する

/web`ルートがロードされると、サーバーはこの情報をスクリプトタグに挿入します。 情報はモデル `ir.http の session_info メソッドを呼び出すことで取得します。このメソッドをオーバーライドして、返された辞書に情報を追加できます。

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

これで、セッションで読み込むことで javascript で値を取得できます。

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

このメカニズムは、ウェブクライアントが準備するために必要な通信量を減らすように設計されていることに注意してください。 計算が安いデータにのみ適しています (session_info の呼び出しが遅い場合、すべての人にとってのウェブクライアントの読み込みを遅らせます)。 初期化の過程で必要とされるデータについてです

ビュー

"view"という言葉には複数の意味があります。 このセクションでは、ビューの javascript コードのデザインについて説明します。arch または他のものの構造についてではありません。

ビューはフクロウコンポーネントに過ぎませんが、組み込みビューは一般的に同じ構造になっています。ビューのルートである「SomethingController」というコンポーネントです。 このコンポーネントは、いくつかの「モデル」のインスタンスを作成します (データの管理を担当するオブジェクト)。 表示ロジックを扱う「レンダラー」というサブコンポーネントがあります。

フィールド

ウェブクライアントの経験の良い部分は、データの編集と作成です。 その作業のほとんどはフィールドウィジェットの助けを借りて行われます。 フィールドタイプと値の表示方法や編集方法に関する具体的な詳細を認識しています

装飾

リストビューと同様に、フィールドウィジェットは装飾のシンプルなサポートを提供します。 装飾の目的は、レコードの現在の状態に応じてテキスト色を指定する簡単な方法を持つことです。例えば:

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

有効な装飾名は次のとおりです。

  • decoration-bf

  • decoration-it

  • decoration-dang

  • decoration-info

  • decoration-muted

  • decoration-primary

  • decoration-success

  • decoration-warning

各デコレーション decoration-X は CSS クラス text-X にマッピングされます。これは標準的なブートストラップ CSS クラスです(text-it と text-bf を除く)。 それぞれodoによって処理され、イタリック体と太字に相当する）。 decoration 属性の値は、レコードを評価コンテキストとして評価される有効な python 式でなければならないことに注意してください。

非リレーションフィールド

非リレーショナルフィールドはすべてデフォルトで使用可能な順序で、ここでは特定の順序で文書化します。

整数 (integer)

これは integer 型のフィールドのデフォルトのフィールドタイプです。

  • サポートされているフィールドタイプ: integer

オプション:

  • type: 入力型を設定します ("text"`はデフォルトでは"number"`に設定できます)

    編集モードでは、フィールドは入力としてレンダリングされ、"number" に HTML 属性タイプが設定されています(ユーザーはネイティブのサポートに利益をもたらすことができます)。 特に携帯電話では この場合、デフォルトの書式設定は無効になっており、非互換性を回避します。

    <field name="int_value" options="{'type': 'number'}" />

  • step: ユーザーがボタンをクリックしたときに、ステップを値に設定します（デフォルトでは 1 型番号の入力のみ）

    <field name="int_value" options="{'type': 'number', 'step': 100}" />

  • format: 数値を書式設定する必要があります。(true はデフォルト)

    デフォルトでは、数値はロケールパラメータに従ってフォーマットされます。このオプションは、フィールドの値がフォーマットされないようにします。

    <field name="int_value" options='{"format": false}' />
Float (float)

これは float 型のフィールドのデフォルトのフィールドタイプです。

  • サポートされているフィールドタイプ: float

属性:

  • digits: 表示される精度

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

オプション:

  • type: 入力型を設定します ("text"`はデフォルトでは"number"`に設定できます)

    編集モードでは、フィールドは入力としてレンダリングされ、"number" に HTML 属性タイプが設定されています(ユーザーはネイティブのサポートに利益をもたらすことができます)。 特に携帯電話では この場合、デフォルトの書式設定は無効になっており、非互換性を回避します。

    <field name="int_value" options="{'type': 'number'}" />

  • step: ユーザーがボタンをクリックしたときに、ステップを値に設定します（デフォルトでは 1 型番号の入力のみ）

    <field name="int_value" options="{'type': 'number', 'step': 0.1}" />

  • format: 数値を書式設定する必要があります。(true はデフォルト)

    デフォルトでは、数値はロケールパラメータに従ってフォーマットされます。このオプションは、フィールドの値がフォーマットされないようにします。

    <field name="int_value" options="{'format': false}" />
時間 (float_time)

このウィジェットの目的は、時間間隔 (時間) を表す float 値を適切に表示することです。 例えば、0.5`は`0:30、もしくは`4.75`は`4:45`に対応しています。

  • サポートされているフィールドタイプ: float

Float Factor (float_factor)

このウィジェットは、オプションで指定された要素を使用して変換されたフロート値を適切に表示することを目的としています。 例えば、データベースに保存されている値は 0.5 で、係数は 3 で、ウィジェットの値は 1.5 で書式設定する必要があります。

  • サポートされているフィールドタイプ: float

Float Toggle (float_toggle)

このウィジェットの目的は、入力フィールドを(オプションで指定されている)可能な値の範囲を含むボタンで置き換えることです。 クリックごとに、ユーザーは範囲内でループできます。 ここでの目的は、フィールドの値をあらかじめ定義された選択範囲に制限することです。 また、ウィジェットは float_factor ウィジェットとして係数の変換をサポートします (範囲の値は変換の結果である必要があります)。

  • サポートされているフィールドタイプ: float

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

これは boolean 型のフィールドのデフォルトのフィールドタイプです。

  • サポートされているフィールドタイプ: boolean

文字 (char)

これは char 型のフィールドのデフォルトのフィールドタイプです。

  • サポートされているフィールドの種類: char

日付 (date)

これは date 型のフィールドのデフォルトのフィールドタイプです。テキストボックスと日付ピッカーで構成されています。

  • サポートされているフィールドタイプ: date

オプション:

  • min_date / max_date: 受け入れられた値の制限日を設定します。デフォルトでは、最も古い日付は 1000-01-01 で、最新は 9999-12-31 です。 受け入れられる値はSQLフォーマットの日付（yyyy-MM-dd HH:mm:ss）または`"today"`です。

    <field name="datefield" options="{'min_date': 'today', 'max_date': '2023-12-31'}" />

  • warn_future: 値が (今日に基づいて) 未来にある場合、警告が表示されます。

    <field name="datefield" options="{'warn_future': true}" />
Date & Time (datetime)

datetime 型のフィールドのデフォルトのフィールドタイプです。値は常にクライアントのタイムゾーンにあります。

  • サポートされているフィールドタイプ: datetime

オプション:

  • 日付フィールド オプションを参照してください

  • rounding: 時間ピッカーで利用可能な分を生成するために使用されるインクリメント。 これは実際の値には影響しません。select ドロップダウンで利用可能なオプションの量だけに影響します(デフォルトは 5)。

    <field name="datetimefield" options="{'rounding': 10}" />

  • show_seconds: false に設定すると、datetimeフィールドから秒を非表示にします。 フィールドは引き続きdatetime値を受け付けますが、秒はUIで非表示になります (デフォルト: true)。

    <field name="datetimefield" widget="datetime" options="{'show_seconds': false}" />

  • show_time: false に設定すると、時刻の部分が datetimeフィールドから非表示になります。 フィールドは引き続きdatetime値を受け付けますが、時間部分はUI内で非表示になります (デフォルト: true)。

    <field name="datetimefield" widget="datetime" options="{'show_time': false}" />
日付範囲 (daterange)

このウィジェットでは、ユーザーが単一のピッカーから開始日と終了日を選択できます。

  • サポートされているフィールドタイプ: date, datetime

オプション:

  • Date Field または Date & Time Field オプションを参照してください

  • start_date_field: 日付範囲の開始値を取得/設定するために使用されるフィールドです (`end_date_field`では使用できません)。

    <field name="end_date" widget="daterange" options="{'start_date_field': 'start_date'}" />

  • end_date_field: 日付範囲の終了値を取得/設定するために使用されるフィールドです (`start_date_field`では使用できません)。

    <field name="start_date" widget="daterange" options="{'end_date_field': 'end_date'}" />
残り日数 (remaining_days)

このウィジェットは、日付と日付のフィールドで使用できます。 読み取り専用では、フィールドの値と今日の値の間のデルタ(日数)を表示します。 ウィジェットは、編集モードで通常の日付または日付フィールドに変わります。

  • サポートされているフィールドタイプ: date, datetime

マネタリー(monetary)

これは、`monetary`型のフィールドのデフォルトのフィールドタイプです。通貨を表示するために使用されます。 オプションで指定された通貨フィールドがある場合、それを使用します。 そうでなければ、デフォルトの通貨に戻ります (セッション内で)

  • サポートされているフィールドタイプ: monetary, float

オプション:

  • currency_field: 通貨で many2one であるべき別のフィールド名。

    <field name="value" widget="monetary" options="{'currency_field': 'currency_id'}" />
テキスト (text)

これは text 型のフィールドのデフォルトのフィールドタイプです。

  • サポートされているフィールドの種類: text

Handle (handle)

このフィールドのジョブは handle として表示され、ドラッグアンドドロップで様々なレコードを並べ替えることができます。

警告

レコードがソートされるフィールドで指定する必要があります。

警告

同じリストにハンドルウィジェットを持つ複数のフィールドを持つことはサポートされていません。

  • サポートされているフィールドタイプ: integer

Eメール (email)

このフィールドにはメールアドレスが表示されます。 これを使用する主な理由は、readonly モードで href が適切なアンカータグとしてレンダリングされることです。

  • サポートされているフィールドの種類: char

電話番号 (phone)

電話番号が表示されます。 これを使用する主な理由は、それが適切な href を持つアンカータグとして読み取り専用モードでレンダリングされることです。 場合によってはこの番号を呼び出せるようにしたいのです

  • サポートされているフィールドの種類: char

URL (url)

このフィールドにはURLが表示されます(読み取り専用モード)。 これを使用する主な理由は、適切な css クラスと href を持つアンカータグとしてレンダリングされることです。

また、アンカータグのテキストは text 属性でカスタマイズできます(href 値は変更されません)。

  • サポートされているフィールドの種類: char

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

オプション:

  • website_path: (デフォルト: false) ウィジェットは href 値を "http://" で始まるようにします。ただし、このオプションが `true に設定されている場合を除きます。 データベースのウェブサイトへのリダイレクトが可能になります

Domain (domain)

domain フィールドを使用すると、ツリーのようなインターフェイスのおかげで、ユーザーは技術的にプレフィックスドメインを構築し、選択したレコードをリアルタイムで見ることができます。 デバッグモード中 プレフィックスの charドメインを直接入力できるようにする(または、ツリーのようなインターフェイスでは許可されていない高度なドメインを構築する)入力もあります。

これは static ドメインに限定されていることに注意してください(動的式やコンテキスト変数へのアクセスはありません)。

  • サポートされているフィールドの種類: char

オプション:

  • model: ドメインが適用される res_model をエンコードする文字フィールドの名前。

  • foldable (デフォルト: false): true の場合、ドメインフィールドはコンパクトにレンダリングされ、ユーザーの操作時に展開されます。

  • in_dialog (デフォルト: false): true の場合、ウィジェットはユーザーがドメインを編集したいときにダイアログを開き、デフォルトではダイアログを開きます。 ドメインエディタは値のすぐ下にレンダリングされます

リンクボタン (link_button)

`LinkButton`ウィジェットは実際には、アイコンとテキストの値をコンテンツとして表示するだけです。 リンクはクリック可能で、URLとして値を持つ新しいブラウザウィンドウが開きます。

  • サポートされているフィールドの種類: char

イメージ ファイル (image)

このウィジェットはバイナリ値をイメージとして表すために使用されます。 場合によっては、サーバは実画像の代わりに bin_size を返します(bin_size はファイルサイズを表す文字列で、 "6. kb"). その場合、ウィジェットはサーバー上の画像に対応するソース属性を持つ画像を作成します。

  • サポートされているフィールドタイプ: binary

オプション:

  • preview_image: 画像が bin_size としてのみ読み込まれた場合。 このオプションは、Webクライアントに、デフォルトのフィールド名が現在のフィールド名ではないことを知らせるのに役立ちます だが別のフィールドの名前だ

    <field name="image" widget="image" options="{'preview_image': 'image_128'}" />

  • accepted_file_extensions: ファイル入力ダイアログボックスからユーザが選択できるファイル拡張子です (デフォルトは "image/*")

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

バイナリファイル (binary)

バイナリファイルの保存/ダウンロードを許可する汎用ウィジェット。

  • サポートされているフィールドタイプ: binary

属性:

  • filename: バイナリ値を保存するだけなので、バイナリファイルを保存するとファイル名が失われます。 ファイル名は別のフィールドに保存することができます。これを行うには、ビューに存在するフィールドに filename 属性を設定します。

    <field name="datas" filename="datas_fname" />

オプション:

  • accepted_file_extensions: ファイル入力ダイアログボックスからユーザーが選択できるファイル拡張子。

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

優先度 (priority)

このウィジェットは星のセットとしてレンダリングされ、ユーザーが値を選択するかどうかをクリックすることができます。 例えば、タスクを優先度の高いタスクとしてマークする場合などに便利です。

このウィジェットは readonly モードでも動作します。

  • サポートされているフィールドタイプ: selection

イメージ添付ファイル (attachment_image)

`many2one`フィールドのイメージウィジェット。フィールドが設定されている場合、このウィジェットは適切なsrcURLを持つ画像としてレンダリングされます。 このウィジェットは編集または読み取り専用モードで異なる動作を持っていません。画像を表示するには便利です。

  • サポートされているフィールドタイプ: many2one

<field name="displayed_image_id" widget="attachment_image" />
ラベルの選択 (label_selection)

このウィジェットは、編集不可能な単純なラベルを描画します。これは、情報を表示するときにのみ便利です。編集するのではありません。

  • サポートされているフィールドタイプ: selection

オプション:

  • classes: 選択値からCSSクラス名へのマッピング

    <field
    name="state"
    widget="label_selection"
    options="{
        'classes': {
            'draft': 'default',
            'cancel': 'default',
            'none': 'danger',
        },
    }"
/>
状態選択 (state_selection)

これは特殊な選択ウィジェットです。stage_id 、 legend_blocked 、 legend_blocked 、 legend_done に含まれるいくつかのハードコードされたフィールドが記録に含まれていることを前提としています。 これは主にプロジェクト内のタスクの状態を表示および変更するために使用され、ドロップダウンに追加情報が表示されます。

  • サポートされているフィールドタイプ: selection

<field name="kanban_state" widget="state_selection" />
State Selection - List View (list.state_selection)

リストビューでは、 state_selection フィールドはデフォルトでアイコンの隣にラベルを表示します。

  • サポートされているフィールドタイプ: selection

オプション:

  • hide_label: アイコンの横にラベルを表示しない

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

このウィジェットは、ブール値に応じて、空の星として表示されます。読み取り専用モードでも編集できることに注意してください。

  • サポートされているフィールドタイプ: boolean

Toggle (boolean_toggle)

ブール値を表す切り替えスイッチを表示します。これは主に異なる外観を持つために使用される boolean フィールドのサブフィールドです。

  • サポートされているフィールドタイプ: boolean

Stat Info (statinfo)

このウィジェットは statボタン の統計情報を表すためのものです。基本的には数値のラベルだけです。

  • サポートされているフィールドタイプ: integer, float

オプション:

  • label_field: 与えられた場合、ウィジェットは label_field の値をテキストとして使用します。

    <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>
Pie の割合 (percentpie`)

このウィジェットは statボタン の統計情報を表すためのものです。 これはstatinfoウィジェットに似ていますが、情報は**円グラフ**で表されます(空白で満たされていません)。 この値はパーセンテージとして解釈されることに注意してください(`0`から`100`の間の数)。

  • サポートされているフィールドタイプ: integer, float

<field name="replied_ratio" string="Replied" widget="percentpie" />
進行状況バー (progressbar)

値をプログレスバーとして表します（`0`からある値まで）

  • サポートされているフィールドタイプ: integer, float

オプション:

  • editable: `value`が編集可能かどうかを決定するboolean

  • current_value: ビューに存在しなければならないフィールドから現在の値を取得します。

  • max_value: ビューに存在しなければならないフィールドの最大値を取得します

  • edit_max_value: `max_value`が編集可能かどうかを決定するboolean

  • title: バーのタイトル、バーの上部に表示

    -> 翻訳されていません。用語を翻訳する必要がある場合は、代わりに「title」属性を使用してください

<field
    name="absence_of_today"
    widget="progressbar"
    options="{
        'current_value': 'absence_of_today',
        'max_value': 'total_employee',
        'editable': false,
    }"
/>
Journal Dashboard Graph (dashboard_graph)

これはより特殊なウィジェットで、一連のデータを表すグラフを表示するのに役立ちます。 たとえば、これは会計ダッシュボードのかんばんビューで使用されます。

このフィールドは、データセットのJSONシリアライズであることを前提としています。

  • サポートされているフィールドの種類: char

属性:

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

    <field name="dashboard_graph_data" widget="dashboard_graph" graph_type="line" />
Ace Editor (ace)

このウィジェットはテキストフィールドで使用されることを意図しています。XMLとPythonを編集するためのエースエディタを提供します。

  • サポートされているフィールドタイプ: char, text

バッジ (badge)

ブートストラップバッジピルの中に値を表示します。

  • サポートされているフィールドタイプ: char 、 selection 、 many2one

デフォルトでは、バッジには薄いグレーの背景がありますが、 デコレーション メカニズムを使用してカスタマイズできます。 たとえば、一定の条件下で赤いバッジを表示するには:

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

リレーショナルフィールド

選択 (selection)

  • サポートされているフィールドタイプ: selection

属性:

  • placeholder: 値が選択されていないときに情報を表示するために使用される文字列

    <field name="tax_id" widget="selection" placeholder="Select a tax" />
ラジオ (radio)

これは FielSelection のサブフィールドですが、すべての有効な選択肢をラジオボタンとして表示することに特化しています。

many2one レコードで使用された場合、関連するレコードの name_gets を取得するために、より多くの rpcs が実行されることに注意してください。

  • サポートされているフィールドタイプ: selection, many2one

オプション:

  • horizontal: true の場合、ラジオボタンは水平方向に表示されます。

    <field name="recommended_activity_type_id" widget="radio" options="{'horizontal': true}"/>
バッジの選択 (selection_badge)

これは「selection」フィールドのサブフィールドですが、すべての有効な選択肢を矩形バッジとして表示することに特化しています。

  • サポートされているフィールドタイプ: selection, many2one

<field name="recommended_activity_type_id" widget="selection_badge" />
Many2one (many2one)

many2oneフィールドのデフォルトウィジェット。

  • サポートされているフィールドタイプ: many2one

属性:

  • can_create: 関連レコードの作成を許可します (`no_create`オプションよりも優先されます)

  • can_write: 関連レコードの編集を許可します (デフォルト: true)

オプション:

  • quick_create: 関連レコードのクイック作成を許可します (デフォルト: true)

  • no_create: 関連レコードの作成を防ぎます - **Create "xxx"**と**Create and Edit**の両方のメニュー項目を非表示にします (デフォルト: false)

  • no_quick_create: 関連レコードのクイック作成を防ぎます - **Create "xxx"**ドロップダウンメニュー項目を非表示にします (デフォルト: false)

  • no_create_edit: Create and Edit ドロップダウンメニューを非表示にします (デフォルト: false)

  • create_name_field: 関連レコードを作成するとき、このオプションが設定されている場合。 create_name_field の値は入力値で満たされます (デフォルト: name)

  • always_reload: boolean, default to false If true , ウィジェットは常に名前の値を取得するために追加の name_get を行います。 name_get メソッドがオーバーライドされている場合に使用します。（しないでください）

  • no_open: boolean, default to false. If true, many2one will not redirected on the record when clicking on it (in readonly mode)

<field name="currency_id" options="{'no_create': true, 'no_open': true}" />
Many2one Barcode (many2one_barcode)

`many2one`フィールドのウィジェットは、モバイルデバイス(Android/iOS)からカメラを開いてバーコードをスキャンすることができます。

ユーザーがバーコードをスキャンするためにネイティブカメラを使用することが許可されている many2one フィールドの専門化。 次に、name_search を使ってこの値を検索します。

このウィジェットが設定されていて、ユーザーがモバイルアプリケーションを使用していない場合は、通常の many2one (Many2OneField) にフォールバックされます。

  • サポートされているフィールドタイプ: many2one

Many2one Avatar(many2one_avatar)

このウィジェットは、 image から継承されたモデルを指す、 many2one フィールドでのみサポートされています。 ixin`。読み取り専用に、 display_name の横にある関連レコードの画像を表示します。 この場合、`display_name`はクリック可能なリンクではないことに注意してください。編集では、通常の`many2one`とまったく同じ動作をします。

  • サポートされているフィールドタイプ: many2one

Many2one Avatar User (many2one_avatar_user)

このウィジェットは Many2OneAvatar の専門分野です。アバターがクリックされると、対応するユーザーとチャットウィンドウが開きます。 このウィジェットは、`res.users`モデルを指す`many2one`フィールドにのみ設定できます。

  • サポートされているフィールドタイプ: many2one (`res.users`を指します)

Many2one アバター従業員（many2one_avatar_employee）

`many2one_avatar_user`と同じですが、`many2one`フィールドは`hr.employee`を指しています。

  • サポートされているフィールドタイプ: many2one (`hr.employee`を指します)

Many2multi(many2many)

`many2many`フィールドのデフォルトウィジェット。

  • サポートされているフィールドタイプ: many2many

属性:

  • mode: string, default view to display

  • domain: 特定のドメインにデータを制限する

オプション:

  • create_text: 新しいレコードを追加するときに表示されるテキストのカスタマイズを許可します

  • link: レコードをリレーションに追加できるかどうかを決定するドメイン (デフォルト: true)。

  • unlink: レコードをリレーションから削除できるかどうかを決定するドメイン (デフォルト: true)。

多くのバイナリファイル (many2many_binary)

このウィジェットは、ユーザーが1つまたは複数のファイルを同時にアップロードまたは削除するのに役立ちます。

このウィジェットはモデル ir.attachment に固有のものであることに注意してください。

  • サポートされているフィールドタイプ: many2many

オプション:

  • accepted_file_extensions: ファイル入力ダイアログボックスからユーザーが選択できるファイル拡張子。

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

多くのタグ (many2many_tags)

many2many フィールドをタグの一覧として表示します。

  • サポートされているフィールドタイプ: many2many

オプション:

  • create: 新しいタグを作成できるかどうかを決定するドメイン (デフォルト: true)。

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

  • color_field: ビューに表示する数値フィールドの名前。値に応じて色が選択されます。

    <field name="category_id" widget="many2many_tags" options="{'color_field': 'color'}" />

  • no_edit_color: true に設定すると、タグの色を変更することができます (デフォルト: false)。

    <field name="category_id" widget="many2many_tags" options="{'color_field': 'color', 'no_edit_color': true}" />

  • edit_tags: タグをクリックしてタグに関連するレコードを更新する機能を追加するには true に設定します。(デフォルト: false )。

    <field name="category_id" widget="many2many_tags" options="{'edit_tags': true}" />
多くのタグ - フォームビュー (form.many2many_tags)

フォームビュー用の many_tags ウィジェットの専門化。タグの色を編集するための追加コードがあります。

  • サポートされているフィールドタイプ: many2many

Many2multiタグ - カンバン ビュー (kanban.many2many_tags)

カンバン ビュー用の many_tags ウィジェットの専門化。

  • サポートされているフィールドタイプ: many2many

Many2multiチェックボックス(many2many_checkboxes)

このフィールドにはチェックボックスのリストが表示され、ユーザーが選択したサブセットを選択できるようになります。 表示される値の数は 100 に制限されていることに注意してください。この制限はカスタマイズできません。 これは、単純に、このウィジェットが巨大なコモデルのフィールドに誤って設定されている極端なケースを処理することができます。 これらの場合、ペジネーションとフィルタリングを可能にするため、リストビューがより適切になります。

  • サポートされているフィールドタイプ: many2many

One2multi（one2many）

`one2many`フィールドのデフォルトウィジェット。通常はサブリストビューまたはサブカンバンビューにデータを表示します。

  • サポートされているフィールドタイプ: one2many

オプション:

  • create: 関連レコードを作成できるかどうかを決定するドメイン (デフォルト: true)。

  • delete: 関連レコードを削除できるかどうかを決定するドメイン (デフォルト: true)。

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

  • create_text: 'Add' ラベル/テキストをカスタマイズするために使用する文字列。

    <field name="turtles" options="{'create_text': 'Add turtle'}" />
ステータスバー(statusbar)

これはフォームビュー固有のフィールドです。 これは、フローを表し、特定の状態を選択することができます多くのフォームの上にバーです。

  • サポートされているフィールドタイプ: selection, many2one

参照 (reference)

reference フィールドは、(モデル用) select と many2one フィールド(値用)の組み合わせです。 任意のモデルでレコードを選択できます。

  • サポートされているフィールドタイプ：char、参照

オプション:

  • model_field: 選択可能なレコードのモデルを含む ir.model の名前。 このオプションが設定されている場合、reference フィールドの選択部分は表示されません。

ウィジェット

リボン (web_ribbon)

このウィジェットは、アーカイブされたレコードを示すために、カンバン カードまたはフォーム ビュー シートの右上隅にリボンを表示します。

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

属性:

  • title: リボンに表示されるテキスト。

  • tooltip: リボンのツールチップに表示されるテキスト。

  • bg-class: リボンに設定するクラス名。通常はリボンの色を定義します。

週 (week_days)

このウィジェットは週間のチェックボックスの一覧を表示します 各日に1チェックボックスをオンにし、ユーザーが選択肢のサブセットを選択できるようにします。

<widget name="week_days" />

クライアントのアクション

クライアントアクションは、webclient内のメイン要素として表示できるコンポーネントです。 `act_window_action`のように、navbarの下のスペースをすべて占有します。 これは、既存のビューや特定のモデルと密接に関連付けられていないコンポーネントが必要な場合に便利です。 たとえば、format@@0 アプリケーションはクライアントアクションです。

クライアントアクションは、コンテキストに応じてさまざまな意味を持つ用語です。

  • サーバーの観点から、それはモデル ir_action のレコードで、タイプ charのフィールド tag があります。

  • Webクライアントの観点から、アクションレジストリに登録されているOwlコンポーネントのタグと同じキーの下にあります。

メニューアイテムがクライアントアクションに関連付けられている場合はいつでも、起動するとサーバーからアクション定義を取得できます。 アクションレジストリでタグを検索してコンポーネントの定義を取得します このコンポーネントはアクションコンテナによってレンダリングされます。

クライアントアクションの追加

クライアントアクションは、ナビゲーションバーの下の画面の一部を制御するコンポーネントです。 クライアントアクションを定義することは、Owl コンポーネントを作成し、アクションレジストリに追加するのと同じくらい簡単です。

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

次に、Web クライアントでクライアントアクションを使用するには、クライアントアクションレコードを作成する必要があります(モデルの ir. ctions.client) 適切な tag 属性:

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