odoo-forge-bundle 0.1.0

package/payload/skills/odoo18-docs/references/docs/developer/howtos/frontend_owl_components.md

@@ -0,0 +1,180 @@
+---
+title: "Use Owl components on the portal and website"
+source_url: "https://docs.odoo.sbggai.top/developer/howtos/frontend_owl_components.html"
+---
+
+============================================
+# Use Owl components on the portal and website
+
+In this article, you will learn how you can leverage Owl components on the portal
+and website.
+
+# Overview
+
+To use Owl components on the website or portal, you will need to do a few things:
+
+- Create your Owl component and register it in the `public_components` registry
+- Add that component to the `web.assets_frontend` bundle
+- Add an `<owl-component>` tag to a website or portal page to use the component
+
+# 1. Creating the Owl component
+
+To keep things simple, let's start with a very straightforward component that just renders
+"Hello, World!". This will let us know at a glance if our setup is working.
+
+First, create the template in :file:`/your_module/static/src/portal_component/your_component.xml`.
+
+```xml
+
+    <?xml version="1.0" encoding="UTF-8"?>
+    <templates xml:space="preserve">
+        <t t-name="your_module.YourComponent">
+            Hello, World!
+        </t>
+    </templates>
+
+Then create the JavaScript file for that component in :file:`/your_module/static/src/portal_component/your_component.js`,
+and add it to the `public_components` registry:
+
+```js
+
+    import { Component } from "@odoo/owl";
+    import { registry } from "@web/core/registry"
+
+    export class YourComponent extends Component {
+        static template = "your_module.YourComponent";
+        static props = {};
+    }
+
+    registry.category("public_components").add("your_module.YourComponent", YourComponent);
+
+
+.. seealso::
+   :ref:`Owl components reference<frontend/components>`.
+
+
+# 2. Adding your component to the `web.assets_frontend` bundle
+
+The `web.assets_frontend` bundle is the assets bundle that is used by the portal and
+website, you'll want to add your component's code to that bundle so that the public
+components service can find your component and mount it. In your module's manifest,
+in the assets section, add an entry for `web.assets_frontend` and add your component's
+files:
+
+```py
+
+    {
+        # ...
+        'assets': {
+            'web.assets_frontend': [
+                'your_module/static/src/portal_component/**/*',
+            ],
+        }
+    }
+
+.. seealso::
+    :ref:`Module manifest reference<reference/module/manifest>`.
+
+# 3. Adding an `<owl-component>` tag to a page
+
+Now we need add an `<owl-component>` tag that will serve as the target for the component
+to be mounted. For the sake of this example, we'll add it directly to the portal's
+home page with an xpath in :file:`/your_module/views/templates.xml`.
+
+```xml
+
+    <?xml version="1.0" encoding="utf-8"?>
+    <odoo>
+        <template id="your_module.portal_my_home" inherit_id="portal.portal_my_home">
+            <xpath expr="//*[hasclass('o_portal_my_home')]" position="before">
+                <owl-component name="your_module.YourComponent" />
+            </xpath>
+        </template>
+    </odoo>
+
+Don't forget to add this file to the data section of your assets bundle:
+
+```py
+
+    {
+        # ...
+        'data': [
+            'views/templates.xml',
+        ]
+    }
+
+And that's it! If you open the home page of the portal you should see the message
+"Hello, World!" at the top of the page.
+
+# Points of caution
+
+Owl components are rendered entirely in JavaScript by the browser. This can cause
+some issues:
+
+- Layout shift
+- Poorer indexing by search engines
+
+For these reasons, you should only use Owl components on the portal and website for
+specific use cases described below.
+
+## Layout shift
+
+When a page initially renders content, and that content subsequently moves ("shifts")
+within the page, this is referred to as a layout shift. When using Owl components in
+the portal or website, all of the HTML that surrounds the Owl component is rendered
+by the server and is the first thing that will be displayed to the user. When JavaScript
+starts running, Owl will mount your component, which will likely cause the surrounding
+elements to move around on the page. This can cause poor user experience: the user sees
+an element on the page that was initially rendered and with which they want to interact,
+so they move their cursor or finger above that element. Just as they're about to click,
+the Owl component is mounted, and the element they want to interact with is moved.
+They click and interact with the Owl app instead.
+
+This can be a frustrating experience, so you should be careful when designing your
+page that the Owl component will not move elements around. This can be achieved in
+various ways, e.g. by positioning it below all other existing elements, not having
+other interactive elements around, or reserving a fixed space for the Owl component
+using CSS.
+
+
+.. seealso::
+  [Cumulative Layout Shift on web.dev ](https://web.dev/articles/cls)
+
+
+## Poorer indexing by search engines
+
+When search engines build their index of the content of the web, they use web crawlers
+to find pages and analyze their content to show these pages in their
+search results. While modern search engines are generally capable of executing JavaScript
+code and should generally be able to view and index content rendered in JavaScript,
+they may not index the content as fast and penalize the page in search results.
+
+Because most search engines do not reveal the exact way that they crawl and index
+web pages, it's not always easy to know the extent of the impact that client-side rendering
+can have on your search engine scores. While it's unlikely to make or break your SEO
+strategy, you should still only use Owl components when they are adding real value
+over server-side rendering.
+
+# When to use Owl components on the portal and website
+
+As explained in the previous sections, using Owl component can slightly degrade user
+experience if you're not careful and may also hinder your SEO. So when should you
+choose to use Owl components in these places? Here are some general guidelines.
+
+## When you don't care about SEO
+
+If a page cannot be indexed by search engines because it's not available to the public,
+e.g. anything in the user portal, SEO performance is not a concern, as web crawlers
+cannot access these pages anyway. There are also some things that you do not want or
+care about indexing, e.g. if you want to have a page where the user can choose a date
+and time for an appointment, you probably don't want search engines to index the dates
+on which an appointment is possible at a specific moment in time.
+
+## When you need strong interactivity
+
+The decision to use Owl is a trade-off between the previously mentioned disadvantages
+and the effort that Owl saves you by making it easy to build richly interactive user
+experiences. The main reason to use Owl is when you want to build an interface that
+can react in real time to user inputs without requiring the page to reload. If you
+mainly want to show static content to the user, you probably shouldn't use an Owl
+component.

package/payload/skills/odoo18-docs/references/docs/developer/howtos/javascript_client_action.md

@@ -0,0 +1,50 @@
+---
+title: ""
+source_url: "https://docs.odoo.sbggai.top/developer/howtos/javascript_client_action.html"
+---
+
+
+.. _howtos/javascript_client_action:
+# 
+# Create a client action
+
+A client action triggers an action that is entirely implemented in the client side.
+One of the benefits of using a client action is the ability to create highly customized interfaces
+with ease. A client action is typically defined by an OWL component; we can also use the web
+framework and use services, core components, hooks,...
+
+#. Create the :ref:`client action <reference/actions/client>`, don't forget to
+   make it accessible.
+
+   ```xml
+
+      <record model="ir.actions.client" id="my_client_action">
+          <field name="name">My Client Action</field>
+          <field name="tag">my_module.MyClientAction</field>
+      </record>
+
+#. Create a component that represents the client action.
+
+   ```js
+      :caption: :file:`my_client_action.js`
+
+      import { registry } from "@web/core/registry";
+
+      import { Component } from  "@odoo/owl";
+
+      class MyClientAction extends Component {
+          static template = "my_module.clientaction";
+      }
+
+      // remember the tag name we put in the first step
+      registry.category("actions").add("my_module.MyClientAction", MyClientAction);
+
+   ```xml
+      :caption: :file:`my_client_action.xml`
+
+      <?xml version="1.0" encoding="UTF-8" ?>
+      <templates xml:space="preserve">
+          <t t-name="awesome_tshirt.clientaction">
+              Hello world
+          </t>
+      </templates>

