odoo17 | Qweb模板简介

前言

到目前为止,我们的房地产模块的界面设计还相当有限。构建列表视图很简单,因为只需要字段列表。表单视图也是如此:尽管使用了几个标签,如 <group>标签或 <page>标签 ,但在设计方面几乎没什么可做的。

然而,如果我们想为我们的应用程序提供独特的外观,就必须更进一步,能够设计新的视图。此外,其他功能,如PDF报告或网站页面,需要另一种工具来创建,以提供更大的灵活性:模板引擎。

你可能已经熟悉了现有的引擎,如 Jinja(Python)ERB(Ruby)Twig(PHP)。Odoo 自带其内置引擎:QWeb 模板。QWebOdoo 使用的主要模板引擎。它是一个 XML 模板引擎,主要用于生成 HTML 片段和页面。

您可能已经在Odoo中遇到过看板,其中的记录以卡片式结构显示。我们将为我们的房地产模块构建这样的视图。

具体例子:看板视图

目标

  • 创建一个看板视图
    在这里插入图片描述
    在我们的房地产应用程序中,我们想添加一个看板视图来显示我们的房产。看板视图是一种标准的Odoo视图(如表单和列表视图),但它们的结构要灵活得多。事实上,每张卡片的结构都是表单元素(包括基本HTML)和QWeb的混合体。看板视图的定义类似于列表和表单视图的定义,除了它们的根元素是<kanban>。看板视图的最简单形式如下:
<kanban><templates><t t-name="kanban-box"><div class="oe_kanban_global_click"><field name="name"/></div></t></templates>
</kanban>

让我们来解析这个例子:

  • <templates>:定义QWeb模板列表。看板视图必须至少定义一个根模板kanban-box,每个记录将呈现一次。
  • <t t-name=“kanban-box”>:<t> 是QWeb指令的占位符元素。在这种情况下,它用于将模板的名称设置为kanban-box
  • <div class=“oe_kanban_global_click”>:oe_kanban_global_click使<div>可点击以打开记录。
  • <field name=“name”/>:这将把name字段添加到视图中。

锻炼

制作一个最小的看板视图。

使用提供的简单示例,为属性创建一个最小的看板视图。唯一要显示的字段是名称。

提示:你必须在相应的ir.actions.act_window的view_mode中添加看板。

一旦看板视图开始工作,我们就可以开始改进它。如果我们想有条件地显示一个元素,我们可以使用t-if指令。

<kanban><field name="state"/><templates><t t-name="kanban-box"><div class="oe_kanban_global_click"><field name="name"/><div t-if="record.state.raw_value == 'new'">This is new!</div></div></t></templates>
</kanban>

我们添加了一些东西:

  • t-if:如果条件为真,则呈现<div>元素。

  • record:将所有请求字段作为其属性的对象。每个字段有两个属性valueraw_value。前者根据当前用户参数进行格式化,后者是read()的直接值。

在上面的例子中,字段名name 被添加到<templates>元素中,但是状态state 在元素之外。当我们需要一个字段的值,但不想在视图中显示它时,可以在<templates>元素之外添加它。

Kanban

<kanban>...
</kanban>

在这里插入图片描述
看板(kanban)视图是看板的可视化:它将记录显示为“卡片”,介于列表视图和非可编辑表单视图之间。记录可以按列分组,用于工作流可视化或操作(例如任务或工作进度管理),也可以不分组(仅用于可视化记录)。
提示
看板视图将加载并显示最多10列。之后的任何列都将被关闭(但仍然可以被用户打开)。

看板视图的根元素是<kanban>,可以使用以下属性:

  • sample: boolean (default: False)

如果当前模型没有找到,则使用一组示例记录填充视图。默认情况下,该属性为false。

这些假记录将对某些字段名称/模型具有启发式。例如,模型“res”上的字段“display_name”。“用户”将使用示例人名填充,而“电子邮件”字段将以“firstname.lastname@sample.demo”的形式填充。

用户将无法与这些数据进行交互,并且一旦执行操作(创建记录、添加列等),这些数据将被丢弃。

  • banner_route: path (可选)
    要获取的路由地址,并将其添加到视图之前。

如果设置了此属性,则控制器路由url将被提取并显示在视图上方。来自控制器的json响应应包含一个“html”键。

如果html包含样式表<link>标签,则将其删除并附加到<head>。

要与后端交互,可以使用 标签。请查看 useActionLinks 的文档(插件/web/static/src/views/view_hook.js)了解更多详细信息。

只有扩展了 AbstractViewAbstractController 的视图才能使用此属性,如 Form、Kanban、List 等。

例子:

