Change the color of Table content
Asked by Yogesh Mude:

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](/t5/image/serverpage/image-id/83759i1AA5B1B124BF4F0C/image-size/large?v=v2&px=999 "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.


Answers:
author: Dominic Lagger
body: Hi [@Yogesh Mude](/t5/user/viewprofilepage/user-id/3551575)

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

comments: author: Yogesh Mude
body: HI [@Dominic Lagger](/t5/user/viewprofilepage/user-id/601600) ,

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.


author: Dominic Lagger
body: 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


author: Yogesh Mude
body: HI [@Dominic Lagger](/t5/user/viewprofilepage/user-id/601600) ,

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?


author: Dominic Lagger
body: No. You have to write a user macro.

In that user macro you can insert HTML oder Javascript.

* [Confluence User Macro Guide](https://developer.atlassian.com/server/confluence/confluence-user-macro-guide/)
* [Writing User Macros](https://confluence.atlassian.com/doc/writing-user-macros-4485.html)

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


Tags: confluence-server

server

style

table

user-macro