How to change the color of a cell based on the value in a cell

[khale]

Hello, 

I found this wonderful code (Color-Coding in DataPages - Caspio Online Help) that works beautifully, however, it only looks at one field.  I have two different fields in two differnt positions that I need the colors to change on.  So here is the code I have:

<script>

const colorToEvent = {
'Glenn Mercer': '#6AA6C8',
'Archie': '#B5F5F8',
'Angela': '#F6B3A2',
'Lorecel': '#F7FEB3',
'Leave': '#4B2EFA',
'Vacation': '#FD3A2B',
'Frances': '#7EC2BC',
'Tonie': '#60C277'
}

const setRelevantHeight = () => {
const elems = document.querySelectorAll('.cbResultSetPanelDataContainer');
let maxHeight = 0;
elems.forEach(elem => {
const newHeight = elem.offsetHeight;
maxHeight = newHeight > maxHeight ? newHeight : maxHeight;
})

document.querySelectorAll('dl dd:nth-of-type(3)').forEach(name => {
let eventType = name.innerHTML;

name.parentElement.parentElement.style = `background-color: ${colorToEvent[eventType]}; margin-bottom: 10px; border-radius: 10px; height: ${maxHeight + 'px'}`;
})
}

document.addEventListener('DataPageReady', setRelevantHeight)
window.addEventListener('resize', setRelevantHeight)

</script>

[@app:MainHomePage]

 

The "Leave" and "Vacation" field is in the TypeOfLeave field, order number 4 of the appointment type in the Calendar Wizard.   I need to reference 3 and 4 in the code.  Any ideas on how to do this?

 

Thanks

 

  

[CoopperBackpack]

Hello @khale,

As I understood from your description, the 4th field is the 'TypeOfLeave' and possible values are  "Leave" and "Vacation". Also, you need to consider the 3rd field that stores names. Is it correct? 

The code provided in the article colors the whole event depending on the value.
For example, the employee name = Lorecel, so the event (cell) is colored  yellow:

Since you have 2 values, it is good to understand the expected result. 

Let`s say 2 conditions are met. Do you want to color the 3rd and 4th fields separately?

[khale]

Thanks for your response Cooper!  Yes, that would be great!

[khale]

Hi Coopper, 

 

Just checking back in to see if you could help me with this. 

 

Thanks!

[CoopperBackpack]

Hello @khale,

I am still not sure that the expected result is like the one on the screenshot:

But if so, you can test the following code:

<script>

const colorEvent = {
   'Vacation': '#ff5a4b',
   'Leave': '#a79beb'
}

const colorEmployee = {
    'Glenn Mercer': '#6AA6C8',
    'Archie': '#B5F5F8',
    'Angela': '#F6B3A2',
    'Lorecel': '#F7FEB3',
    'Frances': '#7EC2BC',
    'Tonie': '#60C277'
}

const colorValues = () => {

    document.querySelectorAll('dd:nth-of-type(3)').forEach(employee => {
        let employeeName = employee.innerHTML;
        employee.style = `background-color: ${colorEmployee[employeeName]}; display: inline-block; padding: 3px; border-radius: 10px;`;
    })

    document.querySelectorAll('dd:nth-of-type(4)').forEach(event => {
        let eventName = event.innerHTML;
        event.style = `background-color: ${colorEvent[eventName]}; display: inline-block; padding: 3px; border-radius: 10px`;
    })

}

document.addEventListener('DataPageReady', colorValues)

</script>

 

[khale]

Thank you so much!  I tested your code, (THANKS AGAIN!) and the employee works but it does not work with the vacation and leave.   Those fields are not colored at all.  Also, can I keep the entire cell colored instead of just the name?

[khale]

Maybe a combination of the two?

 

<script>

const colorEvent = {
   'Vacation': '#ff5a4b',
   'Leave': '#a79beb'
}

const colorEmployee = {
    'Glenn Mercer': '#6AA6C8',
    'Archie': '#B5F5F8',
    'Angela': '#F6B3A2',
    'Lorecel': '#F7FEB3',
    'Frances': '#7EC2BC',
    'Tonie': '#60C277'
}

const setRelevantHeight = () => {

const elems = document.querySelectorAll('.cbResultSetPanelDataContainer');
let maxHeight = 0;
elems.forEach(elem => {
const newHeight = elem.offsetHeight;
maxHeight = newHeight > maxHeight ? newHeight : maxHeight;
})

const colorValues = () => {

    document.querySelectorAll('dd:nth-of-type(3)').forEach(employee => {
        let employeeName = employee.innerHTML;
        employee.style = `background-color: ${colorEmployee[employeeName]}; display: inline-block; padding: 3px; border-radius: 10px;`;
    })

    document.querySelectorAll('dd:nth-of-type(4)').forEach(event => {
        let eventName = event.innerHTML;
        event.style = `background-color: ${colorEvent[eventName]}; display: inline-block; padding: 3px; border-radius: 10px`;
    })

    document.querySelectorAll('dd:nth-of-type(5)').forEach(employee => {
        let employeeName = employee.innerHTML;
        employee.style = `background-color: ${colorEmployee[employeeName]}; display: inline-block; padding: 3px; border-radius: 10px;`;
    })

}
name.parentElement.parentElement.style = `background-color: ${colorToEvent[eventName]}; margin-bottom: 10px; border-radius: 10px; height: ${maxHeight + 'px'}`;
})
}

document.addEventListener('DataPageReady', setRelevantHeight)

window.addEventListener('resize', setRelevantHeight)

document.addEventListener('DataPageReady', colorValues)

</script>

[CoopperBackpack]

Hello @khale,

I am afraid I don`t understand the requirements. 

 The entire cell can be colored instead of just the name but I need to understand the condition to color the cell. 

