Hướng dẫn cách tạo notification popup odoo 9

Notification popup odoo 9 là gì?

Notification popup odoo 9 là việc tạo một module để show một popup thông báo trên giao diện back-end của Odoo. Trong bài viết này mình sẽ hướng dẫn cách tạo một popup odoo 9 đơn giản, giúp các bạn hình dung việc sử dụng javascript trong Odoo framework kết hợp với việc kết nối với dữ liệu.

Trong bài viết trước mình đã hướng dẫn tích hợp các công cụ của google vào Odoo và cách cài đặt Odoo instance.

Hướng dẫn cách thực hiện.

Tạo model.

Mình sẽ tạo một model để có thể lấy dữ liệu lên.

Tạo file notification.py với model notification với nội dung sau:

# -*- coding: utf-8 -*-
from openerp import api, models, _, fields

class Notification(models.Model):

_name = 'notification'

_description = 'Notification'

#begin columns

name = fields.Char('Name')

description = fields.Html('Description')

type = fields.Selection([
('public','Public'),
('internal','Internal'),
('vip','VIP')
], default='public', string='Type', required=True
)

state = fields.Selection([
('draft','Draft'),
('confirm','Confirm'),
('done','Done')
], default='draft', string='State', required=True)

#end columns

@api.multi
def action_confirm(self):

self.write({'state': 'confirm'})

@api.multi
def action_done(self):

self.write({'state': 'done'})

Tạo file notification_view.xml để tạo view cho model trên.

<openerp>

<data>

<!-- Form view -->

<record id="notification_form_view" model="ir.ui.view">

<field name="name">notification.form.view</field>

<field name="model">notification</field>

<field name="arch" type="xml">

<form string="notification">

<header>

<div>

<button name="action_confirm" states="draft" string="Confirm" type="object" class="oe_highlight"/>

<button name="action_done" states="confirm" string="Done" type="object" class="oe_highlight"/>

<field name="state" widget="statusbar"/>

</div>

</header>

<sheet>

<group col="4">

<field name="name"/>

<field name="type"/>

</group>

<group>

<field name="description" colspan="4"/>

</group>

</form>

</field>

</record>

<!-- Tree view -->

<record id="notification_tree_view" model="ir.ui.view">

<field name="name">notification.tree.view</field>

<field name="model">notification</field>

<field name="arch" type="xml">

<tree string="Announcements">

<field name="name"/>

<field name="type"/>

</tree>

</field>

</record>

<!-- Search view -->

<record id="notification_search_view" model="ir.ui.view">

<field name="name">notification.search.view</field>

<field name="model">notification</field>

<field name="arch" type="xml">

<search string="Cash-out">

<field name="name"/>

<field name="type"/>

</search>

</field>

</record>

<!-- Action view -->

<record model="ir.actions.act_window" id="action_view_notification">

<field name="name">notification</field>

<field name="res_model">notification</field>

<field name="view_type">form</field>

<field name="view_mode">tree,form</field>

<field name="search_view_id" ref="notification_search_view" />

<field name="domain">[]</field>

<field name="context">{}</field>

</record>

</data>

</openerp>

Tạo controller

Tạo file main.py để lấy dữ liệu show lên trên popup.

import json

import openerp

import openerp.http as http

from openerp.http import request

from openerp.api import Environment

class PopUpController(openerp.http.Controller):

@http.route('/get_notification/notify', type='json', auth="none")

def notify(self):

registry = request.registry

uid = request.session.uid

context = request.session.context

cr = registry.cursor()

env = Environment(cr, uid, context)

notif_list = [{'notif_id': record.id, 'title': record.name, 'message':

record.description} for record in

env['notification'].sudo().search([('state','=','confirm')])]

return notif_list

Tạo Popup

Tạo một file style.css để tạo CSS cho popup.

.oe_web_module{

text-align:center;

margin-top: 50px;

}

.oe_web_module .html_elemet button{

border: 1px solid #CCC;

width:120px;

height: 30px;

}

.o_popup_manager{

width: 500px;

max-width: 100%;

position: relative;

top: 0px;

left: 0px;

bottom: 0px;

right: 0px;

z-index: 1052;

}

.popup_title{

background-color: antiquewhite;

}

.popup_footer{

background-color: azure;

}

#p_id{

background-color: beige;

