Question

Within a table, change background color of row based on one of its fields whose value set through a lookup rule

Forms Version 9

Updated April 24, 2015

asked on April 23, 2015 • Show version history

As a variant of Erik Jensen's post, I have a Forms table with columns 'Comment' (multi-line), 'Rating' (drop-down) and 'Color' (hidden read-only singe line):

> (works fine) 'Rating' choices are pulled from an SQL table through a Forms lookup rule

> (works fine) After initiator selects the rating value from drop-down list, 'Color' is then initialized through a Forms lookup rule against an SQL Table structured as {'Rating','Color'}

According to the value returned in 'Color' (namely Green, Yellow or Red), the entire row's background color needs to be set through (I assume) a mix of CSS classes and JavaScript (different lines in the Forms table can then have different background colors).

Suggestions are welcome!

note: Forms version 9.2.1

0 0

Answers

APPROVED ANSWER

replied on April 23, 2015

Here's my sample form that seems to work ok.

1. SQL Table for lookup

2. Form

Note that the table is using the CSS class ObjectivesTable and the Color column is using the CSS class ObjectivesColor.

3. Lookup Rule

4. CSS

tr.GreenBackground {color:#00ff00;}
tr.GreenBackground input, tr.GreenBackground select {color:#00ff00;}

tr.YellowBackground {color:#ffff00;}
tr.YellowBackground input, tr.YellowBackground select {color:#ffff00;}

tr.RedBackground {color:#f00000;}
tr.RedBackground input, tr.RedBackground select {color:#f00000;}

tr.WhiteBackground {color:#000000;}
tr.WhiteBackground input, tr.WhiteBackground select {color:#000000;}

5. JavaScript

$(document).ready( function() {
$('.ObjectivesTable').on('change','.ObjectivesColor input', function() {
  if ($(this).val() == "Green"){
    $(this).closest("tr").addClass("GreenBackground");
    $(this).closest("tr").removeClass("RedBackground");
    $(this).closest("tr").removeClass("YellowBackground");
    $(this).closest("tr").removeClass("WhiteBackground");
  } else if ($(this).val() == "Yellow"){
    $(this).closest("tr").addClass("YellowBackground");
    $(this).closest("tr").removeClass("RedBackground");
    $(this).closest("tr").removeClass("GreenBackground");
    $(this).closest("tr").removeClass("WhiteBackground");
  } else if ($(this).val() == "Red"){
    $(this).closest("tr").addClass("RedBackground");
    $(this).closest("tr").removeClass("GreenBackground");
    $(this).closest("tr").removeClass("YellowBackground");
    $(this).closest("tr").removeClass("WhiteBackground");
  }else{
    $(this).closest("tr").addClass("WhiteBackground");
    $(this).closest("tr").removeClass("RedBackground");
    $(this).closest("tr").removeClass("YellowBackground");
    $(this).closest("tr").removeClass("GreenBackground");
  }
});
});

Note that I modified the JS to better handle changing between rating values.

You can see this video to see the form working. If you are still having trouble getting the form working, you can try contacting your Laserfiche reseller for further assistance.

0 0

SELECTED ANSWER

replied on April 24, 2015

Hi Alex,

Removing all 3 sibling background colors did solve the issue indeed.

Many thanks!

1 0

Replies

replied on April 23, 2015

Ok so it's safe to say whenever the field Color, changes, we should then color the entire row?

This looks nearly identical to Scott Wilson's answer.

JavaScript

$(document).ready( function() {
 
$('.MyTable .colorColumn').change(function() {
    if ($(this).val() == "Red"){
        $(this).closest("tr").addClass("RedRow");
    }else{
        $(this).closest("tr").removeClass("RedRow");
    }
});
	 
});

CSS:

tr.RedRow {color:#f00;}
tr.RedRow input, tr.RedRow select {color:#f00;}

And assign the CSS class colorColumn to the hidden field where you're populating the colors.

0 0

replied on April 23, 2015

Also make sure the table you want to affect has the MyTable class assigned.

Everything here is just like Scotts except we're changing the trigger.

0 0

replied on April 23, 2015

Hello Carl,

I do have implemented Scott Wilson's answer:

$(document).ready( function() {
 
$('.ObjectivesTable').on('change','.ObjectivesColor select', function() {
  if ($(this).val() == "Green"){
    $(this).closest("tr").addClass("GreenBackground");
  } else if ($(this).val() == "Yellow"){
    $(this).closest("tr").addClass("YellowBackground");
  } else if ($(this).val() == "Red"){
    $(this).closest("tr").addClass("RedBackground");
  }else{
    $(this).closest("tr").addClass("WhiteBackground");
  }
});
  
});

...alltogether with CSS stuff:

tr.GreenBackground {color:#00ff00;}
tr.GreenBackground input, tr.GreenBackground select {color:#00ff00;}

tr.YellowBackground {color:#ffff00;}
tr.YellowBackground input, tr.YellowBackground select {color:#ffff00;}

tr.RedBackground {color:#f00000;}
tr.RedBackground input, tr.RedBackground select {color:#f00000;}

tr.WhiteBackground {color:#ffffff;}
tr.WhiteBackground input, tr.WhiteBackground select {color:#ffffff;}

Table Object:

...and 'Color' Field:

Still there is no color change with that code upon filling the form ;-(

0 0

replied on April 23, 2015 • Show version history

The rating is the drop down field and after the user selects a rating, the color single line field is filled in from the lookup, correct? If that's the case, then you need to use

'.ObjectivesColor input'

instead of

'.ObjectivesColor select'

This is assuming that the color column in the table (not the rating column) is using the CSS class ObjectivesColor.

0 0

replied on April 23, 2015

Alex,

You're correct. Still the problem persists after your proposed change:

Translation:

'Cote' stands for field 'Rating' (drop-down)

'Couleur' has been lookup up correctly in the SQL Table (structured as {'Rating','Color'})

Again I understand that the font color should have changed to green for all 3 columns in the image above as per field 'Color' value...

0 0

APPROVED ANSWER

replied on April 23, 2015

Here's my sample form that seems to work ok.

1. SQL Table for lookup

2. Form

Note that the table is using the CSS class ObjectivesTable and the Color column is using the CSS class ObjectivesColor.

3. Lookup Rule

4. CSS

tr.GreenBackground {color:#00ff00;}
tr.GreenBackground input, tr.GreenBackground select {color:#00ff00;}

tr.YellowBackground {color:#ffff00;}
tr.YellowBackground input, tr.YellowBackground select {color:#ffff00;}

tr.RedBackground {color:#f00000;}
tr.RedBackground input, tr.RedBackground select {color:#f00000;}

tr.WhiteBackground {color:#000000;}
tr.WhiteBackground input, tr.WhiteBackground select {color:#000000;}

5. JavaScript

$(document).ready( function() {
$('.ObjectivesTable').on('change','.ObjectivesColor input', function() {
  if ($(this).val() == "Green"){
    $(this).closest("tr").addClass("GreenBackground");
    $(this).closest("tr").removeClass("RedBackground");
    $(this).closest("tr").removeClass("YellowBackground");
    $(this).closest("tr").removeClass("WhiteBackground");
  } else if ($(this).val() == "Yellow"){
    $(this).closest("tr").addClass("YellowBackground");
    $(this).closest("tr").removeClass("RedBackground");
    $(this).closest("tr").removeClass("GreenBackground");
    $(this).closest("tr").removeClass("WhiteBackground");
  } else if ($(this).val() == "Red"){
    $(this).closest("tr").addClass("RedBackground");
    $(this).closest("tr").removeClass("GreenBackground");
    $(this).closest("tr").removeClass("YellowBackground");
    $(this).closest("tr").removeClass("WhiteBackground");
  }else{
    $(this).closest("tr").addClass("WhiteBackground");
    $(this).closest("tr").removeClass("RedBackground");
    $(this).closest("tr").removeClass("YellowBackground");
    $(this).closest("tr").removeClass("GreenBackground");
  }
});
});

Note that I modified the JS to better handle changing between rating values.

You can see this video to see the form working. If you are still having trouble getting the form working, you can try contacting your Laserfiche reseller for further assistance.

0 0

SELECTED ANSWER

replied on April 24, 2015

Hi Alex,

Removing all 3 sibling background colors did solve the issue indeed.

Many thanks!

1 0

You are not allowed to follow up in this post.

Question

Question

Within a table, change background color of row based on one of its fields whose value set through a lookup rule

Answers

Replies

Sign in to reply to this post.