+
+
+
+
+
+
+
diff --git a/pivot_conditional_formatting/static/src/css/pivot_conditional_formatting.css b/pivot_conditional_formatting/static/src/css/pivot_conditional_formatting.css
new file mode 100644
index 000000000..59a5f0360
--- /dev/null
+++ b/pivot_conditional_formatting/static/src/css/pivot_conditional_formatting.css
@@ -0,0 +1,107 @@
+.selected_cell{
+ border: 4px solid red !important;
+ opacity: 0.75;
+}
+.prevent-select {
+ -webkit-user-select: none; /* Safari */
+ -ms-user-select: none; /* IE 10 and IE 11 */
+ user-select: none; /* Standard syntax */
+}
+.conditional_container{
+ display: flex;
+ width: 30vw;
+ min-height:20vh;
+ background: #e3eaf0;
+ position: relative;
+ padding: 5px;
+ margin-top: 1vh;
+ box-shadow: 3px 3px 5px 0px rgb(0 0 0 / 32%);
+ margin-left: 1vw;
+ margin-bottom: 1vh;
+ border-radius: 5px;
+}
+
+.sub_container1{
+ height: 100%;
+ background: #e3eaf0;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ flex-direction: column;
+ width: 100%;
+}
+
+.condition_select{
+ width: 30%;
+ background: #71639e;
+ color: black;
+ font-weight: 500;
+ margin: 3%;
+ text-align: center;
+ padding: 1%;
+ border-radius: 4px;
+}
+
+.condition_val{
+ width: 61%;
+ height: 29px;
+ margin: 2%;
+ border: 2px solid #71639e;
+ border-radius: 4px;
+}
+
+.condition_button{
+ border: none;
+ background: #8b93d2;
+ margin: 4% 0;
+ padding: 1% 6%;
+ border-radius: 3px;
+ font-size: 16px;
+}
+.condition_button:hover{
+ background: #5b64ad;
+}
+
+.rule_container{
+ background: #e3eaf0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
+ height: 100px;
+ border: 1px solid black;
+}
+.input_container{
+ display:flex;
+}
+
+.sub_input_container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ color: black;
+}
+.sub_color_container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 0px 30px;
+ color: black;
+}
+.color_container{
+ display: flex;
+}
+
+.color-input{
+ width: 34px;
+ height: 32px;
+ border: none;
+ outline: none;
+}
+
+.validation-error{
+ display: none;
+ color: red;
+}
diff --git a/pivot_conditional_formatting/static/src/js/pivot_conditional_formatting.js b/pivot_conditional_formatting/static/src/js/pivot_conditional_formatting.js
new file mode 100644
index 000000000..487c20d53
--- /dev/null
+++ b/pivot_conditional_formatting/static/src/js/pivot_conditional_formatting.js
@@ -0,0 +1,248 @@
+/** @odoo-module **/
+import { PivotRenderer } from "@web/views/pivot/pivot_renderer";
+import { useService } from "@web/core/utils/hooks";
+import { patch } from '@web/core/utils/patch';
+import { useExternalListener, useEffect } from "@odoo/owl";
+
+patch(PivotRenderer.prototype,{
+ setup() {
+ super.setup();
+ this.orm = useService("orm");
+ this.isMouseDown = false;
+ this.startRowIndex = null;
+ this.startCellIndex = null;
+ useExternalListener(document, 'mouseup', this.mouse_up_function)
+ useEffect(() => {
+ this.set_default_rules()
+ })
+ },
+
+ async set_default_rules(){
+// function for default rules to be applied on the pivot table
+ var self = this
+ var viewId = this.env.config.viewId
+ var model = this.env.searchModel.resModel
+ await this.orm.call("conditional.rules","search_read", [],{
+ domain: [['model_id','=',model],['view_id','=',viewId]],
+ }).then(function(res){
+ self.conditional_rules = res
+ })
+ var cells = this.__owl__.bdom.parentEl.querySelectorAll('td')
+ cells.forEach(function(data){
+ data.style.backgroundColor = "#f8f9fa"
+ data.style.color = "black"
+ })
+ this.__owl__.bdom.parentEl.querySelectorAll('.o_pivot.table-responsive table .selected_cell').forEach(cell => {
+ cell.classList.remove('selected_cell')});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('.conditional_button').forEach(el => {
+ el.style.display = "none"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('.conditional_container').forEach(el => {
+ el.style.display = "none"});
+
+ for (let i = 0, len = this.conditional_rules.length; i < len; i++){
+ var condition = this.conditional_rules[i].rule
+ var condition_val = this.conditional_rules[i].value
+ var second_condition_val = this.conditional_rules[i].second_value
+ var color_val = this.conditional_rules[i].color
+ var text_color_val = this.conditional_rules[i].text_color
+
+ for (let j = 0, len = cells.length; j < len; j++){
+ var cell_val = cells[j].innerText
+ if(cell_val){
+ cell_val = cell_val.replace(',','')
+ }
+ if(condition == 'less_than'){
+ if(parseFloat(condition_val)>parseFloat(cell_val)){
+ cells[j].classList.remove("bg-100")
+ cells[j].style.backgroundColor = color_val
+ cells[j].style.color = text_color_val
+ }
+ }
+ if(condition == "greater_than"){
+ if(parseFloat(condition_val)< parseFloat(cell_val)){
+ cells[j].classList.remove("bg-100")
+ cells[j].style.backgroundColor = color_val
+ cells[j].style.color = text_color_val
+ }
+ }
+ if(condition == "is_empty"){
+ if(cells[j].innerText == ""){
+ cells[j].classList.remove("bg-100")
+ cells[j].style.backgroundColor = color_val
+ cells[j].style.color = text_color_val
+ }
+ }
+ if(condition == "in_between"){
+ if(parseFloat(cell_val)> parseFloat(condition_val) && parseFloat(cell_val)< parseFloat(second_condition_val)){
+ cells[j].classList.remove("bg-100")
+ cells[j].style.backgroundColor = color_val
+ cells[j].style.color = text_color_val
+ }
+ }
+ }
+ }
+ },
+ async conditional_format_tab(){
+// This function is called to display the conditional formatting
+// window/wizard in the UI.
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('.conditional_container').forEach(el => {
+ el.style.display = "block";
+ });
+ this.__owl__.bdom.parentEl.querySelectorAll("#condition_val")[0].value = ''
+ this.__owl__.bdom.parentEl.querySelectorAll("#secondcondition_val")[0].value = ''
+ if(this.__owl__.bdom.parentEl.querySelectorAll(
+ '.validation-error')[0].style.display == "inline"){
+ this.__owl__.bdom.parentEl.querySelectorAll(
+ '.validation-error')[0].style.display = "none";
+ }
+ },
+
+ conditional_formattoo(e){
+ // function for selecting table columns and adding and removing
+// classes
+ if (e.target.localName == 'td' || e.target.className == 'o_value'){
+ this.isMouseDown = true;
+ var cell;
+ if(e.target.className == 'o_value'){
+ cell = e.target.parentElement;
+ }else{
+ cell = e.target
+ }
+ this.__owl__.bdom.parentEl.querySelectorAll('.o_pivot.table-responsive table .selected_cell').forEach(cell => {
+ cell.classList.remove('selected_cell');
+ });
+ cell.className = 'selected_cell prevent-select'
+ this.startCellIndex = cell.cellIndex;
+ this.startRowIndex = cell.parentElement.cellIndex;
+ return false;
+ }
+ },
+
+
+ mouse_over_function(e){
+// function for selecting table columns
+ if (!this.isMouseDown) return;
+ if (e.target.localName == 'td' || e.target.className == 'o_value'){
+ var cell = e.target.parentElement;
+ if(e.target.className == 'o_value'){
+ cell = e.target.parentElement;
+ }else{
+ cell = e.target
+ }
+ cell.classList.add("selected_cell")
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('.conditional_button').forEach(el => {
+ el.style.display = "block"});
+ }
+ },
+
+ mouse_up_function(){
+// function for changing variable value to stop table cell selection
+ this.isMouseDown = false;
+ },
+
+ display_field(){
+// function for hiding and showing input fields inside popup window
+ var condition = this.__owl__.bdom.parentEl.querySelectorAll(
+ '.condition_select')[0].value
+ if(this.__owl__.bdom.parentEl.querySelectorAll(
+ '.validation-error')[0].style.display == "inline"){
+ this.__owl__.bdom.parentEl.querySelectorAll(
+ '.validation-error')[0].style.display = "none";
+ }
+ this.__owl__.bdom.parentEl.querySelectorAll(
+ '#condition_val')[0].value = ''
+ this.__owl__.bdom.parentEl.querySelectorAll(
+ '#secondcondition_val')[0].value = ''
+ if(condition == 'in between'){
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#secondcondition_val').forEach(el => {
+ el.style.display = "block"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#value_label').forEach(el => {
+ el.style.display = "block"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#sub_input_container2').forEach(el => {
+ el.style.display = "flex"});
+ }else{
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#secondcondition_val').forEach(el => {
+ el.style.display = "none"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#value_label').forEach(el => {
+ el.style.display = "none"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#sub_input_container2').forEach(el => {
+ el.style.display = "none"});
+ }
+ if(condition === 'null'){
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#condition_val').forEach(el => {
+ el.style.display = "none"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#value_label1').forEach(el => {
+ el.style.display = "none"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#sub_input_container1').forEach(el => {
+ el.style.display = "none"});
+ }else{
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#condition_val').forEach(el => {
+ el.style.display = "block"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#value_label1').forEach(el => {
+ el.style.display = "block"});
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('#sub_input_container1').forEach(el => {
+ el.style.display = "flex"});
+ }
+ },
+ set_rule(){
+// function for applying rules through popup window
+ var condition = this.__owl__.bdom.parentEl.querySelectorAll(
+ '.condition_select')[0].value
+ var color_val = this.__owl__.bdom.parentEl.querySelectorAll(
+ '.colorpicker')[0].value
+ var text_color_val = this.__owl__.bdom.parentEl.querySelectorAll(
+ '.text_color')[0].value
+ var cells = this.__owl__.bdom.parentEl.querySelectorAll(
+ '.selected_cell')
+ var condition_val = this.__owl__.bdom.parentEl.querySelectorAll(
+ '#condition_val')[0].value
+ var second_condition_val = this.__owl__.bdom.parentEl.querySelectorAll(
+ '#secondcondition_val')[0].value
+ this.__owl__.bdom.parentEl.querySelectorAll(
+ '#condition_val')[0].value = ''
+ this.__owl__.bdom.parentEl.querySelectorAll(
+ '#secondcondition_val')[0].value = ''
+ if(condition == 'in between'){
+ if(condition_val > second_condition_val){
+ this.__owl__.bdom.parentEl.parentElement.querySelectorAll('.validation-error').forEach(el => {
+ el.style.display = "inline"});
+ return
+ }
+ }
+ for (let i = 0, len = cells.length; i < len; i++){
+ var cell_val = cells[i].innerText
+ if(cell_val){
+ cell_val = cell_val.replace(',','')
+ }
+ if(condition == 'less than'){
+ if(parseFloat(condition_val)>parseFloat(cell_val)){
+ cells[i].classList.remove("bg-100")
+ cells[i].style.backgroundColor = color_val
+ cells[i].style.color = text_color_val
+ }
+ }
+ if(condition == 'greater than'){
+ if(parseFloat(condition_val)< parseFloat(cell_val)){
+ cells[i].classList.remove("bg-100")
+ cells[i].style.backgroundColor = color_val
+ cells[i].style.color = text_color_val
+ }
+ }
+ if(condition == "null"){
+ if(cells[i].innerText == ""){
+ cells[i].classList.remove("bg-100")
+ cells[i].classList.remove("bg-100")
+ cells[i].style.backgroundColor = color_val
+ cells[i].style.color = text_color_val
+ }
+ }
+ if(condition == 'in between'){
+ if(parseFloat(cell_val)> parseFloat(condition_val) && parseFloat(cell_val)< parseFloat(second_condition_val)){
+ cells[i].classList.remove("bg-100")
+ cells[i].style.backgroundColor = color_val
+ cells[i].style.color = text_color_val
+ }
+ }
+ }
+ },
+ });
\ No newline at end of file
diff --git a/pivot_conditional_formatting/static/src/xml/pivot_conditional_formatting.xml b/pivot_conditional_formatting/static/src/xml/pivot_conditional_formatting.xml
new file mode 100644
index 000000000..5a3dc31f1
--- /dev/null
+++ b/pivot_conditional_formatting/static/src/xml/pivot_conditional_formatting.xml
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Conditional Formatting in pivot view according + to different rules. +
+Conditional Formatting in Pivot View +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Conditional Formatting in Pivot Views +
++ Allows you to visually highlight and + differentiate cells based on values using + color rules in pivot tables.
+
+
+
+
+
+
+
+
+ + Predefined Default Rules +
++ Can predefine formatting rules specific to a + model and view. +
+
+
+
+
+
+
+
+
+
+ Conditional Formatting in Pivot View
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Enable option for setting conditional rules on pivot views + + +
+
+
+ + Go to Settings -> Users & + Companies -> Users -> under + "Technical" section in your + user, enable "Allow to Set Pivot + Conditional Rules option". +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Pivot Settings Menu + + +
+
+
+ + Open the Pivot Setting menu. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Setup rules for the pivot view. + +
+
+
+ + When you go to a pivot view with + Default Rules, You will see the + changes in the pivot according + to the Default Rules. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Open Pivot View + + +
+
+
+ + Open the pivot view of + quotation. Drag along the pivot + cells to select the cells you + want to apply the rules on. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Conditional Formatting Button + +
+
+
+ + Click on the Conditional + Formatting button for setting + the Rule, then select the + Condition and enter the Value to + base the condition on, choose + the Background color and Text + color and click the Save button + to apply the rule. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Set Conditions + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Conditions Applied to Pivot Table + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Compatible with Both Community & Enterprise Editions +
+
+
+
+
+
+
+
+
+
+ + Predefined Default Rules +
+
+
+
+
+
+
+
+
+
+ + Makes large pivot tables more readable and actionable.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + It allows you to + apply conditional + formatting rules to + cells in pivot + views, helping you + visually analyze + data by highlighting + values based on + conditions.
+
+
+
+
+
+ + Yes. You can + predefine default + formatting rules for + specific models, so + users get + consistent visual + feedback across the + system. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 26th June, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+ -
+
-
+