User Macro: Conditional formatting / share function and watch does not work / other improvements

[Gerrit Berberich]

I actually wanted to post the user macro and question here but I'm not able to: https://confluence.atlassian.com/display/DISC/Shared+User+Macros

Own developed User Macro: Conditional formatting

This user macro should work similar to excel feature "conditional formatting" of columns and is an improvement of Project Status Lozenge.

You have an option to choose between colouring, showing symbol or both based on percentage values in a column. In editing you won't be able to see the formatting. This will only apply in view modus.

Here is the coding:

User Macro:

## Macro Name: conditional-formatting
## Macro title: conditional formatting
## Category: Confluence Content
## Macro Bodty Processing: No macro body
## Developer: Gerrit
## Date: 31.01.2018
## @param Value:title=Display Type|type=enum|enumValues=colour,symbol,both|default=both|desc=Choose your favourite status display type


<script type="text/javascript">
var style= '$paramValue';

AJS.toInit(function()
{ 
AJS.$("td:contains('0%')").filter(function(){return $(this).text() == '0%';}).addClass(style+'blueBG'); 
AJS.$("td:contains('1%')").filter(function(){return $(this).text() == '1%';}).addClass(style+'blueBG'); 
...
AJS.$("td:contains('25%')").filter(function(){return $(this).text() == '25%';}).addClass(style+'redBG'); 
...
AJS.$("td:contains('44%')").filter(function(){return $(this).text() == '44%';}).addClass(style+'orangeBG'); 
...
AJS.$("td:contains('50%')").filter(function(){return $(this).text() == '50%';}).addClass(style+'orangeBG'); 
...
AJS.$("td:contains('98%')").filter(function(){return $(this).text() == '98%';}).addClass(style+'greenBG'); 
AJS.$("td:contains('99%')").filter(function(){return $(this).text() == '99%';}).addClass(style+'greenBG'); 
AJS.$("td:contains('100%')").filter(function(){return $(this).text() == '100%';}).addClass(style+'greenBG'); 

});


</script>

• I know it's not nice programming and I would like to have an query like from 1% <= 20% show this color. How do I need to modify coding? 

Stylesheet:

/* Style for User Macro */
/* parameter both colour and symbol */

 .bothblueBG { 
background-color: #DDF2FF;
background-image: url('');
background-repeat: no-repeat;
background-position:right center; 
background-size: 28px 28px;
} 


 .bothredBG { 
background-color: #FFE6E5;
background-image: url('');
background-repeat: no-repeat;
background-position:right center; 
background-size: 28px 28px; 
} 

/* parameter colour only */

 .colourblueBG { 
background-color: #DDF2FF;
} 

/* parameter symbol only */

 .symbolblueBG { 
background-image: url('');
background-repeat: no-repeat;
background-position:right center; 
background-size: 28px 28px;
} 

 .symbolredBG { 
background-image: url('');
background-repeat: no-repeat;
background-position:right center; 
background-size: 28px 28px; 
} 

• I also know that css can be improved so i don't need to duplicate classes. someone able to help? (!)
  
• One issue I currently face is that after adding the marco I'm not able to share or watch this page. I suppose it's somehow related to my scrip. Any suggestions to solve this issue? (!)
  
  

Thanks

[Peter Florijn]

Did you manage to develop this further ?

I need this functionality as well.

Can offer some test support.