+
+
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..7134944cf
--- /dev/null
+++ b/pivot_conditional_formatting/static/src/js/pivot_conditional_formatting.js
@@ -0,0 +1,252 @@
+/** @odoo-module **/
+
+ import { PivotRenderer } from "@web/views/pivot/pivot_renderer";
+ import { PivotController } from "@web/views/pivot/pivot_controller";
+ import { useService } from "@web/core/utils/hooks";
+ import { patch } from '@web/core/utils/patch';
+ const { useExternalListener, useEffect } = owl;
+
+ patch(PivotRenderer.prototype,'pivot_render.patch',{
+ setup() {
+ this._super.apply();
+ 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.el.querySelectorAll('td')
+ cells.forEach(function(data){
+ data.style.backgroundColor = "#f8f9fa"
+ data.style.color = "black"
+ })
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '.o_pivot.table-responsive table')).find(
+ ".selected_cell").removeClass("selected_cell");
+ $(this.__owl__.bdom.parentEl.parentElement).find(
+ '.conditional_button').css({display:"none"})
+ $(this.__owl__.bdom.parentEl.parentElement).find(
+ '.conditional_container').css({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
+ }
+ }
+ }
+ }
+ },
+ 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.el.querySelectorAll(
+ '.o_pivot.table-responsive table')).find(".selected_cell"
+ ).removeClass("selected_cell"); // deselect everything
+ 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).find(
+ '.conditional_button').css({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.el.querySelectorAll(
+ '.condition_select')).val()
+ if(this.__owl__.bdom.el.querySelectorAll(
+ '.validation-error')[0].style.display == "inline"){
+ this.__owl__.bdom.el.querySelectorAll(
+ '.validation-error')[0].style.display = "none";
+ }
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#condition_val'))[0].value = ''
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#secondcondition_val'))[0].value = ''
+ if(condition == 'in between'){
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#secondcondition_val')).css({display:'block'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#value_label')).css({display:'block'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#sub_input_container2')).css({display:'flex'})
+ }else{
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#secondcondition_val')).css({display:'none'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#value_label')).css({display:'none'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#sub_input_container2')).css({display:'none'})
+ }
+ if(condition === 'null'){
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#condition_val')).css({display:'none'})
+
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#value_label1')).css({display:'none'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#sub_input_container1')).css({display:'none'})
+ }else{
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#condition_val')).css({display:'block'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#value_label1')).css({display:'block'})
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '#sub_input_container1')).css({display:'flex'})
+ }
+ },
+ set_rule(){
+// function for applying rules through popup window
+ var condition = $(this.__owl__.bdom.el.querySelectorAll(
+ '.condition_select')).val()
+ var color_val = $(this.__owl__.bdom.el.querySelectorAll(
+ '.colorpicker')).val()
+ var text_color_val = $(this.__owl__.bdom.el.querySelectorAll(
+ '.text_color')).val()
+ var cells = $(this.__owl__.bdom.el.querySelectorAll(
+ '.selected_cell'))
+ var condition_val = $(this.__owl__.bdom.el.querySelectorAll(
+ '#condition_val')).val()
+ var second_condition_val = $(this.__owl__.bdom.el.querySelectorAll(
+ '#secondcondition_val')).val()
+ this.__owl__.bdom.el.querySelectorAll(
+ '#condition_val')[0].value = ''
+ this.__owl__.bdom.el.querySelectorAll(
+ '#secondcondition_val')[0].value = ''
+ if(condition == 'in between'){
+ if(condition_val > second_condition_val){
+ $(this.__owl__.bdom.el.querySelectorAll(
+ '.validation-error')).css({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
+ }
+ }
+ }
+ },
+
+ });
+ patch(PivotController.prototype, 'PivotController.Patch', {
+ conditional_format_tab(){
+// This function is called to display the conditional formatting
+// window/wizard in the UI.
+ $(this.__owl__.bdom.el.querySelectorAll(".conditional_container")).css({display:"block"})
+ this.__owl__.bdom.el.querySelectorAll("#condition_val")[0].value = ''
+ this.__owl__.bdom.el.querySelectorAll("#secondcondition_val")[0].value = ''
+ if(this.__owl__.bdom.el.querySelectorAll(
+ '.validation-error')[0].style.display == "inline"){
+ this.__owl__.bdom.el.querySelectorAll(
+ '.validation-error')[0].style.display = "none";
+ }
+ },
+ });
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
++ Conditional Formatting in pivot view according to different rules. +
+
+
+
+
+
+
+
+
+
+
+ + Explore this module +
+
+
+
+
+
+
+ + Overview +
+
+
+ + This module helps to setup predefined rules for conditional + formatting in pivot view for specific models.
+ +
+
+
+
+
+
+ + Features +
+
+
+
+
+ 
+
+
+
+
+ Community & Enterprise support.
+
+
+
+
+
+
+
+
+ + Showcase difference between cells, according to the + rules. +
+
+
+
+
+
+
+
+
+ + Predefinable default rules for specific models and + views. +
+
+
+
+
+
+
+
+
+
+ + Select cells and add rules dynamically. +
+
+
+
+
+
+
+
+
+
+
+ + Define background and text colors for the cells. +
+
+
+
+
+
+
+
+
+ + Screenshots +
+
+ 
+
+ + 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". +
+
+
+ 
+ 
+
+ + Setup default rules for models +
++ Go to Settings -> Pivot Settings -> Create new rules in this + menu. Choose the Model and its Pivot View, then establish the + Rules in the table below based on different rule Conditions. + Set the Value, Background color for the cells and Text + color for the cells. +
+
+
+
+ 
+ 
+
+ + Setup rules from 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. + Drag along the pivot cells to select the cells you want to apply + the rules on. +
+
+
+
+ 
+ 
+
+
+ + 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. +
+
+
+
+
+
+ 
+
+
+ + Related Products +
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ Our Services
++
+
+
+
+ 
+
+
+ + Odoo Customization +
+
+
+
+
+ 
+
+
+ + Odoo Implementation +
+
+
+
+
+ 
+
+
+ + Odoo Support +
+
+
+
+
+ 
+
+
+ + Hire Odoo Developer +
+
+
+
+
+ 
+
+
+ + Odoo Integration +
+
+
+
+
+
+ 
+
+
+ + Odoo Migration +
+
+
+
+
+ 
+
+
+ + Odoo Consultancy +
+
+
+
+
+ 
+
+
+ + Odoo Implementation +
+
+
+
+ 
+
+
+ + Odoo Licensing Consultancy +
+
+
+
+
+
+
+ Our Industries
++
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure and sell your products +
+
+
+
+
+ 
+
+
+ + POS +
++ Easy configuration and convivial experience +
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for educational management +
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and schedule your operations +
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile friendly, awe-inspiring product pages +
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of services and invoice +
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or restaurant methodically +
+
+
+
+
+ 
+
+
+ + Hotel Management +
++ An all-inclusive hotel management application +
+
+
+
+
+
+
+ Need Help?
++
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ +
+ + +