Testreszab egy mezőt¶

Alosztályoz egy meglévő mezőkomponenst¶

Let’s take an example where we want to extends the BooleanField to create a boolean field displaying „Late!” in red whenever the checkbox is checked.

Hozzon létre egy új widget komponenst, amely kiterjeszti a kívánt mezőkomponenst.

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

Hozza létre a mező sablonját.

A komponens egy új sablont használ my_module.LateOrderBooleanField névvel. Hozza létre a BooleanField jelenlegi sablonjának öröklésével.

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>

Regisztrálja a komponenst a mezők regiszterébe.
late_order_boolean_field.js¶
```
registry.category("fields").add("late_boolean", LateOrderBooleanField);
```
Adja hozzá a widgetet a nézet architektúrájához a mező attribútumaként.
```
<field name="somefield" widget="late_boolean"/>
```

Hozzon létre egy új mezőkomponenst¶

Tegyük fel, hogy létre szeretnénk hozni egy mezőt, amely egyszerű szöveget jelenít meg piros színben.

Hozzon létre egy új Owl komponenst, amely az új mezőnket képviseli

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

Az importált standardFieldProps tartalmazza azokat az alapértelmezett tulajdonságokat, amelyeket a View ad át, mint például az update függvény az érték frissítéséhez, a mező type típusa a modellben, a readonly logikai érték, és mások.

Ugyanebben a fájlban regisztrálja a komponenst a mezők regiszterébe.
my_text_field.js¶
```
registry.category("fields").add("my_text_field", MyTextField);
```
Ez a widget nevét az arch-ban a tényleges komponenséhez rendeli.
Adja hozzá a widgetet a nézet architektúrájához a mező attribútumaként.
```
<field name="somefield" widget="my_text_field"/>
```