package/payload/skills/odoo18-docs/references/docs/developer/howtos/javascript_field.md

@@ -0,0 +1,101 @@
+---
+title: ""
+source_url: "https://docs.odoo.sbggai.top/developer/howtos/javascript_field.html"
+---
+
+# 
+# Customize a field
+
+# Subclass an existing field component
+
+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.
+
+#. Create a new widget component extending the desired field component.
+
+   ```javascript
+      :caption: :file:`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";
+      }
+
+#. Create the field template.
+
+   The component uses a new template with the name `my_module.LateOrderBooleanField`. Create it by
+   inheriting the current template of the `BooleanField`.
+
+   ```xml
+      :caption: :file:`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>
+
+#. Register the component to the fields registry.
+
+   ```:caption: :file:`late_order_boolean_field.js`
+
+      registry.category("fields").add("late_boolean", LateOrderBooleanField);
+
+#. Add the widget in the view arch as an attribute of the field.
+
+   ```xml
+
+      <field name="somefield" widget="late_boolean"/>
+
+# Create a new field component
+
+Assume that we want to create a field that displays a simple text in red.
+
+#. Create a new Owl component representing our new field
+
+   ```js
+      :caption: :file:`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);
+         }
+      }
+
+   The imported `standardFieldProps` contains the standard props passed by the `View` such as
+   the `update` function to update the value, the `type` of the field in the model, the
+   `readonly` boolean, and others.
+
+#. In the same file, register the component to the fields registry.
+
+   ```js
+      :caption: :file:`my_text_field.js`
+
+      registry.category("fields").add("my_text_field", MyTextField);
+
+   This maps the widget name in the arch to its actual component.
+
+#. Add the widget in the view arch as an attribute of the field.
+
+   ```xml
+
+      <field name="somefield" widget="my_text_field"/>

