Налаштування поля¶

Підклас існуючого компонента поля¶

Розглянемо приклад, де ми хочемо розширити BooleanField, щоб створити логічне поле, яке відображатиме «Пізно!» червоним кольором щоразу, коли прапорець встановлено.

Створіть новий компонент віджета, що розширює потрібний компонент поля.

late_order_boolean_field.js¶

/** @odoo-module */

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 {}
LateOrderBooleanField.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);
```
Додайте віджет у arch перегляду як атрибут поля.
```
<field name="somefield" widget="late_boolean"/>
```

Створення нового компонента поля¶

Припустимо, що ми хочемо створити поле, яке відображає простий текст червоним кольором.

Створіть новий компонент Owl, що представляє наше нове поле

my_text_field.js¶

/** @odoo-module */

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 {

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

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

Імпортований standardFieldProps містить стандартні властивості, що передаються View, такі як функція update для оновлення значення, type поля в моделі, логічне значення readonly та інші.

У тому ж файлі зареєструйте компонент у реєстрі полів.
my_text_field.js¶
```
registry.category("fields").add("my_text_field", MyTextField);
```
Це зіставляє назву віджета в арці з його фактичним компонентом.
Додайте віджет у arch перегляду як атрибут поля.
```
<field name="somefield" widget="my_text_field"/>
```

Редагувати на GitHub