Conditionally change background color for a virtual field on a details page

[dalewilson]

I have a need to change the background color of a virtual field on a details datapage.  The field setting the condition is: EMR_Color_Ind.  The data in the field will be 1, 2 or 3.  I need different colors associated with each setting for the same virtual field.  I have not been able to find anything within the community on how to do this.  Assistance would be welcome.

Many thanks.

[RuisiHansamu]

Hi Dale, I believe you could start checking out Caspio's online help first and this might help you out with your question. This is from the online help center as well. They provide articles with their Standard features (Common and Advanced customization). Feel free to check them out here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/ 

I also went through one of these forum posts that is similar to your workflow: 

 and 

This helped me on my end and I hope this helps you out as well. Cheers mate.  

[dalewilson]

Thanks for the response.  I am familiar with the capabilities for changing the color conditionally on rows on a results page.  We use it in a number of places on our app.  It's great. This problem isn't for a results page.  It is to change the background color for a single virtual field on a details page, which requires a different solution.  I was hoping someone might have encountered a similar problem and can offer guidance on a solution.  Many thanks for your response.

[CoopperBackpack]

Hello @dalewilson,

It should be possible with JavaScript. To suggest, please specify the Form Elements for these fields.

Is the 'EMR_Color_Ind' field set to the Display Only? Is the Virtual field set to the Text field as on the screenshot?

[dalewilson]

I plan on making the "EMR_Color_Ind" a hidden field, and plan for the virtual field to be display only.  We can change the virtual field to a text field if need be.

Many thanks for your question!

[CoopperBackpack]

Hello @dalewilson,

I tested this script on the Details DataPage with the EMR_Color_Ind field that is set to hidden and the Virtual 1 field that is set to Display only. 

Please add this script to the Footer, disable the HTML editor on the Advanced tab before pasting. 

Also, please change the cbParamVirtual1 in the code below to the cbParamVirtual2, etc.  if the field number is different.

Replace the colors in the script, for example, you may use any HEX color like #155155 instead of blue, green yellow.

<script>
  document.addEventListener('DataPageReady', applyColorHandler);
  
  function applyColorHandler() {
    let conditionField = document.querySelector("#EditRecordEMR_Color_Ind");
  
    let virtualField = document.querySelector("div[data-cb-cell-name*='cbParamVirtual1']").nextElementSibling;
  
      if(conditionField.value == 1){
        virtualField.style.backgroundColor = 'blue';
      }
      else if(conditionField.value == 2){
        virtualField.style.backgroundColor = 'green';
      }
      else if(conditionField.value == 3){
        virtualField.style.backgroundColor = 'yellow';
      }
     };

</script>

Feel free to update the thread if you have further questions.

[dalewilson]

On 4/5/2022 at 12:54 PM, CoopperBackpack said:

Hello @dalewilson,

I tested this script on the Details DataPage with the EMR_Color_Ind field that is set to hidden and the Virtual 1 field that is set to Display only. 

Please add this script to the Footer, disable the HTML editor on the Advanced tab before pasting. 

Also, please change the cbParamVirtual1 in the code below to the cbParamVirtual2, etc.  if the field number is different.

Replace the colors in the script, for example, you may use any HEX color like #155155 instead of blue, green yellow.

<script>
  document.addEventListener('DataPageReady', applyColorHandler);
  
  function applyColorHandler() {
    let conditionField = document.querySelector("#EditRecordEMR_Color_Ind");
  
    let virtualField = document.querySelector("div[data-cb-cell-name*='cbParamVirtual1']").nextElementSibling;
  
      if(conditionField.value == 1){
        virtualField.style.backgroundColor = 'blue';
      }
      else if(conditionField.value == 2){
        virtualField.style.backgroundColor = 'green';
      }
      else if(conditionField.value == 3){
        virtualField.style.backgroundColor = 'yellow';
      }
     };

</script>

Feel free to update the thread if you have further questions.

Thanks so much for your assistance.  I very much appreciate it.  I followed your directions, pasted the code into the footer and made the adjustments you stated.  Sadly, it didn't produce the expected results.  The background color didn't change. No color appeared.  Here's the modified code in the footer:

<script>
  document.addEventListener('DataPageReady', applyColorHandler);
  
  function applyColorHandler() {
    let conditionField = document.querySelector("#EditRecordEMR_Color_Ind]");
  
    let virtualField = document.querySelector("div[data-cb-cell-name*='cbParamVirtual2']").nextElementSibling;
  
      if(conditionField.value == 1){
        virtualField.style.backgroundColor = '#FF0000';
      }
      else if(conditionField.value == 2){
        virtualField.style.backgroundColor = '#FFFF00';
      }
      else if(conditionField.value == 3){
        virtualField.style.backgroundColor = '#008000';
      }
     };

