ビュータイプをカスタマイズ

サブクラス既存のビュー

一般的なビューのカスタムバージョンを作成する必要があるとします。 たとえば、いくつかの追加のリボン状のウィジェットを持つカンバンビュー(特定のカスタム情報を表示するため)です。 その場合、いくつかのステップで行うことができます:

1. カンバンコントローラ/レンダラ/モデルを拡張し、ビューレジストリに登録します。

   custom_kanban_controller.js

   import { KanbanController } from "@web/views/kanban/kanban_controller";
   import { kanbanView } from "@web/views/kanban/kanban_view";
   import { registry } from "@web/core/registry";
   
   // the controller usually contains the Layout and the renderer.
   class CustomKanbanController extends KanbanController {
       static template = "my_module.CustomKanbanView";
   
       // Your logic here, override or insert new methods...
       // if you override setup(), don't forget to call super.setup()
   }
   
   export const customKanbanView = {
       ...kanbanView, // contains the default Renderer/Controller/Model
       Controller: CustomKanbanController,
   };
   
   // Register it to the views registry
   registry.category("views").add("custom_kanban", customKanbanView);
   

   カスタムかんばんでは、新しいテンプレートを定義しました。 カンバンコントローラーテンプレートを継承してテンプレートピースを追加するか、完全に新しいテンプレートを定義することができます。

   custom_kanban_controller.xml

   <?xml version="1.0" encoding="UTF-8" ?>
   <templates>
       <t t-name="my_module.CustomKanbanView" t-inherit="web.KanbanView">
           <xpath expr="//Layout" position="before">
               <div>
                   Hello world !
               </div>
           </xpath>
       </t>
   </templates>
   

2. アーチの js_class 属性でビューを使用します。

   <kanban js_class="custom_kanban">
       <templates>
           <t t-name="kanban-box">
               <!--Your comment-->
           </t>
       </templates>
   </kanban>
   

ビューを拡張する可能性は無限大です。 ここではコントローラを拡張しただけですが、レンダラを拡張して新しいボタンを追加し、レコードの表示方法を変更することもできます。 またはドロップダウンをカスタマイズし、モデルや buttonTemplate などの他のコンポーネントも拡張します。

新しいビューを最初から作成

新しいビューを作成することは、高度なトピックです. このガイドでは、重要なステップのみを強調します.

1. コントローラーを作成します。

   コントローラの主な役割は、レンダラー、モデル、レイアウトなど、ビューのさまざまなコンポーネント間の調整を容易にすることです。

   beautiful_controller.js

   import { Layout } from "@web/search/layout";
   import { useService } from "@web/core/utils/hooks";
   import { Component, onWillStart, useState} from "@odoo/owl";
   
   export class BeautifulController extends Component {
       static template = "my_module.View";
       static components = { Layout };
   
       setup() {
           this.orm = useService("orm");
   
           // The controller create the model and make it reactive so whenever this.model is
           // accessed and edited then it'll cause a rerendering
           this.model = useState(
               new this.props.Model(
                   this.orm,
                   this.props.resModel,
                   this.props.fields,
                   this.props.archInfo,
                   this.props.domain
               )
           );
   
           onWillStart(async () => {
               await this.model.load();
           });
       }
   }
   

   コントローラーのテンプレートには、format@@0とレンダラーのコントロールパネルが表示されます。

   beautiful_controller.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <templates xml:space="preserve">
       <t t-name="my_module.View">
           <Layout display="props.display" className="'h-100 overflow-auto'">
               <t t-component="props.Renderer" records="model.records" propsYouWant="'Hello world'"/>
           </Layout>
       </t>
   </templates>
   

2. レンダラーを作成

   レンダラーの主な関数は、レコードを含むビューをレンダリングすることによってデータを視覚的に表現することです。

   beautiful_renderer.js

   import { Component } from "@odoo/owl";
   export class BeautifulRenderer extends Component {
       static template = "my_module.Renderer";
   }
   

   beautiful_renderer.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <templates xml:space="preserve">
       <t t-name="my_module.Renderer">
           <t t-esc="props.propsYouWant"/>
           <t t-foreach="props.records" t-as="record" t-key="record.id">
               // Show records
           </t>
       </t>
   </templates>
   

3. モデルを作成する。

   モデルの役割は、ビューで必要なすべてのデータを取得して管理することです。

   beautiful_model.js

   import { KeepLast } from "@web/core/utils/concurrency";
   
   export class BeautifulModel {
       constructor(orm, resModel, fields, archInfo, domain) {
           this.orm = orm;
           this.resModel = resModel;
           // We can access arch information parsed by the beautiful arch parser
           const { fieldFromTheArch } = archInfo;
           this.fieldFromTheArch = fieldFromTheArch;
           this.fields = fields;
           this.domain = domain;
           this.keepLast = new KeepLast();
       }
   
       async load() {
           // The keeplast protect against concurrency call
           const { length, records } = await this.keepLast.add(
               this.orm.webSearchRead(this.resModel, this.domain, [this.fieldsFromTheArch], {})
           );
           this.records = records;
           this.recordsLength = length;
       }
   }
   

   注釈

   高度なケースでは、ゼロからモデルを作成する代わりに、他のビューで使用される RelationalModel を使用することもできます。

4. アーチパーサを作成する。

   アーチパーサの役割は、アーチビューを解析することで、ビューが情報にアクセスできるようにします。

   beautiful_arch_parser.js

   import { XMLParser } from "@web/core/utils/xml";
   
   export class BeautifulArchParser extends XMLParser {
       parse(arch) {
           const xmlDoc = this.parseXML(arch);
           const fieldFromTheArch = xmlDoc.getAttribute("fieldFromTheArch");
           return {
               fieldFromTheArch,
           };
       }
   }
   

5. ビューを作成し、すべてのピースをまとめて、ビューレジストリにビューを登録します。

   beautiful_view.js

   import { registry } from "@web/core/registry";
   import { BeautifulController } from "./beautiful_controller";
   import { BeautifulArchParser } from "./beautiful_arch_parser";
   import { BeautifylModel } from "./beautiful_model";
   import { BeautifulRenderer } from "./beautiful_renderer";
   
   export const beautifulView = {
       type: "beautiful",
       display_name: "Beautiful",
       icon: "fa fa-picture-o", // the icon that will be displayed in the Layout panel
       multiRecord: true,
       Controller: BeautifulController,
       ArchParser: BeautifulArchParser,
       Model: BeautifulModel,
       Renderer: BeautifulRenderer,
   
       props(genericProps, view) {
           const { ArchParser } = view;
           const { arch } = genericProps;
           const archInfo = new ArchParser().parse(arch);
   
           return {
               ...genericProps,
               Model: view.Model,
               Renderer: view.Renderer,
               archInfo,
           };
       },
   };
   
   registry.category("views").add("beautifulView", beautifulView);
   

6. アーチで view を宣言します。

   ...
   <record id="my_beautiful_view" model="ir.ui.view">
     <field name="name">my_view</field>
     <field name="model">my_model</field>
     <field name="arch" type="xml">
         <beautiful fieldFromTheArch="res.partner"/>
     </field>
   </record>
   ...