摘自:https://www.cnblogs.com/yifchan/p/odoo-1-7.html
要完成自定义页面,需要以下几步:
0.引入相关js库;
1.编写注册xml页面;
2.在js中将动作和xml页面,js事件关联,并进行动作的注册;
3.引入js资源,完成在odoo中正式注册动作;
4.通过菜单调用动作打开页面;
0.引入js库
如果你的xml页面,要使用非odoo的第三方js库,可以在static/lib文件夹下面引入;相关js代码可以通过github代码库获取;
1.编写注册xml界面
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="DemoPage">
<div class="container-fluid py-2 o_web_settings_dashboard">
<div class="form-row">
<div class="col-12 col-lg-6 o_web_settings_dashboard_col">
<wired-card elevation="3">
<div class="mt8">
<wired-input placeholder="Enter name"></wired-input>
</div>
<div>
<wired-radio-group selected="two">
<wired-radio name="one" text="Radio One"></wired-radio>
<wired-radio name="two" text="Radio Two"></wired-radio>
<wired-radio name="three" text="Radio Three"></wired-radio>
</wired-radio-group>
</div>
<div class="mt8 mr8 mb8 text-right">
<wired-button>Cancel</wired-button>
<wired-button elevation="3" class="demo-submit">Submit</wired-button>
</div>
</wired-card>
</div>
</div>
</div>
</t>
</templates>
这里定义了一个form表单,使用了wired-elements的相关样式;在xml的第三行有一个t-name的属性,这表示对这个组件的命名,在后续的js文件中需要使用到。
记得在__mainfest__.py文件中使用如下代码注册xml页面;
'qweb': ["static/src/xml/base.xml"]
2.动作定义
在static/src/js文件夹下面创建demo.js文件;
// 自定义页面实际上是一个 client action,也就是客户端动作,通过对 AbstractAction 这个抽象类进行扩展,
// 从而指定自定义页面的模板和页面的事件等
odoo.define('custom_page.demo', function (require) {
"use strict";
var AbstractAction = require('web.AbstractAction');
var core = require('web.core');
var CustomPageDemo = AbstractAction.extend({
// 关联xml组件
template: 'DemoPage',
// 对某个类关联click事件
events: {'click .demo-submit': '_onSubmitClick'},
_onSubmitClick: function (e) {
e.stopPropagation();
alert('Submit clicked!');
}
});
// add方法对动作进行注册,第一个参数表示注册的动作名,第二个参数是要注册的动作对象;
core.action_registry.add('custom_page.demo', CustomPageDemo);
return CustomPageDemo;
});
上面这段代码的核心部分在 AbstractAction.extend(…) 中。其中 template 指定了自定义页面的模板名称,也就是我们前面所说的 t-name 这个属性;而 events 则定义了页面的一些事件,如该例中,定义的是当点击(click)带有类 .demo-submit 的元素时执行 _onSubmitClick 这个方法。
需要注意的是,我们需要通过 core.action_registry.add() 这个方法对动作进行注册,第一个参数表示注册的动作名(tag),第二个参数是要注册的动作对象。
3.动作注册
在odoo中引入前面编写的包含动作的js文件,就算是注册了这个动作。
在views下创建templates.xml文件
并在__manifest__中引用 :
‘views/templates.xml’,
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="assets_backend" name="custom page assets" inherit_id="web.assets_backend">
<xpath expr="//script[last()]" position="after">
<!--js引入-->
<script type="text/javascript" src="/crm_project/static/src/js/demo.js"></script>
</xpath>
<xpath expr="." position="inside">
<!--css引入-->
<link rel="stylesheet" type="text/css" href="/crm_project/static/src/css/rengong.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="/crm_project/static/src/css/bootstrap.css" target="_blank" rel="external nofollow" />
</xpath>
</xpath>
</template>
</data>
</odoo>
一般情况下都是在 views/templates.xml 中继承 web.ssets_backend 后在其末尾添加相关资源路径;
引入资源之后可以完成动作在odoo中的正式注册;你可以理解为前面编写的js文件相当于写了一张提薪申请表,现在资源的引入相当于提交申请表。
4.菜单调用动作
<odoo>
<data>
<record id="action_custom_page" model="ir.actions.client">
<field name="name">Custom Page</field>
<field name="tag">custom_page.demo</field>
</record>
<menuitem id="menu_root_custom_page" name="自定义页面" action="action_custom_page" groups="base.group_user" sequence="1"/>
</data>
</odoo>
当点击自定义页面菜单时,调用 action_custom_page 的客户端动作,而 action_custom_page 动作会调用前面定义 custom_page.demo 动作,动作会返回xml界面,从而实现在菜单中显示自定义界面。