### User Trip Example

Source: https://github.com/oca/web/blob/18.0/web_help/static/description/index.html

This JavaScript file demonstrates how to create custom user guides using the web_help module. It serves as a reference for implementing your own guides.

```javascript
/** @odoo-module */

import { registry } from "@web/core/registry";

const userTrip = [
    {
        content: "This is the first step of your guide.",
        trigger: ".o_menu_debugger",
        placement: "left",
    },
    {
        content: "This is the second step.",
        trigger: ".o_user_menu_logout",
        placement: "bottom",
    },
];

registry.category("user_tours").add("my_first_guide", userTrip);

```

--------------------------------

### Change Password Trip Example

Source: https://github.com/oca/web/blob/18.0/web_help/static/description/index.html

This JavaScript file provides an example of a user guide specifically for the password change wizard. It shows how to trigger and guide users through this process.

```javascript
/** @odoo-module */

import { registry } from "@web/core/registry";

const changePasswordTrip = [
    {
        content: "Change your password here.",
        trigger: "#password_current",
        placement: "right",
    },
    {
        content: "Enter your new password.",
        trigger: "#password_new",
        placement: "right",
    },
    {
        content: "Confirm your new password.",
        trigger: "#password_confirm",
        placement: "right",
    },
    {
        content: "Click here to save your new password.",
        trigger: ".o_change_password_form .btn-primary",
        placement: "bottom",
    },
];

registry.category("user_tours").add("change_password_guide", changePasswordTrip);

```

--------------------------------

### Install Bokeh Library

Source: https://github.com/oca/web/blob/18.0/web_widget_bokeh_chart/README.rst

Install the required Bokeh Python library using pip. Ensure you use a compatible version.

```bash
pip3 install bokeh==3.1.1
```

--------------------------------

### Install mpld3 Python Library

Source: https://github.com/oca/web/blob/18.0/web_widget_mpld3_chart/README.rst

Before using the module, ensure the mpld3 Python library is installed in your environment.

```bash
pip install mpld3
```

--------------------------------

### Wizard Data Initialization

Source: https://github.com/oca/web/blob/18.0/web_widget_x2many_2d_matrix/README.rst

Example of initializing the data for the x2many_2d_matrix widget within a wizard's default method, assuming a data model like 'project.task' and relevant fields.

```python
from odoo import fields, models

class MyWizard(models.TransientModel):
    _name = 'my.wizard'
```

--------------------------------

### Timeline View with Advanced Attributes

Source: https://github.com/oca/web/blob/18.0/web_timeline/static/description/index.html

An example showcasing advanced configuration options for the timeline view, including date_stop, date_delay, zoomKey, mode, and event_open_popup.

```xml
<record id="project_task_view_timeline" model="ir.ui.view">
    <field name="name">project.task.view.timeline</field>
    <field name="model">project.task</field>
    <field name="arch" type="xml">
        <timeline
            date_start="date_start"
            date_stop="date_end"
            date_delay="planned_hours"
            default_group_by="user_id"
            zoomKey="altKey"
            mode="week"
            event_open_popup="True">
            <field name="name"/>
            <field name="user_id"/>
            <field name="project_id"/>
        </timeline>
    </field>
</record>
```

--------------------------------

### Numeric Step Widget with Placeholder and Onchange

Source: https://github.com/oca/web/blob/18.0/web_widget_numeric_step/README.rst

Example demonstrating a numeric step widget with a step of 10, a maximum limit of 15, and a placeholder text. This configuration also includes an 'onchange' event.

```xml
<field name="field_name" widget="numeric_step" options="{'step': 10, 'max': 15, 'placeholder': 'Enter value'}" />
```

--------------------------------

### Basic Timeline View Configuration

Source: https://github.com/oca/web/blob/18.0/web_timeline/static/description/index.html

Example of defining a basic timeline view in XML. Ensure the 'date_start' and 'default_group_by' attributes are set according to your model's fields.