package/payload/skills/odoo18-docs/references/docs/developer/howtos/javascript_view.md

@@ -0,0 +1,259 @@
+---
+title: "Customize a view type"
+source_url: "https://docs.odoo.sbggai.top/developer/howtos/javascript_view.html"
+---
+
+=====================
+# Customize a view type
+
+# Subclass an existing view
+
+Assume we need to create a custom version of a generic view. For example, a kanban view with some
+extra ribbon-like widget on top (to display some specific custom information). In that case, this
+can be done in a few steps:
+
+#. Extend the kanban controller/renderer/model and register it in the view registry.
+
+   ```js
+      :caption: :file:`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);
+
+   In our custom kanban, we defined a new template. We can either inherit the kanban controller
+   template and add our template pieces or we can define a completely new template.
+
+   ```xml
+      :caption: :file:`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>
+
+#. Use the view with the `js_class` attribute in arch.
+
+   ```xml
+
+      <kanban js_class="custom_kanban">
+          <templates>
+              <t t-name="kanban-box">
+                  <!--Your comment-->
+              </t>
+          </templates>
+      </kanban>
+
+The possibilities for extending views are endless. While we have only extended the controller
+here, you can also extend the renderer to add new buttons, modify how records are presented, or
+customize the dropdown, as well as extend other components such as the model and `buttonTemplate`.
+
+# Create a new view from scratch
+
+Creating a new view is an advanced topic. This guide highlight only the essential steps.
+
+#. Create the controller.
+
+    The primary role of a controller is to facilitate the coordination between various components
+    of a view, such as the Renderer, Model, and Layout.
+
+   ```js
+      :caption: :file:`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();
+              });
+          }
+      }
+
+   The template of the Controller displays the control panel with Layout and also the
+   renderer.
+
+   ```xml
+      :caption: :file:`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>
+
+#. Create the renderer.
+
+    The primary function of a renderer is to generate a visual representation of data by rendering
+    the view that includes records.
+
+   ```js
+      :caption: :file:`beautiful_renderer.js`
+
+      import { Component } from "@odoo/owl";
+      export class BeautifulRenderer extends Component {
+          static template = "my_module.Renderer";
+      }
+
+   ```xml
+      :caption: :file:`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>
+
+#. Create the model.
+
+   The role of the model is to retrieve and manage all the necessary data in the view.
+
+   ```js
+      :caption: :file:`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;
+          }
+      }
+
+   > **note**:
+>       For advanced cases, instead of creating a model from scratch, it is also possible to use
+      `RelationalModel`, which is used by other views.
+
+#. Create the arch parser.
+
+   The role of the arch parser is to parse the arch view so the view has access to the information.
+
+   ```js
+      :caption: :file:`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,
+              };
+          }
+      }
+
+#. Create the view and combine all the pieces together, then register the view in the views
+   registry.
+
+   ```js
+      :caption: :file:`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);
+
+#. Declare the :ref:`view <reference/view_records/structure>` in the arch.
+
+   ```xml
+
+      ...
+      <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>
+      ...