</script>

 

Note the virtual field name was changed to "2" as that was the field that was used.  I replaced the colors with hex#s.  I confirmed that data in the EMR_Color_Ind field was being produced, and it was.  Wondering if I failed to do something.  Again, really appreciate your effort.  Any thoughts would be valued.

Thanks.

Dale Wilson

[CoopperBackpack]

Hello @dalewilson,

As I see, the bracket is redundant in this line of code:

The correct variable is:    let conditionField = document.querySelector("#EditRecordEMR_Color_Ind");

Please test if this helps to receive an expected result.

[dalewilson]

On 4/8/2022 at 7:22 AM, CoopperBackpack said:

Hello @dalewilson,

As I see, the bracket is redundant in this line of code:

The correct variable is:    let conditionField = document.querySelector("#EditRecordEMR_Color_Ind");

Please test if this helps to receive an expected result.

Hi CoopperBackpack,

Thanks for the reply.  I made the change but did not get the expected result.  Still no change of the background color.  Still white.  So I've seen posts in other areas where fields inserted into javascript needed to be completed using the insert field tool.  I'm also wondering if it wouldn't be easier to not have the EMR_Color_Ind field in the DataPages.  That field is modified via a trigger.  It doesn't need to be on the datapage at all.  Also wondering if we should use a regular field for the result instead of a virtual field.

I very much appreciate your thoughts and time.  I have a strong IT background but on the management side.  I understand data relationships but I don't code, which is why I love Caspio because I can do so much of what I want while I maintain a code deficit knowledge base.  Your assistance is very much appreciated.

[Volomeister]

Hi Dale,

I noticed a couple of things that might help when changed to achieve your goal.

Modify the conditionField and virtualField variables:

 let conditionField = document.querySelector("[id*=EditRecordEMR_Color_Ind]")
 let virtualField = document.querySelector("[id*=cbParamVirtual]");
Also, do not make it as display only (this will be done programmatically)

So the entire script should look like this:
 

<script>
  document.addEventListener('DataPageReady', applyColorHandler);
  
  function applyColorHandler() {
    let conditionField = document.querySelector("[id*=EditRecordEMR_Color_Ind]")
  
     let virtualField = document.querySelector("[id*=cbParamVirtual]");
  	virtualField.setAttribute('disabled', true)
      if(conditionField.value == 1){
        virtualField.style.backgroundColor = '#FF0000';
      }
      else if(conditionField.value == 2){
        virtualField.style.backgroundColor = '#FFFF00';
      }
      else if(conditionField.value == 3){
        virtualField.style.backgroundColor = '#008000';
      }
     };

</script>

You can see this solution here: https://c7eku786.caspio.com/dp/7f80b00054b4142f9620438fbc31 

If it didn't work, you could share a link to your datapage, so it will be easier to check what is going on there.

[futurist]

Hi @dalewilson,

You can use the following script:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    
if(document.querySelector("div[class*='cbFormBlock4'] span").innerHTML == 1){
document.querySelector("input[id='cbParamVirtual1']").style.background = "red";
}
else if(document.querySelector("div[class*='cbFormBlock4'] span").innerHTML == 2){
document.querySelector("input[id='cbParamVirtual1']").style.background = "blue";
} 
else if(document.querySelector("div[class*='cbFormBlock4'] span").innerHTML == 3){
document.querySelector("input[id='cbParamVirtual1']").style.background = "yellow";
}

});
</script>

 

where cbFormBlock4 is the class field of the field you need to get the value of, and cbParamVirtual1 is the virtual field whose background you want to change. Make sure to change these with the respective class/ID of the fields in your form. You can determine their class/ID by inspecting their element

[dalewilson]

On 4/11/2022 at 1:05 PM, Volomeister said:

Hi Dale,

I noticed a couple of things that might help when changed to achieve your goal.

Modify the conditionField and virtualField variables:

 let conditionField = document.querySelector("[id*=EditRecordEMR_Color_Ind]")
 let virtualField = document.querySelector("[id*=cbParamVirtual]");
Also, do not make it as display only (this will be done programmatically)

So the entire script should look like this:
 

<script>
  document.addEventListener('DataPageReady', applyColorHandler);
  
  function applyColorHandler() {
    let conditionField = document.querySelector("[id*=EditRecordEMR_Color_Ind]")
  
     let virtualField = document.querySelector("[id*=cbParamVirtual]");
  	virtualField.setAttribute('disabled', true)
      if(conditionField.value == 1){
        virtualField.style.backgroundColor = '#FF0000';
      }
      else if(conditionField.value == 2){
        virtualField.style.backgroundColor = '#FFFF00';
      }
      else if(conditionField.value == 3){
        virtualField.style.backgroundColor = '#008000';
      }
     };

