Search code examples
google-app-maker

How to color a row in table depending on time?

I am creating an application that will help our employees manage tasks. Tasks are submited via form. OnBeforeCreate I'm taking a date of task subbmission:

record.Data_Zlozenia = new Date();

The task falls into view for region (table widget), from where employees can pick it up.

The task that is submmited has 48 hour deadline.

Problem: How to color the row of task that exceed the deadline?

I know that I can color the row via adding a class in style editor and then on the row "Display" styles the binding. But I don't know how to make it depend on time.

`.red {
  background-color: red;
}

 @widget.descendants.Field3.text === "Oczekujący - zwrot" ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']`

EDIT 1: Here I give U screenshots how it looks and what I tried. CSS Bindings

EDIT 2: With @Markus help I found a solution. I should put a binding like this:

(@datasource.item.Data_Zlozenia)/3600000 < ((new Date())/3600000 - 48) ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']
Solution

  • This is untested, but I would try the following in your row styles binding:

    setInterval(function() {(new Date() - @widget.datasource.item.Data_Zlozenia)/3600000;}, 60000) > 48 ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']

    Hypothetically speaking this will take the current Date/Time minus your field Date/Time and convert it to hours by dividing it by 3.6 million (JS date minus a date will return milliseconds so you have to convert to hours) and it will repeat this function every minute (60000 milliseconds). As stated, this is untested so you might need to refine a little