Do you need to color the cell based on the employee's name or based on the type of leave? 

Could you provide more details about the expected result? 

Does this screenshot that I shared above display the expected result? 

The possible reason for the non-working code is referencing the incorrect element. Do you use HTML blocks on Calendar? The screenshot of the ' Configure Fields for Calendar' page can be helpful to troubleshoot the issue.

[khale]

Thanks again for your help! 

 The entire cell can be colored instead of just the name but I need to understand the condition to color the cell.  It highlights the entire cell in the original posted code.

Do you need to color the cell based on the employee's name or based on the type of leave? Both! If it's possible, I would like the entire cell to be highlighted with the employee and the type of leave to be highlighted separately.

Could you provide more details about the expected result? Sure! So, this calendar will be a reference calendar that will show what appts are scheduled for the day (employee) and if there is a person out, it will show who's out (type).  So the cell will be highlighted in the color scheme referenced in the code and the type will have the name highlighted.

Does this screenshot that I shared above display the expected result? It does show the part for vacation and leave.  The original code will still need to be there. 

The possible reason for the non-working code is referencing the incorrect element. Do you use HTML blocks on Calendar? The screenshot of the ' Configure Fields for Calendar' page can be helpful to troubleshoot the issue.  No html blocks, just placed in the footer.

Thanks again!

 

 

[khale]

If that's not possible, I will just go with the suggested sample you provided.  

[CoopperBackpack]

@khale,

Is it the expected result? So, the whole cell is highlighted based on the employee name, and the type of leave is highlighted separately.

I used this code:

<script>