```xml
<record id="ir_cron_view_timeline" model="ir.ui.view">
    <field name="name">ir.cron.view.timeline</field>
    <field name="model">ir.cron</field>
    <field name="arch" type="xml">
        <timeline date_start="nextcall" default_group_by="user_id">
            <field name="name"/>
            <field name="user_id"/>
        </timeline>
    </field>
</record>
```

--------------------------------

### Numeric Step Widget with Options

Source: https://github.com/oca/web/blob/18.0/web_widget_numeric_step/readme/USAGE.md

Configure the step iteration, minimum, and maximum values for the numeric_step widget using the 'options' attribute. This example sets a step of 0.25, a minimum of -1, and a maximum of 10.

```XML
<field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days
```

--------------------------------

### Python Data Structure for X2Many 2D Matrix

Source: https://github.com/oca/web/blob/18.0/web_widget_x2many_2d_matrix/readme/USAGE.md

Example of how to define a Many2many field in a wizard and populate it with default data, suitable for the x2many_2d_matrix widget.

```python
from odoo import fields, models

class MyWizard(models.TransientModel):
    _name = 'my.wizard'

    def _default_task_ids(self):
        # your list of project should come from the context, some selection
        # in a previous wizard or wherever else
        projects = self.env['project.project'].browse([1, 2, 3])
        # same with users
        users = self.env['res.users'].browse([1, 2, 3])
        return [
            (0, 0, {
                'name': 'Sample task name',
                'project_id': p.id,
                'user_id': u.id,
                'planned_hours': 0,
                'message_needaction': False,
                'date_deadline': fields.Date.today(),
            })
            # if the project doesn't have a task for the user,
            # create a new one
            if not p.task_ids.filtered(lambda x: x.user_id == u) else
            # otherwise, return the task
            (4, p.task_ids.filtered(lambda x: x.user_id == u)[0].id)
            for p in projects
            for u in users
        ]

    task_ids = fields.Many2many('project.task', default=_default_task_ids)
```

--------------------------------

### Count Pending Activities

Source: https://github.com/oca/web/blob/18.0/web_form_banner/readme/USAGE.md

Display the number of pending activities for a project task. This example uses the 'env' object to search and count related mail activities.

```python
cnt = env["mail.activity"].search_count([("res_model","=",record._name),("res_id","=",record.id)])
result = {"visible": cnt > 0, "values": {"cnt": cnt}}
```

--------------------------------

### Timeline View with Dependency Arrows

Source: https://github.com/oca/web/blob/18.0/web_timeline/static/description/index.html

Example of configuring dependency arrows in the timeline view by specifying an x2many field. This allows visualizing relationships between timeline events.

```xml
<record id="project_task_view_timeline_dependency" model="ir.ui.view">
    <field name="name">project.task.view.timeline.dependency</field>
    <field name="model">project.task</field>
    <field name="arch" type="xml">
        <timeline
            date_start="date_start"
            default_group_by="user_id"
            dependency_arrow="project_ids">
            <field name="name"/>
            <field name="user_id"/>
            <field name="project_id"/>
        </timeline>
    </field>
</record>
```

--------------------------------

### Use URL Widget with Partner Name as Anchor

Source: https://github.com/oca/web/blob/18.0/web_widget_url_advanced/README.rst

In the partner form, this example displays the website link with the partner's name as the anchor text by using the 'name' field.

```xml
<field name="website" widget="url" text_field="name" placeholder="e.g. www.odoo.com"/>
```

--------------------------------

### Apply multiple foreground colors to a field

Source: https://github.com/oca/web/blob/18.0/web_tree_dynamic_colored_field/README.rst

To apply multiple color rules, separate them with a semicolon within the 'fg_color' option. This example sets the text color to red if 'red_color' is true, and green if 'green_color' is true.

```xml
    <field name="arch" type="xml">
        <tree string="View name">
            ...
            <field name="name" options='{"fg_color": "red:red_color == True; green:green_color == True"}'/>
            ...
        </tree>
    </field>
```

--------------------------------

