شخصی‌سازی یک فیلد

زیرکلاس‌سازی یک کامپوننت فیلد موجود

بیایید مثالی را در نظر بگیریم که می‌خواهیم BooleanField را گسترش دهیم تا یک فیلد بولی ایجاد کنیم که هر زمان چک‌باکس تیک خورد، «Late!» را با رنگ قرمز نمایش دهد.

1. یک کامپوننت ویجت جدید ایجاد کنید که کامپوننت فیلد مورد نظر را گسترش می‌دهد.

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

2. قالب فیلد را ایجاد کنید.

   این کامپوننت از یک قالب جدید با نام 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>
   

3. کامپوننت را در رجیستری فیلدها ثبت کنید.

   late_order_boolean_field.js

   registry.category("fields").add("late_boolean", LateOrderBooleanField);
   

4. ویجت را در arch نما به‌عنوان ویژگی‌ای از فیلد اضافه کنید.

   <field name="somefield" widget="late_boolean"/>
   

ایجاد یک کامپوننت فیلد جدید

فرض کنید می‌خواهیم فیلدی ایجاد کنیم که متن ساده‌ای را با رنگ قرمز نمایش دهد.

1. یک کامپوننت 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 وارد شده شامل propهای استانداردی است که توسط View ارسال می‌شوند، مانند تابع update برای به‌روزرسانی مقدار، type فیلد در مدل، بولی readonly و موارد دیگر.

2. در همان فایل، کامپوننت را در رجیستری فیلدها ثبت کنید.

   my_text_field.js

   registry.category("fields").add("my_text_field", MyTextField);
   

   این، نام ویجت در arch را به کامپوننت واقعی آن نگاشت می‌کند.

3. ویجت را در arch نما به‌عنوان ویژگی‌ای از فیلد اضافه کنید.

   <field name="somefield" widget="my_text_field"/>