How to set the CSS from Javascript of a dynamic data

Question

I want to set the 'status' label and their css font-color base on their validity and tried the following:

/**
 * To return status and set their label color according to expiration date
 */

function getStatusName(DueDate) {

  var a = app.pages.Dashboard.descendants.Table2Body.children.Table2Row.children.status;

  var status = 'Valid';

  if (DueDate < new Date()) {
    status = 'Expired';
  }

  switch(status) {
    case 'Valid':
        a.styles.color = green;
        break;
    case 'Expired':
        a.styles.color = red;
        break;
    default:
        return;
  }

  return status;
}

The label work except for setting the color of that label. What is the correct way to set the CSS in Js? This is one of my Server Script in Google App Maker.

Answer 1

I would rather go with the binding for the label's styles property:

@datasource.item.DueDate < new Date() ? ['green'] : ['red']

and couple CSS classes:

.green {
  color: green;
}

.red {
  color: red;
}

same trick should work for the label's text binding:

@datasource.item.DueDate < new Date() ? 'Valid' : 'Expired'