### Static Default Time for Daterange Widget

Source: https://github.com/oca/web/blob/18.0/web_datetime_picker_default_time/readme/USAGE.md

Define static default start and end times for a field with the 'daterange' widget using 'defaultStartTime' and 'defaultEndTime' options.

```xml
<field name="your_start_datetime_field" widget="datetime" options="{'end_date_field': 'your_end_datetime_field', 'defaultStartTime': {'hour': 2, 'minute': 22, 'second': 22,}, 'defaultEndTime': {'hour': 3, 'minute': 33, 'second': 33,}}"/>
```

--------------------------------

### CSS for Bold Definition List Terms

Source: https://github.com/oca/web/blob/18.0/web_excel_export_dynamic_expand/static/description/index.html

Optional CSS to make definition list terms bold. Uncomment to enable.

```css
/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
  font-weight: bold
}
*/
```

--------------------------------

### Execute Multiple Actions with ir.actions.act_multi

Source: https://github.com/oca/web/blob/18.0/web_ir_actions_act_multi/readme/USAGE.md

Use this Python function to return a dictionary that triggers the 'ir.actions.act_multi' action. This action allows you to execute a list of subsequent actions, such as closing a window or reloading the client.

```python
def foo(self):
   self.ensure_one()
   return {
      'type': 'ir.actions.act_multi',
      'actions': [
          {'type': 'ir.actions.act_window_close'},
          {'type': 'ir.actions.client', 'tag': 'reload'},
      ]
   }
```

--------------------------------

### Basic X2Many 2D Matrix Widget Configuration

Source: https://github.com/oca/web/blob/18.0/web_widget_x2many_2d_matrix/readme/USAGE.md

Use this basic configuration when the related model has fields named 'x', 'y', and 'value'.

```xml
<field name="my_field" widget="x2many_2d_matrix" />
```

--------------------------------

### Configure Message Window Action

Source: https://github.com/oca/web/blob/18.0/web_ir_actions_act_window_message/readme/USAGE.md

Define an action to display a message window with custom title, message, and an optional close button. Supports HTML content and a list of interactive buttons.

```python
{
    'type': 'ir.actions.act_window.message',
    'title': _('My title'),
    'message': _('My message'),
    # optional title of the close button, if not set, will be _('Close')
    # if set False, no close button will be shown
    # you can create your own close button with an action of type
    # ir.actions.act_window_close
    'close_button_title': 'Make this window go away',
    # Use HTML instead of text
    'is_html_message': True,
    # this is an optional list of buttons to show
    'buttons': [
        # a button can be any action (also ir.actions.report.xml et al)
        {
            'type': 'ir.actions.act_window',
            'name': 'All customers',
            'res_model': 'res.partner',
            'view_mode': 'form',
            'views': [[False, 'list'], [False, 'form']],
            'domain': [('customer', '=', True)],
        },
        # or if type == method, you need to pass a model, a method name and
        # parameters
        {
            'type': 'method',
            'name': _('Yes, do it'),
            'model': self._name,
            'method': 'myfunction',
            # list of arguments to pass positionally
            'args': [self.ids],
            # dictionary of keyword arguments
            'kwargs': {'force': True},
            # button style
            'classes': 'btn-primary',
        }
    ]
}
```

--------------------------------

### Setting System Parameters for Web M2X Options

Source: https://github.com/oca/web/blob/18.0/web_m2x_options/readme/USAGE.md

Configure global behavior for M2X widgets by setting system parameters in Odoo. These parameters affect all fields unless overridden at the field level.

```text
web_m2x_options.create: False
web_m2x_options.create_edit: False
web_m2x_options.limit: 10
web_m2x_options.search_more: True
web_m2x_options.field_limit_entries: 5
```

--------------------------------

### Display Partner Comment (Convenience Placeholder)

Source: https://github.com/oca/web/blob/18.0/web_form_banner/README.rst

An alternative way to display a partner's comment using a convenience placeholder, simplifying the structure.

