Налаштування поля¶
Підклас існуючого компонента поля¶
Розглянемо приклад, де ми хочемо розширити 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"/>