You are viewing limited content. For full access, please sign in.

Question

Question

I would like to highlite a field in a table row that corresponds with a value in a column of the same row

asked on December 28, 2017

Example: If under the Fix column (which is a drop down) Hours is selected, I would like the Hours field for that row to be highlighted.  (See example)

The data is auto filled from a table lookup on form load.  The Fix column tells the individual which value is wrong.

 

Can this be done?

0 0

Replies

replied on January 2, 2018

Hello,

Just wanted to chime in to say that Forms includes an "onloadlookupfinished" event, which is triggered after lookup rules have completed on the form. You can use this to automatically apply the highlights once the lookup has occurred. I've adapted Rick's script to be triggered by this event, which should produce the desired result (note that this script assumes the Fix field is a drop down):

$(document).ready(function(){

  $(document).on("onloadlookupfinished", function() {
    $('.tabler .fix select').each(function(){
      if ($(this).val() == "Operation"){
          $(this).closest('tr').find('.operation').addClass("colorChanger"); 
      }
      else if ($(this).val() == "WorkOrder"){
          $(this).closest('tr').find('.workOrder').addClass("colorChanger"); 
      }
      else  if ($(this).val() == "Hours"){
          $(this).closest('tr').find('.hours').addClass("colorChanger");
          
      }
      else {
      }
    });
    
    });
  
}); 

 

1 0
replied on January 3, 2018

Thanks Kathleen, I knew I was missing something.  I tried the .onloadlookupfinished in a function call earlier, but I was applying the table (.tabler) to it instead of the document.  I think Jason had the '.fix' field as an input, so if he changes the select to input this should work fine.  Seems to on my end, thanks again!

0 0
replied on December 28, 2017 Show version history

Hey Jason,

 

You can put this inside a document.ready function:

 $('.tabler').on('change', '.fix input', function(){
     if ($(this).val() == "Operation"){
     $(this).closest('tr').find('.operation input').css("background-color", "yellow"); 
     $(this).closest('tr').find('.hours input, .workOrder input').css("background-color", "white"); 
     }
      else if ($(this).val() == "WorkOrder"){
     $(this).closest('tr').find('.workOrder input').css("background-color", "yellow"); 
      $(this).closest('tr').find('.operation input, .hours input').css("background-color", "white"); 
     }
      else  if ($(this).val() == "Hours"){
     $(this).closest('tr').find('.hours input').css("background-color", "yellow"); 
     $(this).closest('tr').find('.operation input, .workOrder input').css("background-color", "white"); 
     }
     else {
     $(this).closest('tr').find('.operation input, .hours input, .workOrder input').css("background-color", "white"); 
     }
    });

Change 'tabler' to whatever the class name of your table is, and add the class names of operation, workOrder, hours and fix to your columns and this should work for you.

0 0
replied on December 29, 2017

Thank you for that code!  In my error, I did not explain in clearly.  As far as this page is concerned, all the values in each cell are populated from a Forms database lookup.  So, the form content itself is all read only.

 

So, I'm guessing then that would effect this line of code?

$('.tabler').on('change', '.fix input', function(){

 

Also, Forms has each value set to read only.  Will that effect CSS ability to highlight a given cell since it is grey because Forms has set it to Read Only?

For testing, I removed the ReadOnly Forms setting to verify the script will work without worrying if the grey fill is preventing the color change.

 

Thank you again for your time.

replied on December 29, 2017

Thank you for that code!  In my error, I did not explain in clearly.  As far as this page is concerned, all the values in each cell are populated from a Forms database lookup.  So, the form content itself is all read only.

 

So, I'm guessing then that would effect this line of code?

$('.tabler').on('change', '.fix input', function(){

 

Also, Forms has each value set to read only.  Will that effect CSS ability to highlight a given cell since it is grey because Forms has set it to Read Only?

For testing, I removed the ReadOnly Forms setting to verify the script will work without worrying if the grey fill is preventing the color change.

 

Thank you again for your time.

0 0
replied on December 29, 2017

Ok Jason,

We have to go about it differently in that case to account for the greyed out readonly format...this is actually less code though, though it does require a css statement.  Here is the part you put in the JavaScript section:

$('.tabler').on('change', '.fix input', function(){
      if ($(this).val() == "Operation"){
          $(this).closest('tr').find('.operation').addClass("colorChanger"); 
      }
      else if ($(this).val() == "WorkOrder"){
          $(this).closest('tr').find('.workOrder').addClass("colorChanger"); 
      }
      else  if ($(this).val() == "Hours"){
          $(this).closest('tr').find('.hours').addClass("colorChanger"); 
      }
      else {
      }
    });

This code below needs to go in the CSS Section:

.colorChanger input[readonly] {background-color: yellow !important;}

Let me know how that works out for you.

 

Rick

0 0
replied on December 29, 2017

Great!  Thank you.

 

One more tiny issue...

Since the data is auto populated on load via lookup, how do we trigger the highlighting automatically when the lookup completes / table populates?

 

0 0
replied on December 29, 2017

Jason,

 

This is close...it does load all the highlighted fields after you click any of the fields in the 'Fix' column.  I'm having trouble making it click one of them through javascript at the end of the function though for some reason, maybe someone can see what else it needs to avoid having to click one of those fields.  Here is the updated javascript, the CSS remains the same:

 

$(document).ready(function(){

    $('.tabler').on('focus', '.fix input', function(){
      $('.fix input').each(function(){
      if ($(this).val() == "Operation"){
          $(this).closest('tr').find('.operation').addClass("colorChanger"); 
      }
      else if ($(this).val() == "WorkOrder"){
          $(this).closest('tr').find('.workOrder').addClass("colorChanger"); 
      }
      else  if ($(this).val() == "Hours"){
          $(this).closest('tr').find('.hours').addClass("colorChanger");
          
      }
      else {
      }
    });
    
    });
  
}); 

 

0 0
replied on January 18, 2018

I really like this answer. It is really close to what I'm trying to do.

 

My situation is similar that I want to color a field based on either a table lookup rule or based on a formula for the column.

 

How could I adapt this so that it would color the cell based on a formula that I set for the column?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.