Search code examples
cssxmlodooodoo-12

Form View hide button via CSS

On Form View i want to hide a button if Customer partner_id is False, i tried t-if with no luck i tied attrs but also didnt work.

Check status of Customer partner_id:

enter image description here

I want to hide the button Send Message:

enter image description here

Any solution?

I tried to run CSS to hide the button

My Code:

<field name="name" attrs="{'invisible': [('partner_id', '=', False)]}">
      <style>
        .o_chatter_button_new_message {
                display: none !important;
        }
      </style>
      </field>
Solution

  • You can do it in FormRenderer and to hide or show the button when the value of partner_id changes you can create a new many2one widget by extending FieldMany2One and changing the visibility state of the button depending on the value of partner_id.

    In the following example, the Send Message button will be hidden if the partner_id is defined when the form view is loaded or when the value of partner_id is set to false. The button should be visible when the value of the partner is set (onchange event). 

    odoo.define('stack_overflow.chatter_button_new_message', function (require) {
    "use strict";

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

    FormRenderer.include({

        autofocus: function () {
            var self = this;
            if(self.state.model === 'project.task' && self.state.data.partner_id===false){
                var node = window.$('button.o_chatter_button_new_message');
                node.hide();
            }
            return this._super();
        },
    });

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

    var FieldMany2One = relational_fields.FieldMany2One.extend({

        _onFieldChanged: function (event) {
            var node = window.$('button.o_chatter_button_new_message');
            if (event.data.changes[event.target.name]===false) {
                node.hide();
            } else {
                node.show();
            }

            this._super(event);
        },
    });

    fieldRegistry.add('hideSendMsg', FieldMany2One);
});

    You should add the js file in an asset bundle.

    To use the widget defined above you will need to set the widget attribute of the partner_id field to hideSendMsg in the XML definition. 

    <record id="view_task_form2_inherit" model="ir.ui.view">
    <field name="name">view.task.form2.inherit</field>
    <field name="model">project.task</field>
    <field name="inherit_id" ref="project.view_task_form2"/>
    <field name="arch" type="xml">
        <field name="partner_id" position="attributes">
            <attribute name="widget">hideSendMsg</attribute>
        </field>
    </field>
</record>

    =============================================================

    My Solution: @Fotic

    <script type="text/javascript">
        document.onload = check_status();
        document.onchange = check_status();
        function check_status() {
            if (document.getElementById("o_field_input_103")){
                var hasCSSClass = document.getElementById("o_field_input_103")
            }
            if (hasCSSClass){
              if ( hasCSSClass.classList.contains("o_field_empty") || hasCSSClass.classList.contains("o_input")) {
                  $(".o_chatter_button_new_message").show();
                  console.log("1111111111");
              } else{
                  $(".o_chatter_button_new_message").hide();
                  console.log("2222222222");
              }
            }
        }

    </script>