const colorEvent = {
    'Vacation': '#ff5a4b',
    'Leave': '#a79beb'
 }
 
 const colorEmployee = {
     'Glenn Mercer': '#6AA6C8',
     'Archie': '#B5F5F8',
     'Angela': '#F6B3A2',
     'Lorecel': '#F7FEB3',
     'Frances': '#7EC2BC',
     'Tonie': '#60C277'
 }
 
 const setRelevantHeight = () => {
    const elems = document.querySelectorAll('.cbResultSetPanelDataContainer');
    let maxHeight = 0;
    elems.forEach(elem => {
    const newHeight = elem.offsetHeight;
    maxHeight = newHeight > maxHeight ? newHeight : maxHeight;
 })
 
 document.querySelectorAll('dl dd:nth-of-type(3)').forEach(employee => {
    let employeeName  = employee.innerHTML;
    employee.parentElement.parentElement.style = `background-color: ${colorEmployee[employeeName]}; margin-bottom: 10px; border-radius: 10px; height: ${maxHeight + 'px'}`;
    })

 document.querySelectorAll('dl dd:nth-of-type(4)').forEach(event => {
    let eventName  = event.innerHTML;
    event.style =  `background-color: ${colorEvent[eventName]};  padding: 3px; border-radius: 10px;`;
 })
 
 }
 
 document.addEventListener('DataPageReady', setRelevantHeight)
 window.addEventListener('resize', setRelevantHeight)
</script>

It should work fine with highlighting the type of leave if you have a label for this field.

If there is no label I need to check the options further. 

[khale]

Yes1

[khale]

Sorry, hit enter too soon!  Yes, that is the expected result!  I am trying this now!

Thanks again!

 

[khale]

Ok, I tried the code.  It is not highlighting any of the type fields.  Am I to put it in a html block or leave it in the  footer?  Yes, all fields have labels...

[CoopperBackpack]

@khale, the code should be added to the Footer. 

Please provide the screenshot of the ' Configure Fields for Calendar' page to see the possible cause of the issue. 

Is the 'Enable responsive' option enabled on your DataPage?

[khale]

Yes, sure!  Here it is.

[khale]

It is added to the footer...here it is.

[CoopperBackpack]

Hello @khale,

1) Could you check if the values used in the script are correct? I mean the names of the employees. Do you store in the 'Case_Manager' fields values like Archie, Angela, Lorecel, etc.? These names are used in the condition. If they are not correct, the condition is never met.

2) As I can see on your screenshot, for the 'LeaveType' field the 'Continue next element on the same line' checkbox is checked. There is a comma after the field name that shows that this option is enabled. This means that a non-breaking space is added to the values of the  'LeaveType' field. For example, it is not just 'Vacation' but 'Vacation&nbsp;' This should be considered in the script.

3) On your screenshot I see the incorrect code version in the Footer. Please make sure that you copied the correct version:

<script>

const colorEvent = {
    'Vacation': '#ff5a4b',
    'Leave': '#a79beb'
 }
 
 const colorEmployee = {
     'Glenn Mercer': '#6AA6C8',
     'Archie': '#B5F5F8',
     'Angela': '#F6B3A2',
     'Lorecel': '#F7FEB3',
     'Frances': '#7EC2BC',
     'Tonie': '#60C277'
 }
 
 const setRelevantHeight = () => {
    const elems = document.querySelectorAll('.cbResultSetPanelDataContainer');
    let maxHeight = 0;
    elems.forEach(elem => {
    const newHeight = elem.offsetHeight;
    maxHeight = newHeight > maxHeight ? newHeight : maxHeight;
 })
 
 document.querySelectorAll('dl dd:nth-of-type(3)').forEach(employee => {
    let employeeName  = employee.innerText;
    employee.parentElement.parentElement.style = `background-color: ${colorEmployee[employeeName]}; margin-bottom: 10px; border-radius: 10px; height: ${maxHeight + 'px'}`;
    })

 document.querySelectorAll('dl dd:nth-of-type(4)').forEach(event => {
    let eventName  = (event.innerText).trim();
    event.style =  `background-color: ${colorEvent[eventName]};  padding: 3px; border-radius: 10px;`;
 })
  
 
 }
 
 document.addEventListener('DataPageReady', setRelevantHeight)
 window.addEventListener('resize', setRelevantHeight)

</script>

As you can see the code works on my side. 

[khale]

Got it to work!  I had the "hide if blank" feature on.   Turned it off and alls well!  Thank you so much for your help!  I immensely appreciate it!

 

Have a great day!