Change <td> background color based on value in QueryString?

[SaraK]

Hello, 

I have for a long time been successfully using the following code to change the background-color in a hard-coded table that is embedded in a Calendar view. In this example, every time the initials "JJ" appear in a <td> tag on the calendar, it changes the background color of that <td> field to yellow to indicate she is the one Notary on staff, thus making it easy for everyone to find her on the schedule and know if a notary is available to help someone. 

<SCRIPT LANGUAGE="JavaScript">
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML=="JJ")  { elems[i].style.background="yellow";}
}
</SCRIPT>

Is there a way to change the value from a static one ("JJ" in this example)

if (elems[i].innerHTML=="JJ")

and to, instead, have it insert the value of the querystring in the URL?  My hope (for a different project) is to have it dynamically change the background of <td> fields whose value matches the value of the query string.

For example, when I want the initials "JPL" to be highlighted, the url would fall in this pattern: 

 https://my.url.com/?h=JPL 

and it would know to insert "JPL" into the place where "JJ" currently appears in my first code example. That way, rather than needing to use 28 datapages for 28 employees' initials to be highlight-able in the schedule, I can use one datapage and just have a menu with the custom links containing their initials in the query string. Then, when someone clicks on their own initials, they are highlighted in the schedule. (I know there is documentation for doing something like this if I use the Tabular Results in Caspio; but that will not create a workable end-product that's easily viewable. After years of testing, having a hardcoded table in an HTML block with a Calendar view is by far our best option.)

Currently we just use CTRL+F to highlight our own initials; but many staff only look at the schedule on their phone now when checking from home, so that's not an option. Back when the schedule was *completely* hard-coded, I had different JavaScript that worked; but it does not work in Caspio. 

[Barry]

Yes. You can use JavaScript to get the value in a parameter and use it in your If block.

There are multiple ways to achieve that, but I would use the URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams as in this forum post: 

Once you have the parameter in a JavaScript variable, then you should be able to use it in the if that sets the background or the style like in the script that you mention.

[SaraK]

Thank you! I will take a look and try implementing. I appreciate your suggestion and your time. 

[CoopperBackpack]

Hello @SaraK,

As far as I understood the workflow:

- There is a table added in the HTML block of the Calendar DataPage.

- One of the cells in this table includes initials. 

- There can be initials of multiple users on one DataPage and only their own initials should be highlighted. 

Is it correct?  If not, please clarify where the table is embedded (for example, in the Header of the Calendar DataPage).

Is the DataPage password-protected so the users should log in? 

[SaraK]

Hello @CoopperBackpack, 

Yes, I believe you are understanding the workflow. The cells of the table (in the HTML block in a Calendar) includes a field for initials. The Datapage is not password protected. I have included a snip of a week in the calendar and then a larger snip of a day as an example of what the schedule looks like.

[CoopperBackpack]

Hello @SaraK,

Thank you for the screenshots.

You may test the idea that you suggested.

1) To add links to the Header. Each link is the same webpage URL with hard-coded parameters.

For example:

<a href="https://yourpageURL?initials=JJ">JJ</a>

<a href="https://yourpageURL?initials=SK">SK</a>

Actually, the link text can be the full name.

 

2) In the code replace the initials with the parameter name. In my example parameter name is initials.

So, in the code it will be:

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
       if (elems[i].innerHTML=="[@initials]")  { elems[i].style.background="yellow";}
}
</script>

If you have further questions, feel free to ask. 

[SaraK]

@CoopperBackpack, 

Oh my gosh, this is a beautiful solution that works wonderfully! Thank you so much.

 

I need to add an "else" statement so the background is transparent when there are no initials set as a parameter in the url (e.g., what staff see when they just load the calendar without clicking on their initials. Here is what it currently looks like with no parameter passed in the URL:

 

I tried this, but the yellow in all the empty <td> cells was still there:  

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
       if (elems[i].innerHTML=="[@initials]")  { elems[i].style.background="yellow";}
  else if (elems[i].innerHTML!=null)  { elems[i].style.background="transparent";}
}
</script>

 

then I just changed style.background to style.backgroundColor in case that was the only tweak it needed (just to test and be sure):

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
       if (elems[i].innerHTML=="[@initials]")  { elems[i].style.background="yellow";}
  else if (elems[i].innerHTML!=null)  { elems[i].style.backgroundColor="transparent";}
}
</script>

Then I left an open 'else' statement:

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
       if (elems[i].innerHTML=="[@initials]")  { elems[i].style.background="yellow";}
  else { elems[i].style.background="transparent";}
}
</script>

Then I realized I was missing brackets. When I tried this, then the yellow background disappeared for the empty <td> cells; however, the initials parameter no long worked when I added them into the URL: 

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
       if (elems[i].innerHTML=="[@initials]")  { elems[i].style.background="yellow";}
}
{
  else if (elems[i].innerHTML!=null)  { elems[i].style.backgroundColor="transparent";}
}
</script>

When I tried explicitly stating the URL, same thing happend (no yellow background in empties but ALSO not in the initials when passing the parameter in the URL:

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
       if (elems[i].innerHTML=="[@initials]")  { elems[i].style.background="yellow";}
}
{
  else if (elems[i].innerHTML=="https://TheRealURLWasHere")  { elems[i].style.backgroundColor="transparent";}
}
</script>

Would you have a final recommendation for how I can write my ELSE statement correctly so no parameter doesn't apply a background color; but when there is a parameter it still works? 

Worst case scenario, I will just send everyone their personalized link to bookmark on their computer and in their phone and that will work out fine

[SaraK]

@CoopperBackpack

Actually, it just occurred to me that I can make the main calendar link include "none" as the value for an initial and it will give me what I want:

https://yourpageURL?initials=none

[CoopperBackpack]

Thank you for sharing the final solution!