Stylized List Report

[pmcfarlain]

I'd like to make the format of my list report look nicer, how can I do this? Specifically, I'd like to be able to highlight every other row of data (not data cell) and align the labels and the data so that they are directly underneath each other.

Edit: Additionally, it would be nice if I could have conditional formatting on the data so that if it is below the goal, the text turns red and if it's at or above the goal the text turns green. The data cells are using calculated fields. Is there a way I can do this conditional formatting in an HTML block that references the calculated field?

[TellMeWhy]

37 minutes ago, pmcfarlain said:

I'd like to make the format of my list report look nicer, how can I do this? Specifically, I'd like to be able to highlight every other row of data (not data cell) and align the labels and the data so that they are directly underneath each other.

Edit: Additionally, it would be nice if I could have conditional formatting on the data so that if it is below the goal, the text turns red and if it's at or above the goal the text turns green. The data cells are using calculated fields. Is there a way I can do this conditional formatting in an HTML block that references the calculated field?

Something like this? 

 

If yes, I added <br /> at the end of each Label

On Header:

<style>

dd{
background-color:yellow;
}

</style>

dd is for the data, dt is for labels

 

Here's script for the conditional: from https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

<div id="visi[@field:UNIQUEID]"> </div>


<script>


if([@field:FIELDINNUMBER] < 10){
var isi = document.getElementById("visi[@field:UNIQUEID]");
isi.style.display = 'none';
isi.parentNode.parentNode.children[5].style.backgroundColor = 'red';
}



</script>

change children number, as well. I suggest putting the HTML block at the end. use ctrl shift c then count the elements under the <dl> starting from 0. Mine is the 6th child, so, it's 5

[TellMeWhy]

8 minutes ago, pmcfarlain said:

That's great, thank you! Do you know a way to align the results? I want the numbers to be in a column like they would on a tabular report. These are calculated fields.

 

it's not in a table form, so there's really no alignment here.

 

Dirty way : &nbsp;

 

or use style individually

dl > dt:nth-child(){
      margin-right:15px !important;
}

 

[pmcfarlain]

55 minutes ago, TellMeWhy said:

Something like this? 

 

If yes, I added <br /> at the end of each Label

On Header:

<style>

dd{
background-color:yellow;
}

</style>

dd is for the data, dt is for labels

 

Here's script for the conditional: from https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

<div id="visi[@field:UNIQUEID]"> </div>


<script>


if([@field:FIELDINNUMBER] < 10){
var isi = document.getElementById("visi[@field:UNIQUEID]");
isi.style.display = 'none';
isi.parentNode.parentNode.children[5].style.backgroundColor = 'red';
}



</script>

change children number, as well. I suggest putting the HTML block at the end. use ctrl shift c then count the elements under the <dl> starting from 0. Mine is the 6th child, so, it's 5

That's great, thank you! Do you know a way to align the results? I want the numbers to be in a column like they would on a tabular report. These are calculated fields.