Change the color of Table content

Yogesh Mude
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 20, 2020

We are using Jira macro for representing Jira filter results to the confluence in table format.

Now we want the table Resolution should show conditionally like..is the resolution is Done then it should in Green and if it's another like unresolved then it should show in Yellow like so on. 

 

image.png

I tried to search around his and found that i need to work on the user macro but i need help to how to get the table details and so on.

If anybody has gone through this before so throw some lights on it..so it will help me to get this done. 

1 answer

0 votes
Dominic Lagger
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 20, 2020

Hi @Yogesh Mude 

I see only the option with javascript in the user macro. You can't change the jira macro itself. With javascript you could then just scrape the html page and change the color of the table. This wouldn't be a problem. 

But, I see another problem. You have to wait till the jira macro is fully loaded, because it loads asynchronously. That means, you have to check internally, whether the table is loaded or not. There, my know how is limited. I would google something like "jquery wait until element exist".

Hope this helped a little bit.

Regards, Dominic

Yogesh Mude
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 20, 2020

HI @Dominic Lagger ,

Thanks for the response.

javascript you could then just scrape the html page and change the color of the table. This wouldn't be a problem.

I didn't get this can you elaborate or do you have some basic code for this.

It will help me a lot.

Dominic Lagger
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 20, 2020

The scraping is quite easy. This is just some sample code.

Find all status in the jira table (the status macro in the jira table has this class name):

document.getElementsByClassName("aui-lozenge aui-lozenge-subtle")

Then get and check the text

if (state[1].innerText) = 'TO DO') { ...

And finally set backgroundcolor in this row to red

state[1].parentNode.parentNode.style.backgroundColor = 'red'

And of course, all of this you have to do in a loop. 

But, the biggest problem you haven't solved. The asynchron load of the jira table.

Regards, Dominic

Yogesh Mude
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 21, 2020

HI @Dominic Lagger ,

Thanks for the response and the basic code.

Could you please let me know where do i need to write this code ...do i need to use the html macro?

Dominic Lagger
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 21, 2020

No. You have to write a user macro.

In that user macro you can insert HTML oder Javascript.

This is an untested and unverified sample code

## Macro title: My Macro
## Macro has a body: Y or N
## Body processing: Selected body processing option
## Output: Selected output option
##
## Developed by: My Name
## Date created: dd/mm/yyyy
## Installed by: My Name

## This is an example macro

// HERE IS THE CODE FOR CHECKING, WHETHER THE JIRA TABLE HAS LOADED
// IF LOADED, CALL THE MYFUNCTION

<script>
function myFunction() {
var state = document.getElementsByClassName("aui-lozenge aui-lozenge-subtle");
for (var i = 0; i < state.length; i++){
if (state[i].innerText) = 'TO DO') {
state[i].parentNode.parentNode.style.backgroundColor = 'red';
}
}
}
</script>

Regards, Dominic

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events