nuBuilder Forum

Posted: **Tue Feb 05, 2019 5:48 pm**

Hey there,

I have managed, thanks to help here on the forum, to change the color of a line in a browse form based on conditions. Here is the code:

Code: Select all

if (nuFormType() == 'browse') {

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd = '0'+dd
} 

if(mm<10) {
    mm = '0'+mm
} 

today = yyyy + '-' + mm + '-' + dd;

    $('[data-nu-column="0"]').each(function (index) {

        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        var rowNum = String(cellId).split('_')[1];

        if ((cellValue < today) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "red");
        }
        if (cellValue == today) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "green");
        }
    });
}

The interesting part of the code is the 2nd part, after the value of "today" is gotten.

The results:

Capture d’écran 2019-02-05 à 17.39.50.png

Now I'm trying to add a 2nd condition: whether or not the values of another column are equal to 0 or 1 (in my case the column is the 2nd one from left).

My new code (without the 1st part that is not interesting here):

Code: Select all

$('[data-nu-column="0"]').each(function (index) {

        var important = $('[data-nu-column="1"]').html();
        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        var rowNum = String(cellId).split('_')[1];

        if ((cellValue < today) && (important === 1)) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "red");
        }
        if ((cellValue < today) && (important === 0)) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "orange");
        }
        if (cellValue == today) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "green");
        }
    });

But my lines are not colored in red anymore, nor in orange. I have no error in console. I'm sure it is due to how I get the value "important". Any idea on how to do it?

Thanks

Marc

Posted: **Tue Feb 05, 2019 9:22 pm**

Hi,

Try this:

Code: Select all

function getDateToday() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd < 10) {
        dd = '0' + dd
    }
    if(mm < 10) {
        mm = '0' + mm
    }
    return new Date(yyyy + '-' + mm + '-' + dd);
}

var colDate      = 0; // column with date (1st column)
var colImportant = 1; // column important (2nd column)

var today = getDateToday();

$('[data-nu-column="'+colDate+'"]').each(function (index) { 
  
    var idDate = $(this).attr('id'); // id of column date
    var idImportant = idDate.substring(0, idDate.lastIndexOf('_') + 1) + colImportant; 
    var important = $('#' + idImportant).html(); // value of column important
    var date = new Date($('#' + idDate).html()); // date value of column date
  
    var color = 'black'; // default color
    if(date < today && important == '1') {
        color = 'red';
    } else
    if(date < today && important == '0') {
        color = 'orange';
    } else
    if(date == today) {
        color = 'green';
    }
    // color the entire row
    $("div[id^='nucell_" + index + "']").css("color", color);
  
});

Posted: **Wed Feb 06, 2019 7:46 pm**

Hey Kevin,

thanks for your reply. I tried your code, and it colors in red or orange. But the rows matching today's date are not colored in green anymore. I don't have any error in console.

See for instance the result:

Capture d’écran 2019-02-06 à 19.43.23.png

Posted: **Wed Feb 06, 2019 9:24 pm**

OK. New attempt:

Code: Select all

var colDate      = 0; // column with date (1st column)
var colImportant = 1; // column important (2nd column)

var today = (new Date()).toISOString().split('T')[0];
$('[data-nu-column="'+colDate+'"]').each(function (index) { 
  
    var idDate = $(this).attr('id'); // id of column date
    var idImportant = idDate.substring(0, idDate.lastIndexOf('_') + 1) + colImportant; 
    var important = $('#' + idImportant).html(); // value of column important
	
    var date = $('#' + idDate).html(); // date value of column date  
    var color = 'black'; // default color
    if(date < today && important == '1') {
        color = 'red';
    } else
    if(date < today && important == '0') {
        color = 'orange';
    } else
    if(date == today) {
        color = 'green';
    }
	
    // color the entire row
    $("div[id^='nucell_" + index + "']").css("color", color);
  
});

Posted: **Wed Feb 06, 2019 10:18 pm**

This time it worked

Thanks a lot Kevin !

Posted: **Fri Feb 08, 2019 4:47 pm**

marcvander wrote:This time it worked

Thanks a lot Kevin !

You're welcome!

nuBuilder Forum

Coloring a line based on conditions

Coloring a line based on conditions

Re: Coloring a line based on conditions

Re: Coloring a line based on conditions

Re: Coloring a line based on conditions

Re: Coloring a line based on conditions

Re: Coloring a line based on conditions