This question has been flagged
2 Replies
10476 Views

I am using Odoo 9, here I want to add a button in Right side pane is it possible in Odoo 9. 

Avatar
Discard

Have a look at Odoo Smart buttons (http://www.slideshare.net/openobject/odoo-smart-buttons)

Best Answer

To do that the better way is to move the sidebar to the right of the views, you can do it with this js code loaded in a module named for example web_sidebar_right

openerp.web_sidebar_right = function (instance) {

var QWeb = instance.web.qweb,
_t = instance.web._t;

instance.web.ListView.include({
render_sidebar: function($node) {
if (!this.sidebar && this.options.sidebar) {
this.sidebar = new instance.web.Sidebar(this, {editable: this.is_action_enabled('edit')});
if (this.fields_view.toolbar) {
this.sidebar.add_toolbar(this.fields_view.toolbar);
}
this.sidebar.add_items('other', _.compact([
{ label: _t("Export"), callback: this.on_sidebar_export },
this.fields_view.fields.active && {label: _t("Archive"), callback: this.do_archive_selected},
this.fields_view.fields.active && {label: _t("Unarchive"), callback: this.do_unarchive_selected},
this.is_action_enabled('delete') && { label: _t('Delete'), callback: this.do_delete_selected }
]));

$node = $('.oe_webclient');
this.sidebar.appendTo($node);

// Hide the sidebar by default (it will be shown as soon as a record is selected)
this.sidebar.do_hide();
}
}
});

instance.web.FormView.include({
render_sidebar: function($node) {
if (!this.sidebar && this.options.sidebar) {
this.sidebar = new instance.web.Sidebar(this, {editable: this.is_action_enabled('edit')});
if (this.fields_view.toolbar) {
this.sidebar.add_toolbar(this.fields_view.toolbar);
}
this.sidebar.add_items('other', _.compact([
this.is_action_enabled('delete') && { label: _t('Delete'), callback: this.on_button_delete },
this.is_action_enabled('create') && { label: _t('Duplicate'), callback: this.on_button_duplicate }
]));

$node = $('.oe_webclient');
this.sidebar.appendTo($node);

// Show or hide the sidebar according to the view mode
this.toggle_sidebar();
}
},
})
}

That will cause that the sidebar get rendered on the right of the views tree or form. In the sidebar you could display any kind of action using ir.values model, like:

<record model="ir.values" id="action_account_move_reversal">
<field name="model_id" ref="account.model_account_move" />
<field name="name">Reverse Moves</field>
<field name="key2">client_action_multi</field>
<field name="value" eval="'ir.actions.act_window,' +str(ref('action_view_account_move_reversal'))" />
<field name="key">action</field>
<field name="model">account.move</field>
</record>

Then you can extend the Sidebar qweb template to correclty draw the items as buttons or what best fit for you. Try to keep the structure expected by the Sidebar widget or you will need to extend it to find the dom nodes for bind clic events

Create for that an xml file at for example static/src/xml/templates.xml and register it on the __openerp__.py of your module as:

    'qweb' : [
'static/src/xml/templates.xml'
],

In the templates.xml file define the extension of the Sidebar template like (customize it for your html and css needs, this is an example):

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

<div t-name="Sidebar" class="oe_sidebar btn-group">
<t t-foreach="widget.sections" t-as="section">
<div class="oe_form_dropdown_section btn-group btn-group-sm">
<div t-if="section.name != 'buttons'" data-toggle="dropdown">
<t t-if="section.name == 'files'" t-raw="widget.items[section.name].length || ''"/>
<t t-esc="section.label"/>
<span class="caret"></span>
</div>
<t t-if="section.name == 'buttons'" t-foreach="widget.items[section.name]" t-as="item" t-att-class="item.classname">
<a t-att-title="item.title or ''" t-att-data-section="section.name" t-att-data-index="item_index" t-att-href="item.url"
target="_blank" class="oe_sidebar_button oe_highlight btn btn-info">
<t t-raw="item.label"/>
</a>
</t>
<ul class="dropdown-menu-old" role="menu">
<li t-foreach="widget.items[section.name]" t-as="item" t-att-class="item.classname">
<t t-if="section.name == 'files'">
<t t-set="item.title">
<b>Attachment : </b><br/>
<t t-raw="item.name"/>
</t>
<t t-if="item.create_uid and item.create_uid[0]" t-set="item.title">
<t t-raw="item.title"/><br/>
<b>Created by : </b><br/>
<t t-raw="item.create_uid[1] + ' ' + item.create_date"/>
</t>
<t t-if="item.create_uid and item.write_uid and item.create_uid[0] != item.write_uid[0]" t-set="item.title">
<t t-raw="item.title"/><br/>
<b>Modified by : </b><br/>
<t t-raw="item.write_uid[1] + ' ' + item.write_date"/>
</t>
</t>
<a class="oe_file_attachment btn btn-info" t-att-title="item.title or ''" t-att-data-section="section.name" t-att-data-index="item_index" t-att-href="item.url">
<t t-raw="item.label"/>
<span t-if="section.name == 'files' and widget.options.editable and !item.callback" class="oe_sidebar_delete_item btn btn-info" t-att-data-id="item.id" title="Delete this attachment">
<i class="fa fa-trash-o"/>
</span>
</a>
</li>
<li t-if="section.name == 'files' and widget.options.editable" class="oe_sidebar_add_attachment">
<t t-call="HiddenInputFile">
<t t-set="fileupload_id" t-value="widget.fileupload_id"/>
<t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
<input type="hidden" name="model" t-att-value="widget.dataset and widget.dataset.model"/>
<input type="hidden" name="id" t-att-value="widget.model_id"/>
<input type="hidden" name="session_id" t-att-value="widget.session.session_id" t-if="widget.session.override_session"/>
<span>Add...</span>
</t>
</li>
</ul>
</div>
</t>
</div>

</templates>

If like me you remove the dropdown-menu class from the ul node you need to extend the widget Sidebar like:

instance.web.Sidebar.include({
start: function() {
var self = this;
this._super(this);
this.$el.on('click','.dropdown-menu-old li a', function(event) {
var section = $(this).data('section');
var index = $(this).data('index');
var item = self.items[section][index];
if (item.callback) {
item.callback.apply(self, [item]);
} else if (item.action) {
self.on_item_action_clicked(item);
} else if (item.url) {
return true;
}
event.preventDefault();
});
},
})

In bold is highlighted the css path to the <a> buttons

This result as the following image:

http://postimg.org/image/8pfw03463/

Avatar
Discard