Skip to Content
Logo of RG Logo of RG
  • Home
  • Shop
  • Events
  • Courses
  • Company
    • News
    • Success Stories
  • Odoo Docs 19
  • Appointment
  • Jobs
  • Contact us
  • 0
  • 0
  • +1 555-555-5556
  • Sign in
Logo of RG Logo of RG
  • 0
  • 0
    • Home
    • Shop
    • Events
    • Courses
    • Company
      • News
      • Success Stories
    • Odoo Docs 19
    • Appointment
    • Jobs
    • Contact us
  • +1 555-555-5556
  • Sign in
Odoo Docs 19
Home Components Guides Classes Search
418 components
Data Display
  • action
  • Action Container
  • Action Helper
  • Action Menus
  • Animated Number
  • Attach Document
  • Attach Document Widget
  • Barcode Video Scanner
  • Base Settings
  • Block UI
  • Block UI
  • Breadcrumbs
  • Burger Menu
  • Button Box
  • calendar
  • Calendar Common Renderer
  • Calendar Controller
  • Calendar Filter Section
  • Calendar Mobile Filter Panel
  • Calendar Quick Create
  • Calendar Renderer
  • Calendar Side Panel
  • Calendar Year Renderer
  • Code Editor
  • Color List
  • Column Progress
  • command
  • Command Palette
  • Control Panel
  • Copy Button
  • Crop Overlay
  • currency
  • Custom Favorite Item
  • Custom Group By Item
  • Debug Menu Basic
  • Default Command Item
  • Demo Data
  • Display Exception
  • Display Notification
  • Documentation Link
  • Domain Selector
  • Dropzone
  • effect
  • emoji
  • Emoji Picker
  • error
  • Error Handler
  • Export All
  • Expression Editor
  • field
  • File Upload
  • File Upload Progress Bar
  • File Upload Progress Container
  • File Upload Progress Record
  • File Viewer
  • form
  • Form Controller
  • Form Label
  • Form Renderer
  • Form Status Indicator
  • Graph Controller
  • Graph Renderer
  • Group Config Menu
  • Highlight Text
  • home
  • hotkey
  • Hotkey Command Item
  • http
  • Input
  • In Range
  • Install Kiosk
  • Install Kiosk Pwa
  • Install Prompt
  • Install Scoped App
  • Install Scoped App
  • kanban
  • Kanban Column Quick Create
  • Kanban Controller
  • Kanban Header
  • Kanban Quick Create Controller
  • Kanban Record
  • Kanban Record Quick Create
  • Kanban Renderer
  • Lazy Component
  • Lazy Session
  • list
  • List Controller
  • List Renderer
  • Loading Indicator
  • Loading Indicator
  • localization
  • Main Components Container
  • menu
  • Model Field Selector
  • Model Selector
  • Multi Record Selector
  • Multi Selection Buttons
  • name
  • Name And Signature
  • Notebook
  • orm
  • Overlay Container
  • Pager
  • Pager Indicator
  • Pager Indicator
  • Pivot Controller
  • Pivot Renderer
  • profiling
  • Profiling Item
  • Properties Group By Item
  • Rainbow Man
  • Range
  • Record Selector
  • reload
  • reload Company
  • Reload Context
  • Report Action
  • Report View Measures
  • Res Config Dev Tool
  • Res Config Edition
  • Res Config Invite Users
  • Resizable Panel
  • Ribbon Widget
  • Search Bar
  • Search Bar Menu
  • Search Bar Toggler
  • Search Panel
  • Select
  • Selection Box
  • Select Menu
  • Setting
  • Settings App
  • Settings Block
  • Settings Page
  • share Target
  • signature
  • Signature Widget
  • Soft Reload
  • sortable
  • Status Bar Buttons
  • swallow All Visitor Errors
  • Switch Company Item
  • Switch Company Menu
  • Switch Company Menu
  • Tags List
  • Time Picker
  • title
  • Transition
  • Tree Editor
  • Tree Processor
  • ui
  • User Invite
  • User Menu
  • User Menu
  • User Switch
  • User Switch
  • view
  • View Button
  • View Scale Selector
  • Web Client
  • Web Ribbon
  • Week Days
  • Widget
  • With Search
  1. Components
  2. Kanban Record
OWL data_display