border: 1px solid black;

}

.o_popup_manager_test{

width: 500px;

max-width: 100%;

position: absolute;

top: 250px;

left: 500px;

bottom: 500px;

right: 500px;

z-index: 1051;

}

Tạo một file pop_up.js để tạo popup.

odoo.define('notification.pop_up', function (require) {

"use strict";

var core = require('web.core');

var session = require('web.session');

var ajax = require('web.ajax');

var web_view = require('web.View')

var _t = core._t;

var _lt = core._lt;

var QWeb = core.qweb;

var Widget = require('web.Widget');

var WebClient = require('web.WebClient');

var web_client = require('web.web_client');

var PopUpManager = Widget.extend({

className: 'o_popup_manager_test',

display: function(popup) {

popup.appendTo(this.$el);

return popup;
},
});
var MyWidget = Widget.extend({
// QWeb template to use when rendering the object
template: "MyQWebTemplate",
className: 'o_popup_manager',
init: function(parent, title, message, notif_id) {
this._super(parent, title, message, notif_id);
//this._super.apply(this, arguments);
this.setParent(parent);
this.notif_id = notif_id;
this.title = title;

this.message = message;
this.events = _.extend(this.events || {}, {
'click .btn-ok': function() {
this.destroy(true);
},
'click .btn-detail': function() {
var self = this;
web_client.do_action({
type: 'ir.actions.act_window',
res_model: "notification",
res_id: this.notif_id,
views: [[false, 'form']],
target: 'current',
context: {},
});
this.destroy(true);
},
});
},
});
WebClient.include({
show_common: function() {

this._super();

var self = this

self.popup_manager = new PopUpManager(this);

self.popup_manager.appendTo(self.$('.openerp_webclient_container'));

},

get_pop_up: function() {

var self = this;

this.rpc('/get_notification/notify')

.done(function(result) {

_.each(result, function(res) {

setTimeout(function() {

if(self.$(".nid_" + res.notif_id).length === 0) {

self.popup_manager.display(new MyWidget(self.popup_manager, res.title, res.message, 

res.notif_id));
}
}, 60 * 1000);
});
})
.fail(function(err, ev) {
if(err.code === -32098) {
// Prevent the CrashManager to display an error
// in case of an xhr error not due to a server error
ev.preventDefault();
}
});
},
check_pop_up: function() {
var self = this;
this.get_pop_up();
this.intervalPopup = setInterval(function() {
self.get_pop_up();
}, 1 * 60 * 1000);
},
//Override the show_application of addons/web/static/src/js/chrome.js
show_application: function() {
this._super();
this.check_pop_up();
},
//Override addons/web/static/src/js/chrome.js
on_logout: function() {
this._super();
clearInterval(this.intervalPopup);
},
});
});

Tạo một file popup.xml để tạo template cho popup.

<?xml version="1.0" encoding="UTF-8"?>

<templates>

<t t-name='MyQWebTemplate'>

<div t-attf-class="o_popup_manager nid_{{widget.notif_id}}">

<div id="p_id">

<div class="popup_title text-center">

<h1 class="popup_title"><t t-esc="widget.title"/></h1>

</div>

<div class="popup_content">

<t t-raw="widget.message"/>

</div>

<div class="popup_footer">

<br/><br/>

<button type="button" class="btn btn-sm btn-primary link2showed oe_highlight
oe_form oe_button btn-ok"><span>OK</span></button>

<button type="button" class="btn btn-sm btn-link link2event btn
detail">Details</button>

</div>

</div>

</div>

</t>

</templates>

Tạo một file asset.xml để chèn javascript và css vào odoo.

<?xml version="1.0" encoding="utf-8"?>

<openerp>

<data>

<template id="assets_backend" name="web_tests assets" inherit_id="web.assets_backend">

<xpath expr="." position="inside">

<link rel="stylesheet" href="/vi_pop_up/static/src/css/style.css"/>

<script type="text/javascript" src="/vi_pop_up/static/src/js/pop_up.js"></script>

</xpath>

</template>

</data>

</openerp>

Kết luận:

Mình vừa hướng dẫn các bạn cách tạo một module notification popup odoo 9. Hy vọng qua bài viết các bạn có thể hiểu được cách thao tác với javascript trong Odoo 9.

Các bạn có thể tham khảo module có sẵn tại đây