Highlight Date In Tabular Report - Not Entire Row

[kpcollier]

Hey all. I've been trying to tweak the workflow in this How To article to turn only the the text of the date red, not the entire row. Please see screenshot for example. Has anyone done this, or think they can help me out?

Thanks!

[George43]

@kpcollier Could provide me with exported copy of you Data Page?

[kpcollier]

7 hours ago, George43 said:

@kpcollier Could provide me with exported copy of you Data Page?

Here you go, George. In the DataPage, I'm trying to highlight "Date Created" after it turns 3 weeks old.

I appreciate your help.

CaspioData_2019-May-02_1043.zip

[DefinitelyNot31337]

Hi @kpcollier

 

Try this solution: 

 

1. Add a Calculated Field with a syntax similar to this one.

CASE 

WHEN DATEDIFF(day, [@field:date], '[@cbTimestamp]') >= 21
THEN 'Expired'

END

 

2. Add an HTML Block with this Syntax

<span custom-data="[@calcfield:1]">[@field:date*]</span>

 

3.) Easily style this HTML Markup in your Styles (CSS Rules). I'd suggest, in the header:

You can post this everywhere you want:

<style>

[custom-data="Expired"] {
background-color: red;
}

</style>

 

Hope this helps.

`DN31337!

[kpcollier]

Hey @DefinitelyNot31337, just coming back to this. 

I've got the calc field going. I am however having trouble with the HTML block and the CSS Rule:

Is the [@field:date*] in the html block suppose to be the same as the [@field:date] in the calculate field? Also, if so, are you hiding the calculated field, or is the HTML block and the Calc Field suppose to show up, both saying expired?

[DefinitelyNot31337]

Hi @kpcollier,

 

To answer your questions,

1.) It is NOT necessary for the [@field:date*] in the HTML Block, and [@field:date] in the Calculated Field to be the same

2.) In my post, I am NOT yet hiding the Calculated Field, but we can easily do so by sandwiching the Calculated Field in <table style="display: none;"> tag

 

Our main objective is for our HTML Block to produce this markup:

<span custom-data="Expired">I can be anything!</span>

 

Once we achieve this, we can style the <span> tags with the attribute custom-data="Expired" via CSS

<style>
  
[custom-data="Expired"] {
  background-color: red;
  color: orange;
  padding: 4px;
}
  
</style>

 

See this codepen sample, we're just simulating this in Caspio:

https://codepen.io/anon/pen/NZzBwj

 

Hope this makes sense.

 

Regards,

DN31337!