Discussion

Assigning Color to Table Rows that are populated via a Lookup

Forms Version 10 Web Customizations

Updated November 3, 2016

posted on November 2, 2016 • Show version history

Hi, I'm new to Scripting so this may be way off base.

I have a Form where a Drop Down selection that is used to trigger a Lookup to populate the fields of a Table from a Database.

The Table is basically a Checklist with the following Fields

Radio Button (Applicable), Task Desc, Radio Button (Completed), Notes.

The Radio Buttons can have the values of "Yes" or "No".

The Table has a Class of RadioTable, and the 2 Radio Fields have the class or
RadioAppl and RadioCmp.

I wrote the following Script to change the Color of the line in the Table row based on the radio selections which does work when the Radio Buttons are "clicked". The color of the row chnages to Grey if Applicable (No) is Clicked and to Green if Completed (Yes) is Clicked. If the opposite values are Clicked the Rows are set to White

$(document).ready(function () {
$('.RadioTable').on('change',".RadioAppl input:checked", function() {

if ($(this).val() == "No"){
$(this).closest('tr').css("background-color", "#cccccc");
}else{
$(this).closest('tr').css("background-color", "#ffffff");
}
});
});

$(document).ready(function () {
$('.RadioTable').on('change',".RadioCmp input:checked", function() {

if ($(this).val() == "Yes"){
$(this).closest('tr').css("background-color", "#adffef");
}else{
$(this).closest('tr').css("background-color", "#ffffff");
}
});
});

What I am finding is that once the Form has been submitted is that the Row Color does not stay with the Form when I review the form in the Task Inbox. So I'm thinking that I need a Script that evaluates the form each time it is opened to assign the row colors based on the current Radio Button settings but I cannot figure out how to trigger that.

I tried this but no go

$(document).ready(function () {

AddColor();

function AddColor() {
$('.RadioTable').ready,".RadioAppl input:checked", function() {

if ($(this).val() == "No"){
$(this).closest('tr').css("background-color", "#cccccc");
}else{
$(this).closest('tr').css("background-color", "#ffffff");
}
}
});
});

I also realize the coding above is likely not structured properly as I find it had to keep track of all the brackets required :) so any Help is Appreciated.

Thanks

0 0

Comments 4
Follow-Ups 0

replied on November 3, 2016

You can try this JS. I assume that the "Completed" radio button takes precedence when there's a value for both.

$(document).ready(function () {
  
  rowcolorchange();
  
  $('.RadioTable').on('change','.RadioAppl input:checked', rowcolorchange);
  $('.RadioTable').on('change','.RadioCmp input:checked', rowcolorchange);
  
  function rowcolorchange() {
    $('.RadioTable tbody tr').each(function () {
      $(this).find('.RadioAppl input:checked').each(function () {
        if ($(this).val() == "No"){
          $(this).closest('tr').css("background-color", "#cccccc");
        }else{
          $(this).closest('tr').css("background-color", "#ffffff");
        }
      });
      $(this).find('.RadioCmp input:checked').each(function () {
        if ($(this).val() == "Yes"){
          $(this).closest('tr').css("background-color", "#adffef");
        }else{
          $(this).closest('tr').css("background-color", "#ffffff");
        }
      });
    });
  }
  
});

1 0

replied on November 3, 2016

Hi Alexandar

Thank you this worked for me with 1 little adjustment as my Radio Buttons have Default Values of Applicable(Yes) and Completed(No), so I had to remove the Else Condition Under RadioCmp as if the Question was Not Applicable and Not Completed, the Field would turn White instead of Gray.

Many Thanks

0 0

replied on November 3, 2016

Hi Rui

Thanks for your code but not quite on the mark.

What your code does, is it appears to takes whatever value is selected on the first row of the form and applies that to all rows on the form. Example, if First Row was set to "No", it sets the colors for all Rows as if they were also set to "No".

The solution I am looking for must treat each row separately.

0 0

replied on November 3, 2016

Try it like this:

$(document).ready(function () {
    var selected1 = $(".RadioAppl input:checked");
    var selected2 = $(".RadioCmp input:checked");
    if (selected1.val() == "No"){
     selected1.closest('tr').css("background-color", "#cccccc");
    }else{
       if (selected2.val() == "Yes"){
       selected2.closest('tr').css("background-color", "#adffef");
      }else{
       selected2.closest('tr').css("background-color", "#ffffff");
      } 
    }
});

0 0

You are not allowed to follow up in this post.

Discussion

Discussion

Assigning Color to Table Rows that are populated via a Lookup

Comments 4

Follow-Ups 0

Sign in to reply to this post.