```python
{
    "visible": bool(record.partner_id.comment),
    "comment": record.partner_id.comment,
  }
```

--------------------------------

### Set Calendar Slot Duration in Window Action Context

Source: https://github.com/oca/web/blob/18.0/web_calendar_slot_duration/README.rst

To configure the calendar view's snap duration, include a context in your window action. This example shows the default value for a 30-minute slot duration.

```xml
{
   "calendar_slot_duration": "00:30:00"
}
```

--------------------------------

### Import matplotlib.pyplot

Source: https://github.com/oca/web/blob/18.0/web_widget_mpld3_chart/readme/USAGE.md

Import the matplotlib.pyplot library to create and manipulate charts.

```python
import matplotlib.pyplot as plt
```

--------------------------------

### Set background color for a field in a tree view

Source: https://github.com/oca/web/blob/18.0/web_tree_dynamic_colored_field/README.rst

Use the 'bg_color' option within the field tag to set the background color of a cell. The format is 'color: condition'. This example colors the 'name' field's background red for customer records.

```xml
    <field name="arch" type="xml">
        <tree string="View name">
            ...
            <field name="name" options='{"bg_color": "red: customer == True"}'/>
            ...
        </tree>
    </field>
```

--------------------------------

### Use URL Widget with Prefix and Text Field via Options

Source: https://github.com/oca/web/blob/18.0/web_widget_url_advanced/README.rst

Apply both 'prefix_name' and 'text_field' attributes within the 'options' attribute for URL widget customization.

```xml
<field name="skype_name" widget="url" options="{'prefix_name': 'skype'}"/>
```

--------------------------------

### Use string values for conditional coloring

Source: https://github.com/oca/web/blob/18.0/web_tree_dynamic_colored_field/README.rst

Conditional coloring can use string values for comparison. This example sets the text color to green if the 'customer_state' field equals 'success'. Note the use of escaped quotes for the string comparison within the JSON options.

```xml
    <field name="arch" type="xml">
        <tree string="View name">
            ...
            <field name="name" options="{'fg_color': 'green:customer_state == \'success\''}"/>
            ...
        </tree>
    </field>
```

--------------------------------

### Set text color for a field in a tree view

Source: https://github.com/oca/web/blob/18.0/web_tree_dynamic_colored_field/README.rst

Use the 'fg_color' option within the field tag to change the text color of a cell. The format is 'color: condition'. This example sets the 'name' field's text color to white for customer records.

```xml
    <field name="arch" type="xml">
        <tree string="View name">
            ...
            <field name="name" options='{"fg_color": "white:customer == True"}'/>
            ...
        </tree>
    </field>
```

--------------------------------

### XML Field Configuration for Dynamic Dropdown

Source: https://github.com/oca/web/blob/18.0/web_widget_dropdown_dynamic/README.rst

Configure a field in XML to use the dynamic dropdown widget. Specify the Python method for values using the 'options' attribute and set context dependencies.

```xml
   <field
       name="other_field"
   />
   <field
       name="char_field"
       widget="dynamic_dropdown"
       options="{'values':'method_name'}"
       context="{'depending_on': other_field}"
   />
```

--------------------------------

### XML Field Configuration for Dynamic Dropdown

Source: https://github.com/oca/web/blob/18.0/web_widget_dropdown_dynamic/readme/USAGE.md

Configure an XML field to use the 'dynamic_dropdown' widget. Specify the Python method for values and pass context to control option visibility.

```xml
<field
    name="other_field"
/>
<field
    name="char_field"
    widget="dynamic_dropdown"
    options="{'values':'method_name'}"
    context="{'depending_on': other_field}"
/>
```

--------------------------------

### Using the Popover Widget

Source: https://github.com/oca/web/blob/18.0/web_widget_popover/README.rst

Apply the 'popover' widget to Char or Text fields to display their content as a tooltip when hovered over an icon. The 'icon' attribute can be used to specify the icon to display.

```xml
<field
    name="warning_message"
    widget="popover"
    icon="fa-warning"
    class="text-danger"
    nolabel="1"
/>
```