</script>

You can see this solution here: https://c7eku786.caspio.com/dp/7f80b00054b4142f9620438fbc31 

If it didn't work, you could share a link to your datapage, so it will be easier to check what is going on there.

Hi Volomeister,

I applied your code, assumed I should change "virtual" to "virtual2" and did not get the expected result.  Must be something in my page.  I use javascript in other areas to do conditional formatting on rows in a results page, but I have not applied it to a field.  I really appreciate your thoughts.  

Thanks.

Dale Wilson

[dalewilson]

21 hours ago, futurist said:

Hi @dalewilson,

You can use the following script:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    
if(document.querySelector("div[class*='cbFormBlock4'] span").innerHTML == 1){
document.querySelector("input[id='cbParamVirtual1']").style.background = "red";
}
else if(document.querySelector("div[class*='cbFormBlock4'] span").innerHTML == 2){
document.querySelector("input[id='cbParamVirtual1']").style.background = "blue";
} 
else if(document.querySelector("div[class*='cbFormBlock4'] span").innerHTML == 3){
document.querySelector("input[id='cbParamVirtual1']").style.background = "yellow";
}

});
</script>

 

where cbFormBlock4 is the class field of the field you need to get the value of, and cbParamVirtual1 is the virtual field whose background you want to change. Make sure to change these with the respective class/ID of the fields in your form. You can determine their class/ID by inspecting their element

Hi Futurist,

So, while I am well versed in Caspio, coding isn't something I do.  When you say class/id, do mean inserting a field.  For example, cbFormBlock4 would be replaced with [@field:ERM_Color_Ind].  Or is there more to it then that?

Many thanks for your thoughts.

Dale Wilson

[kpcollier]

On 4/12/2022 at 1:42 PM, dalewilson said:

Or is there more to it then that?

It is more than that. I highly recommend doing a short review on HTML and CSS, a lot of it is really quite simple. Also, look up DevTools.

Devtools are insanely helpful with Caspio. One way to get to Devtools is by right-clicking on the webpage and selecting 'Inspect'. Next, you'll want to click on the Element Inspector button, which is on the top left of the Devtools bar (it looks like a square with a cursor on it, on Chrome). Once you click that button, you can click on the element (text box, image, paragraph, dropdown, all of these are elements) you want to inspect. Devtools will highlight the HTML regarding the element in the Devtools bar. Here you should be able to find the Class or ID that is being used for it.

Classes and IDs are generally used for styling elements via CSS, but there are many other uses for it too, including using IDs to select a specific element to use in Javascript, or using Classes to select a specific group of elements. 

In your situation above, 'class' is being used to select the cbFormBlock element from your form. cbFormBlock doesn't come from your table fields or anything - it is used by Caspio to build the actual form layout. So, to me, it looks like Futurist is trying to select the container block that your specific field falls in. Then, looking inside that block to see what value is inside of it, and changing the background color depending on that value. 

 

You should try Devtools on your page. Use the element selector and click on the field you want to change the background color of, and see which cbFormBlock it is sitting inside of. Then, change the number on Futurists' code 'cbFormBlock4' to whatever number cbFormBlock your element is in. 

 

[futurist]

1 hour ago, dalewilson said:

Hi Futurist,

So, while I am well versed in Caspio, coding isn't something I do.  When you say class/id, do mean inserting a field.  For example, cbFormBlock4 would be replaced with [@field:ERM_Color_Ind].  Or is there more to it then that?

Many thanks for your thoughts.

Dale Wilson

Hi Dale,

you would have to replace the cbFormBlock4 with whatever is the class name of the field whose value you are trying to check. For you to do this:

1. Edit your DataPage, hit Preview.

2. On the Preview screen, point to the value of the EMR Color Ind, move over your pointer a bit to the right (do not point on the actual value), hit right click on your mouse, and select Inspect

3. You will be redirected to the elements screen, and you will see the element highlighted, like so:

You'll notice that in my example, I got "cmFormBlock4". So whatever is the class name you get, use that on the script I provided.

 

Let me know if you were able to figure this out.

 

 

[dalewilson]

Thanks to everyone who has contributed to this entry.  I have found a solution to this issue.  Thanks for your time and energy.

[Kurumi]

Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS.

You can insert this in the Header:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

</style>

If you have more conditions or other fields, you can use this:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"])  {
  color: #29be25;
}
</style>

Hope it helps!

[Kurumi]

 Hi! You can also use this CSS code in other Form Elements:

Text Field and Email

<style>
input[name="InsertRecordFIELDNAME"][value="Active"] {
  color: green;
}
</style>

Display-Only field

<style>
span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) {
  color: green;
}
</style>