# Change cell color based on time

**URL:** <https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [October 20, 2023, 6:38pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781 "2023-10-20T18:38:08Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 6:38pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/1 "2023-10-20T18:38:08Z")

</div>

I'm trying to change the background color of a cell depending on its relation to a time in another cell, if has no time want the cell to be yellow, if its the same time or before want it to be green, if its after the time want it to be red.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 20, 2023, 6:40pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/2 "2023-10-20T18:40:40Z")

</div>

You need to tag your question as Perspective or Vision. The solution will be different for each.

What have you tried and where are you stuck?

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 6:41pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/3 "2023-10-20T18:41:55Z")

</div>

Perspective

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 6:43pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/4 "2023-10-20T18:43:11Z")

</div>

![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/61929fa13a72419a958859f6a0f196de8d628ec6.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 20, 2023, 6:49pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/5 "2023-10-20T18:49:19Z")

</div>

> [@Brad\_Mills](#):
>
> Perspective

Please add the tag. Use the 🖉 edit link beside your question title and select Perspective from the dropdown.

You say that you wish to compare times (presumably date-time) but your expression shows that you are comparing dataQuality and text. Do those components hold timestamp values or what?

Tip: post code rather than pictures of code so we can copy it into our expression editor, etc., and our answers.

> [@Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831):
>
> This thread is intended as a short help file for all those struggling to post formatted code on the forum. Posting formatted code on the forum (and most others) is as simple as selecting the code and pressing the \</\> button. It works the same as applying Bold or Italic styles to your document. It preserves indentation and applies syntax highlighting. [How to post code]

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 20, 2023, 6:52pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/6 "2023-10-20T18:52:25Z")

</div>

That's a screenshot from Vision back in a version of 7? Are you sure you're looking for advice in Perspective?

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 6:53pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/7 "2023-10-20T18:53:47Z")

</div>

Sorry, yes, its vision version 7.

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 6:59pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/8 "2023-10-20T18:59:00Z")

</div>

![Capture1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/96baf6b4b69d3e841b6d49178d846a38423ebbd7.png)

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 7:05pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/9 "2023-10-20T19:05:00Z")

</div>

![Capture1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a993205dd67eab9bf9b95eb1be27a24fc31aee6.png)  
Want the cell with blue circle to change colors depending on its relation to the red circle cell.

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 7:05pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/10 "2023-10-20T19:05:36Z")

</div>

Sorry have the colors backwards.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 20, 2023, 7:06pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/11 "2023-10-20T19:06:13Z")

</div>

You should be using dateIsAfter or dateIsBefore to check the values of the relavent dates in your components

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 20, 2023, 7:08pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/12 "2023-10-20T19:08:25Z")

</div>

... provided that they are datetime and not bits of text. (You didn't respond to my question about that and that's going to make it difficult for folks to help you.)

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 7:12pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/13 "2023-10-20T19:12:03Z")

</div>

The time that shows up is input by the user and the empty cell gets the time by pressing a button that is associated with the current time.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 20, 2023, 7:26pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/15 "2023-10-20T19:26:01Z")

</div>

I would be storing the hh and mm into custom properties on the component (or in tags). Then I would construct a date object in an expression binding on another custom property with:

```auto
try(setTime(now(), {hour prop}, {min prop}, 0), None) 

```

Then in your bg expression you can use:

```auto
case(true
  ,isNull({value from above prop}), color(...) 
  ,dateIsBefore(now(), {value from above prop}, color(...) 
  ,dateIsAfter(...), color(...) 
, color(...) 
) 

```

Forgive the brevity... It's hard to type code on a phone

---

<div class="post-metadata">

**Author:** ![Brad\_Mills](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@Brad\_Mills](https://forum.inductiveautomation.com/u/Brad_Mills)\
**Post date:** [October 20, 2023, 7:33pm UTC](https://forum.inductiveautomation.com/t/change-cell-color-based-on-time/80781/16 "2023-10-20T19:33:57Z")

</div>

![Capture2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1817b5cad4a780fd0c9d571cc90e3bac9d93f5b.png)  
The components get the values from tags.
