Hello!
I have a livetable application and I would like to color certain rows in a specific colour, based on a selected value in one of the properties (static list).
Is it possible?
I thought it might be possible by entering some code in the corresponding “custom display” box of the “static list” property, but I am not sure about the way it could be done.
Thanks for any hint!
Hello @PGISSN,
With Livetable, I don’t have an easy answer in mind.
With Live Data it can get slightly easier.
For instance, the CSS below will highlight with a (questionable) red background all the rows corresponding to images.
#docAttachments table tr:has([data-title="Type"] [data-type="image/png"]) {
background-color: #f00;
}
For the rest, it depends on your use case as, for instance, CSS selectors currently do not allow for comparison operator (i.e., it’s currently not possible to select all rows with a file size larger than X bytes).
Thanks!
Why would there be a difference between livetable and live data? I already added successfully css properties to the livetable, does it mean that for some reason the “has” condition based on cell content cannot work?
I might have jumped to conclusion a bit fast here. If you can find enough data in the DOM of your Livetable to define you CSS, then that’s great news.
OK! In the meantime I have learned that css cannot in fact test the text content of cells (you can do it in Selenium context but not anywhere else) for various good reasons.
So the only way would be to add a “data-attribute” to the cell, replicating the text content, for instance :
<td data-gender="male">male</td>
Would this be possible to produce this output, based on the value selected by the user in the static list?
I think something related to it could be an experiment we started some months ago. I’ve had no time lately to come back to it, but I would like to as soon as possible. This page is publicly available:
I’m also adding a snapshot for any further reference if it becomes unavailable:
We use conditional CSS to format the background of the heading boxes and items based on its contents. Currently, the XWiki.JavaScriptExtension reads:
setTimeout(changeStyles, 1000);
function changeStyles() {
const titleElements = document.getElementsByClassName('kanban-item-title');
const headerElements = document.getElementsByClassName('kanban-board-header');
const titleContainers = document.getElementsByClassName('kanban-item');
const kanbanContainer = document.querySelector('.kanban-container');
if (kanbanContainer) {
kanbanContainer.style.display = "flex";
kanbanContainer.style.justifyContent = "left"
kanbanContainer.style.alignItems = "start"
kanbanContainer.style.flexWrap = "wrap"
}
for (let i = 0; i < titleElements.length; i++) {
const titleElement = titleElements[i];
titleElement.style.padding = "2px 4px";
titleElement.style.borderRadius = "4px";
if (titleElement.textContent.includes('- J')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#4A8E0D';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#4A8E0D';
}
}
if (titleElement.textContent.includes('- S')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = 'navy';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = 'navy';
}
}
if (titleElement.textContent.includes('- P')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#E96744';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#E96744';
}
}
if (titleElement.textContent.includes('- E')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#D8C63E';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#D8C63E';
}
}
if (titleElement.textContent.includes('NUCL')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#E2725B';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#708090';
}
}
if (titleElement.textContent.includes('GRWA')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#FF00FF';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#F4C430';
}
}
if (titleElement.textContent.includes('NEXT')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#4B0082';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#E0115F';
}
}
if (titleElement.textContent.includes('LACC')) {
titleElement.style.color = 'white';
titleElement.style.backgroundColor = '#87CEEB';
const parentElement = titleElement.closest('.kanban-item');
if (parentElement) {
parentElement.style.backgroundColor = '#98FF98';
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (/rDT/g.test(element.innerHTML)) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#eaec6b';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (/rDD/g.test(element.innerHTML)) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#d7d949';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('o01')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fdb4a';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('staff')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('Master')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('Summer')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('Neutron')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('Emeritus')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('Postdocs')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('Students')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#7fbbda';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('o12')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#f199ed';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('o30')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#f199ad';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('SR07')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#ff0000';
break;
}
}
}
}
for (let i = 0; i < headerElements.length; i++) {
const element = headerElements[i];
if (element.innerHTML.includes('space')) {
for (let j = 0; j < element.classList.length; j++) {
if (/kanban-header-\w+/.test(element.classList[j])) {
element.classList.remove(element.classList[j]);
element.style.backgroundColor = '#d2d9dd';
break;
}
}
}
}
};
We hope it could help!
Thank you very much! This is indeed a “classy” experiment…
I finally managed to obtain the desied result through the “custom display” box of the property (I add an icon which in turn can be detected at the level of the tr which triggers of change of display of the whole row).
A bit clunky, but it works!
Thanks again for sharing your results.