3

Need to add colour in statusbar in odoo10 which available openerp versions eg: <field name = 'state' widget=statusbar clickabe= 'True' statubar_colors='{"new": "blue"}'>

How add colours in statusbar in odoo10

Need different color for different states in status bar For eg: Blue color for draft,green for progress, red for cancel

Thayif kabir
  • 715
  • 5
  • 20

3 Answers3

5

There is two solution for your requirement:

  1. If you need this behavior for only one Form view, Is simple as this:

just add style tag to beat the css selector generated by Odoo

        <style>
            .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled {
               background: yellow;
            }
            .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after {
               border-left-color: yellow;
            }
        </style>
        ...
        ...
        <field name ="state" widget="statusbar">

Here I used the same css selector because it's loaded after Odoo selector it is the one used, notice that my status bare button have .disabled class because it's readonly I think you have to change that clickabe= 'True' means it's not readonly.

  1. if you want to have this for all your model here you need to use css file and add it to assets_backend template, make sure that your selector beat Odoo selector.
   <template id="assets_backend" name="backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/your_addon_name/static/src/css/your_css_file_name.css"/>
        </xpath>
    </template>

Now I don't how you want to change the color exactly Here, you need to deal with CSS to select the right element, for example if you want to make the status bar color blue only when the "new" value is selected, lucky for you Odoo show the value selected in attribute data-value that doesn't change by translation.

   .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"] {
        background: blue;
    }
    .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"]::after {
       border-left-color: blue;
    }

This is in Odoo 11, when I inspected the element, this what I noticed:

  • status that is selected have class btn-primary the rest have btn-default
  • readonly have attribute disabled="disabled" and class disabled

And just to show that this work Here is a screen shot of what I have, You may have some side effect, it's when you open some record in popup and this form is still shown in the web page, this will effect the record shown too if it have a status bare widget, because the style tag will be removed when the form view is removed from the web page.

screen shot

Edits:

Let say your selection has two values : new, valid

This will color new to blue if selected and valid to green fi selected

<style>

       .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"] {
            background: blue;
        }
        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"]::after {
           border-left-color: blue;
        }

        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="progress"] {
            background: blue;
        }
        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="progress"]::after {
           border-left-color: blue;
        }

        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="cancel"] {
            background: red;
        }
        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="cancel"]::after {
           border-left-color: red;
        }
</style>
...
...
...
<field name="state" .....>

It's all about selecting the field by data-value Hope you get the idea. and this is easier than having to deal with javascript.

Charif DZ
  • 14,415
  • 3
  • 21
  • 40
  • Thanks for response, Need Different color for different states – Thayif kabir Sep 04 '19 at 11:07
  • yes, you can do what ever you want I just told you, you have to use data-value to select different element and specify different color for each element. – Charif DZ Sep 04 '19 at 11:42
  • Just edit your question and show different value of your field state, and what color you want for each selected value and I will help you with it, if you don't know how to do that, checkout my edits to have an idea on what you should do – Charif DZ Sep 04 '19 at 11:53
  • 2
    Very well explained @ElegantOdoo. – forvas Sep 04 '19 at 12:14
  • Hi, how can I implement this in a specific module only? – user9523333 Jan 24 '20 at 07:36
  • 1
    @user9523333 I explained at the end just define a style tag inside you form view, preferably before sheet tag and it will be applied only for that form view – Charif DZ Jan 24 '20 at 07:55
0

This feature was removed from Odoo a long time ago.

https://github.com/odoo/odoo/issues/5987

https://github.com/odoo/odoo/pull/11199

If you need to add this feature you will have to create a new widget for it.

Amal
  • 244
  • 3
  • 9
0
 inherit_id="web.assets_backend"

add style as you need, you can also give style in css

Hari Prasanth
  • 88
  • 1
  • 9