Highlight Specific Cell in Table

  • 1
  • Question
  • Updated 9 months ago
  • Answered
I have a table that I would like select cells to be highlighted based on the first column of the table (Name).  Currently, using java script and css, I am able to get the entire column to highlight, instead of the specific cell.  Additionally, the values are not feeding back into the cell.  The example screen shot portrays the before java and after.  

Below is the java:
$ = skuid.$;

var field = arguments[0];
var value = field.model.getFieldValue(field.row,'Owner.Name');
var value2 = field.model.getFieldValue(field.row,'SBP SCM');
var element= field.element;

if (value != 'Name 3')   {element.addClass('green');}

     skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value2);
 
Photo of David Garrity

David Garrity

  • 856 Points 500 badge 2x thumb

Posted 9 months ago

  • 1
Photo of David Garrity

David Garrity

  • 856 Points 500 badge 2x thumb
Forgot to attach image, attached.
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
Looks pretty close to code I use. Is Owner.Name the first column as displayed in the image? 'SBP SCM' does not look like a field name, however. Is value2 a null?

Have you debugged with the console? I would put console.log(value); and console.log(value2); statements in the code. You could also include console.log(value != 'Name 3'); to check the comparison.

Also, what does the 'green' css look like?
Photo of David Garrity

David Garrity

  • 856 Points 500 badge 2x thumb
Hi Mike-

SBP SCM (value2) is the Dollars column, forgot to rename for the example.  Value2 contains both zero dollar values and other than zero values.  There are no blanks.

Owner.Name is the first column in the example.


This is the CSS:

.red {
    background-color: #EC9595; 

}

.green {
    background-color: #6EE77C; 
}

.yellow {
    background-color: #FAFB73; 

}

I placed those two items in.  However, not being a programmer by any means, not sure what I am looking for the the console.
(Edited)
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
Here's access to the console in Chrome. Start with the 3-dot menu button in the upper right corner. Select More tools, then Developer tools. If necessary, click the Console tab. (You can also use the Ctrl+Shift+i key combo.) Messages from the console.log statement will appear as shown (along with other info sometimes that is usually ignored).

Everything else looks okay, with the exception of the 'SBP SCM' which does not look like a field name from the model. SBP_SCM__c perhaps? But that would only explain the lack of dollars in the green cells.

I think I see the problem though. Next post, after I compose it...
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb

Sorry for all the whiteout.
And I didn't see the problem after all.
Photo of David Garrity

David Garrity

  • 856 Points 500 badge 2x thumb
Mike-

Thank you for taking a look into this, the issue was a typo my me, the first column name field is "ownerName".  I had it as owner.Name. 

Thanks Again!