This question has been flagged
1 Reply
3126 Views
javascriptkanbancolorcss-style
Avatar
fel ALb

Hey everyone,


I am trying to understand Javascript in Odoo 11 because I want to colorize the Kanban cards based on a field holding rgba values.


I have gotten this far:


odoo.define('project_show_milestone.kanban_milestone_color', function(require){
"use strict";
var KanbanRecord = require('web.KanbanRecord');

KanbanRecord.include({        
    renderElement: function () {
        this._super.apply(this, arguments);
        if (this.recordData['ms_color'] != false) {
            //Apply the color to the record, if there is one.           
            this.$el.find('.oe_kanban_card').css("background-color", this.recordData['ms_color'] || 'green');         
            var core = require('web.core');                         alert(core._t(this.recordData['ms_color']));
         }
     }    
   });
});

The alert message, showing the field value executes fine, but the background-color is not applied.

I have no idea why...?

Could you please help me out.


Thanks in advance.

Edited for readability.

Avatar
Discard
Avatar
Jainesh Shah(Aktiv Software)
Best Answer

Hello Fel,


You have did everything correct appart from 1 mistake that is specifying what type of color you are using: ie. rgb, rgba, hex.


Please change this part:


---this.$el.find('.oe_kanban_card').css("background-color", this.recordData['ms_color'] || 'green');


to:


---this.$el.find('.oe_kanban_card').css("background-color", "rgb("+this.recordData['ms_color']+")" || 'green');



so that the final output will be: rgb(0,255,0) or green


Hope it helps.

Regards,




Email:      odoo@aktivsoftware.com  

Skype: kalpeshmaheshwari

   

Avatar
Discard
fel ALb
Author

Dear Jainesh,

thank you for getting back to me. Apparently there must be some overlay or css interference. I could colorize parts of the Kanban tile using your approach but never the whole thing.

So the Javascript ist find and all but there must be more going on with the CSS.

I chose to put an icon in the instead, changing the color using javascript.