--------------------------------

### Configure Project Task Timeline View

Source: https://github.com/oca/web/blob/18.0/web_timeline/readme/CONFIGURE.md

Defines the XML structure for the project task timeline view. It specifies date fields, grouping, popup behavior, colors based on state, and dependency arrows. Custom templates can be used to render timeline items.

```xml
<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="view_task_timeline" model="ir.ui.view">
        <field name="model">project.task</field>
        <field name="type">timeline</field>
        <field name="arch" type="xml">
            <timeline date_start="date_assign"
                      date_stop="date_end"
                      string="Tasks"
                      default_group_by="project_id"
                      event_open_popup="true"
                      colors="white: user_ids == []; #2ecb71: state == '1_done'; #ec7063: state == '1_canceled'"
                      dependency_arrow="depend_on_ids"
            >
                <field name="user_ids" />
                <field name="allocated_hours" />
                <templates>
                    <t t-name="timeline-item">
                        <div class="o_project_timeline_item">
                            <t t-foreach="record.user_ids" t-as="user" t-key="user.id">
                                <img
                                    t-if="record.user_ids"
                                    t-attf-src="/web/image/res.users/#{user}/image_128/16x16"
                                    t-att-title="record.user"
                                    width="16"
                                    height="16"
                                    class="mr8"
                                    alt="User"
                                />
                            </t>
                            <span name="display_name">
                                <t t-esc="record.display_name" />
                            </span>
                            <small
                                name="allocated_hours"
                                class="text-info ml4"
                                t-if="record.allocated_hours"
                            >
                                <t
                                    t-out="formatters.get('float_time')(record.allocated_hours)"
                                />
                            </small>
                        </div>
                    </t>
                </templates>
            </timeline>
        </field>
    </record>

    <record id="project.action_view_task" model="ir.actions.act_window">
        <field
            name="view_mode"
        >kanban,list,form,calendar,timeline,pivot,graph,activity</field>
    </record>
</odoo>
```

--------------------------------

### Apply Multiple Color Rules

Source: https://github.com/oca/web/blob/18.0/web_tree_dynamic_colored_field/readme/USAGE.md

Combine multiple foreground color rules by separating them with a semicolon. Each rule specifies a color and a condition.

```xml
options='{"fg_color": "red:red_color == True; green:green_color == True"}'
```

```xml
<field name="arch" type="xml">
            <tree string="View name">
                ...
                <field name="name" options='{"fg_color": "red:red_color == True; green:green_color == True"}'/>
                ...
            </tree>
        </field>
```

--------------------------------

### Use URL Widget with Prefix Name

Source: https://github.com/oca/web/blob/18.0/web_widget_url_advanced/README.rst

Add a prefix 'skype' to the link's anchor text using the 'prefix_name' attribute.

```xml
<field name="skype_name" widget="url" prefix_name="skype"/>
```

--------------------------------

### Displaying a Filter in the Header

Source: https://github.com/oca/web/blob/18.0/web_filter_header_button/readme/CONFIGURE.md

Use the `context` attribute with `shown_in_panel: True` to display a filter in the header. This requires an XML filter definition.

```xml
<filter
    string="My filter"
    name="my_filter"
    domain="[('active', '!=', False)]"
    context="{'shown_in_panel': True}"
>
```

--------------------------------

### Send Notification with Action Button

Source: https://github.com/oca/web/blob/18.0/web_notify/readme/USAGE.md

Send an informational notification with an interactive button that triggers a specific window action. Customize button name and icon using 'button_name' and 'button_icon' in action context params.

```python
action = self.env["ir.actions.act_window"]._for_xml_id('sale.action_orders')
action.update({
   'res_id': self.id,
   'views': [(False, 'form')],
})
action["context"].setdefault("params", {})
action["context"]["params"]["button_name"] = "Sales"
action["context"]["params"]["button_icon"] = "fa-eye"
self.env.user.notify_info('My information message', action=action)
```