odoo html field summernote wysiwyg editor custom

ODOO富文本字段Summernote编辑器自定义
Summernote是一个非常简单灵活所见即所得的HTML在线编辑器,基于jQuery和Bootstrap构建,支持快捷键操作,提供大量可定制的选项

不同版本的ODOO在不同阶段都尝试过各种自定义,比如字体选择、全屏功能以及开发者模式下的源码视图,以下将根据代码odoo/addons/web_editor/static/src/js/backend.js里的默认配置为基础进行自定义调整:

summernote

odoo integrated raphaël visualization marketing control view

ODOO集成Raphaël可视化销控视图
Raphaël 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作

虽然 D3.js 已经非常优秀,但多一个选择也不是坏事,何况理论上各种优秀的前端图形库都可以按照 ODOO 视图规范兼容共处一起飞:)

地产销控图

odoo dingtalk pc and mobile client auth common template

ODOO阿里钉钉桌面和移动客户端免登认证通用模板
钉钉的免登接口是先要通过基于前端H5的JSAPI获取到code后才能进行后台服务端校验,但其PC端和手机端开发很可能是两个不同风格的小团队耦合而成,所以调用接口需要整合一下才能对外透明,也难怪后台应用针对两端的首页都可以分别进行配置:

odoo wechat user info sync issue

ODOO微信用户信息同步问题
Python使用http高级requests库来对接微信开放平台和公众平台非常干净利落,主要两个小问题需要注意一下:

1、用户昵称乱码
正常拉取用户信息所返回的内容编码不太友好,读取时乱码,需要显式设定lang和encoding

2、用户头像时效
如只保存头像链接,若用户更换头像,原有链接将失效,需要用Binary字段存储一份图片二进制base64编码的副本

odoo form view edit mode disable auto focus

ODOO表单视图编辑模式禁用自动聚焦
表单创建的时候默认会自动聚焦到第一个输入框,这是人性化易用性的设计,用户不用手动点鼠标主动聚焦,直接输入内容即可,比如名称
表单编辑的时候往往第一个输入框都是已经有内容的,特别是第一个最近的字段是必填项居多,这个时候自动聚焦的意义就没有新建时候大

虽然意义不大但也不影响什么,直到最近集成一个二代身份证读卡器的硬件产品,为了兼容多平台多浏览器无控件无插件,只好使用最干净绿色的USB HID输入方案。这个时候新建的自动聚焦刚好可以和二代证的自动填充完美配合,但是编辑的时候由于仅聚焦不全选会导致二次读卡的情况下内容是追加而不是覆盖。这种场景下自动聚焦就显得多余,迫切需要在编辑模式下关闭且使用原生的窗口监听来实现最新读卡信息覆盖同步:

odoo modal dialog window draggable

ODOO模态对话框窗口拖动
年年一个大版本推进,但其前端基础库还是很古老的Bootstrap + jQuery + Underscore组合,11版本虽然对View层进行了激进的重构,也还是基于这个基架之上。同理jQuery UI交互界面库也一脉相承的延续至今,这就可以直接调用其Draggable Widget部件以最小的代价扩展原生模态对话框的拖拽功能:

 

odoo community version toggle left nav menu

ODOO社区版切换左侧导航菜单
社区版的菜单体系是一二三级同时分别展示于顶部和左侧,非常的直观,习惯这点后用企业版的菜单系统是非常难受的。个人认为最好的体验因该是大屏幕设备用社区版菜单,小屏幕终端用企业版菜单,关于这个课题以后在深入探讨,先回归本次主题:

以上通过继承菜单对应的模版在导航区植入一个切换开关按扭的入口

以上LESS代码定义其样式外观与一级菜单和谐保持一致并定位到合适的位置,没错,导航最左也就是第一个菜单前面的空位也就是它了

最后绑定上前端行为代码就可以开关自如的控制左侧导航区,同时还有一个小小的切换动画效果。至此,社区版也可以像企业版那样间接实现整个内容区都可以用来展示视图数据,特别适合那些数据多到需要用水平滚动条来左右拖动配合使用的场景

odoo tree view x2many field display (0 records) issue

ODOO列表视图X对多字段显示(n 条记录)问题
考虑到性能和显示的原因,原生One2many多年来一直以条数内容简单显示于固定表格中,其中最为瑕疵的就是无相关数据时的0条记录,这个Many2many也一脉相承,不知道会不会成为洁癖爱好者们心中的痛:)

今天终于等到一个机会忍无可忍精炼代码一并解决名称显示和零记录问题:

 

odoo integrated d3.js visualization position size state view

ODOO集成D3.js可视化位置尺寸状态视图
10版本开始视图根据multi_record布尔属性分为多记录和单记录两种,前者以列表为代表的大部分视图,后者则是表单为经典的单一视图以及神秘的Diagram视图

虽然原生的视图可以满足大部分需求,但是一些特殊的场景用专业的视图展现可以达到事半功倍的效果,如销控图、拓扑图、树状图等

D3.js是一个非常优秀的前端可视化库,其数据驱动的理念与ODOO完美互补:前者负责美丽娇艳,后者提供关系数据:)

销控图

odoo tree view disable open form content

ODOO列表视图禁止打开表单内容
正常的列表视图做为菜单动作直接打开的话,直接点击是跳转当前动作下的表单视图;还有一种是做为表单视图One2many、Many2many类型的嵌入式列表视图,直接点击打开Dialog窗口展示表单视图,一些特殊的需求场景下往往希望只将信息展示到列表即止,不用更多的详细互动:

原理就是找到相关的行点击入口,通过万能的context扩展一个独立的禁止打开参数,默认不禁止,视图里通过显式声明使用该功能: