フィールドをカスタマイズ¶

既存のフィールドコンポーネントをサブクラス化¶

「BooleanField」を拡張して、チェックボックスがチェックされるたびに「Late!」を表示するブール値フィールドを赤で作成したい例を見てみましょう。

目的のフィールドコンポーネントを拡張する新しいウィジェットコンポーネントを作成します。

late_order_boolean_field.js¶

import { registry } from "@web/core/registry";
import { BooleanField } from "@web/views/fields/boolean/boolean_field";
import { Component, xml } from "@odoo/owl";

class LateOrderBooleanField extends BooleanField {
   static template = "my_module.LateOrderBooleanField";
}

フィールドテンプレートを作成します。

コンポーネントは my_module.LateOrderBooleanField という名前の新しいテンプレートを使用します。BooleanField の現在のテンプレートを継承して作成します。

late_order_boolean_field.xml¶

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
    <t t-name="my_module.LateOrderBooleanField" t-inherit="web.BooleanField">
        <xpath expr="//CheckBox" position="after">
              <span t-if="props.value" class="text-danger"> Late! </span>
        </xpath>
    </t>
</templates>

コンポーネントを項目レジストリに登録します。
late_order_boolean_field.js¶
```
registry.category("fields").add("late_boolean", LateOrderBooleanField);
```
フィールドの属性としてビューアーチにウィジェットを追加します。
```
<field name="somefield" widget="late_boolean"/>
```

新しいフィールドコンポーネントを作成¶

単純なテキストを赤で表示するフィールドを作成すると仮定します。

新しいフィールドを表す Owl コンポーネントを作成

my_text_field.js¶

import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { Component, xml } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class MyTextField extends Component {
   static template = xml`
      <input t-att-id="props.id" class="text-danger" t-att-value="props.value" onChange.bind="onChange" />
   `;
   static props = { ...standardFieldProps };
   static supportedTypes = ["char"];

   /**
   * @param {boolean} newValue
   */
   onChange(newValue) {
      this.props.update(newValue);
   }
}

インポートされた standardFieldProps には、値を更新するための update 関数など、View によって渡される標準のプロパティが含まれています。モデルのフィールドの type 、readonly booleanなど。

同じファイルで、コンポーネントをフィールドレジストリに登録します。
my_text_field.js¶
```
registry.category("fields").add("my_text_field", MyTextField);
```
これは、アーチ内のウィジェット名を実際のコンポーネントにマップします。
フィールドの属性としてビューアーチにウィジェットを追加します。
```
<field name="somefield" widget="my_text_field"/>
```