<tree banner_route="/module_name/hello" />
class MyController(odoo.http.Controller):@http.route('/module_name/hello', auth='user', type='json')def hello(self):return {'html': """<div><link href="/module_name/static/src/css/banner.css"rel="stylesheet"><h1>hello, world</h1></div> """}
  • string: string (default: ‘’)

此视图标题仅在您打开没有名称且目标为“新建”(打开对话框)的操作时显示。

  • create: boolean (default: True)

在视图中禁用/启用记录创建。

  • edit: boolean (default: True)

在视图中禁用/启用记录编辑。

  • delete:boolean (default: True)

通过Action下拉菜单禁用/启用视图上的记录删除。

  • default_group_by: string (选) model field name

如果通过操作或当前搜索未指定分组,是否应该对看板视图进行分组。如果没有指定分组,则应使用哪个字段进行分组。

  • default_order: string (可选) 模型字段名

如果用户尚未对记录进行排序(通过列表视图),则使用卡片排序顺序。

  • class: string (可选) HTML标签的 class属性

为看板视图的根HTML元素添加HTML的class属性。

  • examples: string (可选)

如果设置为 KanbanExamplesRegistry 中的一个键,则列设置上的示例将在分组看板视图中可用。以下是定义这些设置的示例。

  • group_create: boolean (default: True)

“添加新列”栏是否可见。

  • group_delete: boolean (default: True)

是否可以通过上下文菜单删除组。

  • group_edit: boolean (default: True)

是否可以通过上下文菜单编辑组。

  • archivable: boolean (default: True)

如果模型上定义了活动字段,则属于列的记录是否可以存档/恢复。

  • quick_create: boolean (default: True)

是否应能够在不切换到表单视图的情况下创建记录。默认情况下,当看板视图按 many2oneselectioncharboolean 字段分组时,启用 quick_create,否则禁用。

  • quick_create_view: string (optional)

表单视图引用,指定用于记录快速创建的视图。

-records_draggable: boolean (default: True)

否应在看板分组时拖动记录。设置为 True 始终启用,设置为 False 始终禁用。

  • groups_draggable: boolean (default: True)

是否应在看板分组时重新排序列。设置为 True 始终启用,设置为 False 始终禁用。

看板视图中可能包含的子元素有:field、progressbar 或 templates。

<field>: 格式化渲染字段值

<kanban><field name="FIELD_NAME"/>...
</kanban>

声明要在看板逻辑中使用的字段。如果字段仅在看板视图中显示,则无需预先声明。

字段可以使用以下属性:

  • name: String(必选)模型字段名
    要获取的字段的名称
<kanban><templates><t t-name="kanban-box"><div><field name="name"/></div></t></templates>
</kanban>

在这里插入图片描述

<header>:在控制面板中的自定义按钮

<kanban><header><BUTTONS/></header>...
</kanban>

<button>

定义自定义按钮,类似于控制面板中的列表视图按钮,用于执行操作/调用模型的方法。当放置在头部时接受额外属性的按钮:

  • display: string 只为 display 或者 always (default: display)
    默认情况下,这些按钮仅在选中一些记录时才显示,并且应用于所选记录。当将 display 属性设置为 always 时,即使没有选择,按钮也始终可用。
<header><button name="toDoAlways" type="object" string="Always displayed" display="always"/><button name="toDoSelection" type="object" string="Displayed if selection"/>
</header>

提示 :目前的odoo版本,只有always选项是可用的,因为还不可能在看板视图中选择记录。后续的版本马上会做到。

<progressbar>: 视图列顶部的进度条

<kanban><progressbar field="FIELD_NAME"/>...
</kanban>

声明要放在看板列顶部的进度条元素。

可能的属性有:

  • field: string (必选) 模型字段名

字段的名称,其值用于对进度条中的列记录进行子分组

  • colors:JSON (必选)
    JSON将上述字段值映射为“danger”、“warning”、“success”或“静muted” 的颜色
  • sum_field: string (可选) 模型字段名
    字段的名称,其列记录的值将被求和并显示在进度条旁边(如果省略,则显示记录的总数)。
<kanban><progressbar field="activity_state"colors="{'planned': 'success', 'today': 'warning', 'overdue': 'danger'}"sum_field="expected_revenue"/><templates>...</templates>
</kanban>

在这里插入图片描述

\ : 卡片模板

<kanban>...<templates><t t-name="kanban-box"><div><field name="name"/></div></t></templates>
</kanban>

定义了一个 QWeb 模板列表。卡片定义可以为了清晰而拆分为多个模板,但看板视图必须定义至少一个根模板 kanban-box,该模板将为每个记录渲染一次。

可以定义另外两个模板:kanban-menukanban-tooltip。如果定义了这两个模板,kanban-menu 模板将在卡片右上方的垂直省略号 (⋮) 上的下拉菜单中渲染。当鼠标悬停在看板卡片上时,kanban-tooltip 模板将在工具提示中渲染。