Kanban Record

Odoo 19 OWL component — Kanban Record (views)

Live preview Interactive
Source excerpt web/static/src/views/kanban/kanban_record.js
import { _t } from "@web/core/l10n/translation";
import { browser } from "@web/core/browser/browser";
import { ColorList } from "@web/core/colorlist/colorlist";
import { evaluateBooleanExpr } from "@web/core/py_js/py";
import { hasTouch } from "@web/core/browser/feature_detection";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { imageUrl } from "@web/core/utils/urls";
import { useRecordObserver } from "@web/model/relational_model/utils";
import { Field } from "@web/views/fields/field";
import { fileTypeMagicWordMap } from "@web/views/fields/image/image_field";
import { ViewButton } from "@web/views/view_button/view_button";
import { useViewCompiler } from "@web/views/view_compiler";
import { Widget } from "@web/views/widgets/widget";
import { getFormattedValue } from "../utils";
import { KANBAN_CARD_ATTRIBUTE, KANBAN_MENU_ATTRIBUTE } from "./kanban_arch_parser";
import { KanbanCompiler } from "./kanban_compiler";
import { KanbanCoverImageDialog } from "./kanban_cover_image_dialog";
import { KanbanDropdownMenuWrapper } from "./kanban_dropdown_menu_wrapper";

import { Component, onWillUpdateProps, useRef, useState } from "@odoo/owl";

const { COLORS } = ColorList;

const formatters = registry.category("formatters");

// These classes determine whether a click on a record should open it.
export const CANCEL_GLOBAL_CLICK = ["a", ".dropdown", ".oe_kanban_action", "[data-bs-toggle]"].join(
    ","
);

/**
 * Returns the index of a color determined by a given record.
 */
export function getColorIndex(value) {
    if (typeof value === "number") {
        return Math.round(value) % COLORS.length;
    } else if (typeof value === "string") {
        const charCodeSum = [...value].reduce((acc, _, i) => acc + value.charCodeAt(i), 0);
        return charCodeSum % COLORS.length;
    } else {
        return 0;
    }
}

/**
 * Returns a "raw" version of the field value on a given record.
 *
 * @param {Record} record
 * @param {string} fieldName
 * @returns {any}
 */
export function getRawValue(record, fieldName) {
    const field = record.fields[fieldName];
    const value = record.data[fieldName];
    switch (field.type) {
        case "one2many":
        case "many2many": {
            return value.count ? value.currentIds : [];
        }
        case "many2one": {
            return (value && value.id) || false;
        }
        case "date":
        case "datetime": {
            return value && value.toISO();
        }
        default: {
            return value;
        }
    }
}

/**
 * Returns a formatted version of the field value on a given record.
 *
 * @param {Record} record
 * @param {string} fieldName
 * @returns {string}
 */
function getValue(record, fieldName) {
    const field = record.fields[fieldName];
    const value = record.data[fieldName];
    const formatter = formatters.get(field.type, String);
    return formatter(value, { field, data: record.data });
}

export function getFormattedRecord(record) {
    const formattedRecord = {
        id: {
            value: record.resId,
            raw_value: record.resId,
        },
    };

    for (const fieldName of record.fieldNames) {
        formattedRecord[fieldName] = {
            value: getValue(record, fieldName),
            raw_value: getRawValue(record, fieldName),
        };
    }
    return formattedRecord;
}

/**
 * Returns the image URL of a given field on the record.
 *
 * @param {Record} record
 * @param {string} [model] model name
 * @param {string} [field] field name
 * @param {number | [number, ...any[]]} [idOrIds] id or array
 *      starting with the id of the desired record.
 * @param {string} [placeholder] fallback when the image does not
 *  exist
 * @returns {string}
 */
export function getImageSrcFromRecordInfo(record, model, field, idOrIds, placeholder) {
    const id = (Array.isArray(idOrIds) ? idOrIds[0] : idOrIds) || null;
Registry / API
Registry name
KanbanRecord
Category
—
Module
web
Slug
kanban-record
Nav group
data_display
Follow us

250 Executive Park Blvd, Suite 3400
San Francisco CA 94134

  • +1 555-555-5556
  • info@yourcompany.example.com
Copyright © Company name
Powered by Odoo - The #1 Open Source eCommerce