Colouring a Variable box

[Brian Sorensen]

Odd request from a VP, but figured lets see if we can do it...

We have a form for users to be able to check and see if they are due for a new cell phone

We have a Eligibility Date field on the record and a form that matches this

So when a user selects their device, we pre populate some information about the phone.

A VP has asked can we make the box "Green" if they are eligible and "RED" if they are not?

Here is what the box looks like and how it was made

Its a text field, and then is filled in with autopopulate

in Catalog builder it looks like this

and this on the backend

Is there a way to say if the date is less than today, colour in green, if not colour red?

[Mark Roethof]

Hi there,

Out-of-the-box there's no configuration or whatever for what you are asking.

What you might use to stick close to out-of-the-box possibilities: leverage Field messages.

[Dnyaneshwaree]

Hello @Brian Sorensen ,

Try On change catalog client script and refer below code as a example and update it as per your req:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    // Parse the new value (Eligibility Date) as a Date object
    var eligibilityDate = new GlideDateTime(newValue);
    var currentDate = new GlideDateTime();

    // Get the field element
    var fieldElement = g_form.getControl('eligibility_date_field_name'); // Replace 'eligibility_date_field_name' with your field name

    // Compare the dates and set the background color
    if (eligibilityDate.before(currentDate)) {
        fieldElement.style.backgroundColor = 'green';
    } else {
        fieldElement.style.backgroundColor = 'red';
    }
}

[Brian Sorensen]

Testing now

getting "Javascript error on your console" when it loads up the date