看板视图使用标准的 JavaScript qweb,并提供以下上下文变量:

  • widget
    当前的KanbanRecord()可用于获取一些元信息。这些方法也可以直接在模板上下文中使用,不需要通过小部件访问

  • record
    一个对象,所有请求的字段都是它的属性。每个字段都有两个属性 value 和 raw_value,前者根据当前用户参数格式化,后者是 read() 的直接值(除了 date 和 datetime 字段,它们根据用户的语言环境格式化)

  • context
    当前context上下文,来自动作,以及在表单视图中嵌入看板视图的情况下的一个2多个或多个2多个字段

  • user_context
    用户上下文

  • read_only_mode
    只读模式

  • selection_mode
    选择模式,当从many2One/many2Many字段在移动环境中打开看板视图以选择记录时,设置为true。

提示: 在移动端环境中单击many2One/many2Many 字段将打开看板视图。

buttons 和 fields

虽然大多数看板模板都是标准的QWeb模板,但看板视图对 field, buttona标签元素进行了特殊处理:

  • 默认情况下,字段被替换为其格式化值,除非指定了小部件属性,在这种情况下,它们的呈现和行为取决于相应的小部件。可能的值包括(除其他外):

handle
用于按顺序(或整数)字段对记录进行排序,允许拖放记录以对其进行重新排序。

  • 具有type属性的按钮和链接将执行与Odoo相关的操作,而不是其标准的HTML功能。可能的类型有:

action, object
Odoo按钮的标准行为,可以使用与标准Odoo按钮相关的多数属性。

open
在只读模式下以窗体视图打开卡的记录

edit
在可编辑模式下在表格视图中打开卡的记录

delete
删除卡的记录并移除卡

结束

看板视图是一个典型的例子,说明从现有的 查看并微调它,而不是从头开始。有很多选项和类 可用,所以…阅读和学习!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/236826.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开通微信商家转账到零钱怎么做?场景模板

商家转账到零钱是什么&#xff1f; 商家转账到零钱功能是指商家可以通过支付平台将资金直接转账到用户的零钱账户中。在这种情况下&#xff0c;商家不需要用户提供银行账户信息&#xff0c;而是使用支付平台的转账功能将资金直接转移到用户的零钱账户中。 商家转账到零钱的使…

【前后端的那些事】treeSelect树形结构数据展示

文章目录 tree-selector1. 新增表单组件2. 在父组件中引用3. 父组件添加新增按钮4. 树形组件4.1 前端代码4.2 后端代码 前言&#xff1a;最近写项目&#xff0c;发现了一些很有意思的功能&#xff0c;想写文章&#xff0c;录视频把这些内容记录下。但这些功能太零碎&#xff0c…

紫光展锐5G扬帆出海 | Blade系列勇当拉美5G先锋

5G对拉丁美洲&#xff08;简称“拉美”&#xff09;绝大多数消费者来说还是一个新鲜技术。GSMA报告显示&#xff0c;过去五年&#xff0c;拉美运营商在移动网络方面的资本开支大部分用于部署4G网络。但在5G网络方面拉美也在积极大力投入中&#xff0c;紧跟全球5G发展大潮&#…

企业微信forMAC,如何左右翻动预览图片

1、control commandshifd 进入企业微信的debug调试模式 2、按照如下步骤选择 3、重启企业微信

【TC3xx芯片】TC3xx芯片电源管理系统PMS详解

目录 前言 正文 1.供电模式选择&#xff08;Supply Mode Selection&#xff09; 1.1 供电域 1.2 供电模式 1.3 供电阈值 1.4 供电上升和下降行为Supply Ramp-up and Ramp-down Behavior 1.5 EVRC产生供电 2. 电源监控 2.1 电源监控原理 2.2 Primary低电压监控 2.3 …

前端面试题集合五(css)

CSS 面试知识点总结 本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记&#xff0c;如果出现错误&#xff0c;希望大家指出&#xff01; 目录 1.介绍一下标准的 CSS 的盒子模型&#xff1f;低版本 IE 的盒子模型有什么不同的&#xff1f;2.CSS 选择符有哪些…

本地静态资源打包出来,本地配置ng访问服务器(uniapp打包成h5后,使用打包资源连接测试环境测试)

1.下载ng https://nginx.org/en/download.html 2.解压下载的压缩包 3.打包h5静态资源 4.将打包出来的资源放入ng -》html文件夹下面 5.进入ng-》conf-》nginx.conf 进行转发配置 6.启动ng服务&#xff0c;点击nginx.exe 7.浏览器直接访问http://localhost:8081/#/&#x…

C++内存管理机制(侯捷)笔记3

