+
+
+
+
+
+
+
diff --git a/listview_change_background_color/static/src/css/color_picker.css b/listview_change_background_color/static/src/css/color_picker.css
new file mode 100644
index 000000000..5e90e234c
--- /dev/null
+++ b/listview_change_background_color/static/src/css/color_picker.css
@@ -0,0 +1,3 @@
+.o_list_renderer .o_list_table {
+ --table-bg: transparent;
+}
\ No newline at end of file
diff --git a/listview_change_background_color/static/src/js/color_picker.js b/listview_change_background_color/static/src/js/color_picker.js
new file mode 100644
index 000000000..298e27db2
--- /dev/null
+++ b/listview_change_background_color/static/src/js/color_picker.js
@@ -0,0 +1,91 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { ListRenderer } from "@web/views/list/list_renderer";
+import { ListController } from '@web/views/list/list_controller';
+import { useService } from "@web/core/utils/hooks";
+
+const { useRef, onPatched, onMounted, useState, onWillUpdateProps } = owl;
+
+patch(ListRenderer.prototype, {
+ setup() {
+ if (this.constructor.name == 'SectionAndNoteListRenderer') {
+ // Call method for removing color picking field from one2many
+ onMounted(() => {
+ this.__owl__.bdom.el.children[0].children[1].childNodes.forEach((item) => {
+ if (item.nodeName != "#text"){
+ if(!item.attributes.length == 0){
+ var list_one2many = item.children[1];
+ list_one2many.remove();
+ }
+ }
+ })
+ })
+ }
+ super.setup()
+ this.orm = useService("orm");
+ onMounted(this.color);
+ if (this.constructor.name == 'SectionAndNoteListRenderer') {
+ // Call method for removing color picking field from one2many
+ onPatched(()=>{
+ this.__owl__.bdom.el.children[0].children[1].childNodes.forEach((item) => {
+ if (item.nodeName != "#text"){
+ if(!item.attributes.length == 0){
+ var list_one2many = item.children[1];
+ list_one2many.remove();
+ }
+ }
+ })
+ });
+ }
+ onPatched(()=>{
+ this.color()
+ });
+ },
+ color_pick(ev, record) {
+ var color = ev.target.value
+ var res_id = record.resId
+ var res_model = record.resModel
+
+ // Update color picker input value
+ ev.target.value = color;
+
+ // ORM Call
+ this.orm.call("color.picker", "get_color_picker_model_and_id", [], {
+ record_id: res_id,
+ model_name: res_model,
+ record_color: color,
+ }).then(function(data) {
+ // You might want to handle the response here if needed
+ })
+
+ // Update row background color
+ ev.target.closest('tr').style.backgroundColor = color;
+ },
+
+ color() {
+ var current_model = this.props.list.model.env.searchModel.resModel
+ var tr_list = document.getElementsByClassName('o_data_row')
+ var self = this;
+
+ this.orm.call("color.picker", "search_read", [], {
+ domain: [
+ ['res_model', '=', current_model],
+ ],
+ }).then(function(data) {
+ Array.prototype.forEach.call(tr_list, function(tr) {
+ data.forEach((item) => {
+ if (tr.firstChild.nextElementSibling.dataset.id == item.record_id) {
+ // Update row background color
+ tr.style.backgroundColor = item.color;
+
+ // Update color picker input value
+ let colorPicker = tr.querySelector('input[type="color"]');
+ if (colorPicker) {
+ colorPicker.value = item.color;
+ }
+ }
+ });
+ });
+ })
+ },
+})
diff --git a/listview_change_background_color/static/src/xml/color_picker.xml b/listview_change_background_color/static/src/xml/color_picker.xml
new file mode 100644
index 000000000..bef2aec76
--- /dev/null
+++ b/listview_change_background_color/static/src/xml/color_picker.xml
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Change Background Colors Of Most Priority Records In Tree/List View Very Easily And + Quickly +
+Listview Change Background Color +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + + + Its Available For All Modules(Tree/List View) +
+
+
+
+
+
+
+
+
+ + Change Background Colors Of Most Priority Records +
+
+
+
+
+
+
+
+
+ + Highlight Important Or Favorite Records From Listview +
+
+
+
+
+
+
+
+
+ + Available For Any Listview Regardless Of Pagination Limit +
+
+
+
+
+
+
+
+
+ + Choose Any Colors For Any Listview Records +
+
+
+
+
+
+
+
+
+
+ Listview Change Background Color
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + +Go to + + Tree View +
+
+
+ + Go to Tree View -> We Can See A Icon To Change Color Of The Tree View -> + Click On It. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Choose The + + Color +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + See The Colored + + Tree View +
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Its Available For All Modules(Tree/List View) +
+
+
+
+
+
+
+
+
+
+ + Change Background Colors Of Most Priority Records +
+
+
+
+
+
+
+
+
+
+ + Highlight Important Or Favorite Records From Listview +
+
+
+
+
+
+
+
+
+
+ + Choose Any Colors For Any Listview Records +
+
+
+
+
+
+
+
+
+
+ + Available For Any Listview Regardless Of Pagination Limit +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Yes, you can customize the background color of any record in the list view based on its priority or status. +
+
+
+
+
+
+
+ + Yes, this feature is compatible with all modules and list views, regardless of the pagination limit. +
+
+
+
+
+
+
+ + Absolutely! You can highlight any record by choosing your preferred colors to distinguish them as important or favorite. +
+
+
+
+
+
+ + Yes, you can select any color for any record to make your list views more visually informative and organized. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 26th September, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+