C内存管理机制&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youtube: 侯捷-C内存管理机制 Github课程视频、PPT和源代码: https://github.com/ZachL1/Bilibili-plus 第三讲&#xff1a;malloc和…

C++进阶--AVL树

AVL树 一、AVL树的概念二、AVL树节点的定义三、AVL树的插入四、AVL树的旋转4.1 左单旋4.2 右单旋4.3 左右双旋4.4 右左双旋 五、AVL树的验证六、AVL树的删除七、AVL树的性能 一、AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退…

分裂联邦学习论文-混合联邦分裂学习GAN驱动的预测性多目标优化

论文标题&#xff1a;《Predictive GAN-Powered Multi-Objective Optimization for Hybrid Federated Split Learning》 期刊&#xff1a;IEEE Transactions on Communications, 2023 一、论文介绍 背景&#xff1a;联邦学习作为一种多设备协同训练的边缘智能算法&#xff0…

D25XB100-ASEMI家用电器整流桥D25XB100

编辑&#xff1a;ll D25XB100-ASEMI家用电器整流桥D25XB100 型号&#xff1a;D25XB100 品牌&#xff1a;ASEMI 封装&#xff1a;GBJ-5&#xff08;带康铜丝&#xff09; 平均正向整流电流&#xff08;Id&#xff09;&#xff1a;25A 最大反向击穿电压&#xff08;VRM&…

最好的 8 个解锁 Android 手机的应用程序分析

如何解锁我的 Android 手机是一个困扰全球数百万人的问题。有多种Android解锁器可用于解锁手机。用户应确保选择最好的应用程序以轻松满意地完成工作。必须注意的是&#xff0c;数据在解锁手机的整个过程中都是安全可靠的。此类应用程序还应该能够在所有情况下检索数据。 锁屏移…

【STM32】STM32学习笔记-串口发送和接收(27)

00. 目录 文章目录 00. 目录01. 串口简介02. 串口相关API2.1 USART_Init2.2 USART_InitTypeDef2.3 USART_Cmd2.4 USART_SendData2.5 USART_ReceiveData 03. 串口发送接线图04. USB转串口模块05. 串口发送程序示例06. 串口发送支持printf07. 串口发送支持printf_v208. 串口发送和…

Transformer - Attention is all you need 论文阅读

虽然是跑路来NLP&#xff0c;但是还是立flag说要做个project&#xff0c;结果kaggle上的入门project给的例子用的是BERT&#xff0c;还提到这一方法属于transformer&#xff0c;所以大概率读完这一篇之后&#xff0c;会再看BERT的论文这个样子。 在李宏毅的NLP课程中多次提到了…

【MySQL】:掌握SQL中DDL的数据库定义与操作

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. SQL的分类二. DDL数据库操作2.1 查询所有数据库2.2 查询当前数据库2.3 创建数…

8.云原生存储之Ceph集群

1. 私有云实战之基础环境搭建 2. 云原生实战之kubesphere搭建 3.云原生之kubesphere运维 4. 云原生之kubesphere基础服务搭建 5.云原生安全之kubesphere应用网关配置域名TLS证书 6.云原生之DevOps和CICD 7.云原生之jenkins集成SonarQube 8.云原生存储之Ceph集群 文章目录 为什么…

(超详细)3-YOLOV5改进-添加SE注意力机制

1、在yolov5/models下面新建一个SE.py文件&#xff0c;在里面放入下面的代码 代码如下&#xff1a; import numpy as np import torch from torch import nn from torch.nn import initclass SEAttention(nn.Module):def __init__(self, channel512,reduction16):super()._…

OpenWrt智能路由器Wan PPPoE拨号配置方法

OpenWrt智能路由器的wan PPPoE拨号配置方法和我们常见的不太一样, 需要先找到wan网卡,然后将协议切换为 PPPoE然后才能看到输入上网账号和密码的地方. 首先登录路由器 http://openwrt.lan/ 然后找到 Network --> Interfaces 这里会显示你当前的路由器的所有接口, 选择 …

java求链表中倒数第k个结点

下面我用两种方法求解&#xff1a; 第一种方法&#xff1a;通常我们做这种题就是求出链表的长度length&#xff0c;然后呢length-k的值就是我们要从链表头部走几步就可以了&#xff0c;代码解释&#xff1a; public class Solution {public class ListNode {int val;ListNode…

BitMap源码解析

文章目录 前言数据结构添加与删除操作 JDK中BitSet源码解析重要成员属性初始化添加数据清除数据获取数据size和length方法集合操作&#xff1a;与、或、异或优缺点 前言 为什么称为bitmap&#xff1f; bitmap不仅仅存储介质以及数据结构不同于hashmap&#xff0c;存储的key和v…