Can I highlight the background of a cell in a table?

edited June 18, 2019 in Questions
Thanks to your sample snippet, I figured out how to do some simple highlighting of a value with a snippet when it is read-only. The below code highlights an integer value when it is greater than zero:
  var field = arguments[0],      value = arguments[1],      display;    if (field.mode == 'read') {      if (value > 0) {          display = '<font style="background-color: red; color: white"><b>&nbsp&nbsp&nbsp&nbsp' + value + '&nbsp&nbsp&nbsp&nbsp</b></font>';      } else {          display = value;      }      field.element.append(display);  } else if (field.mode == 'edit') {      skuid.ui.fieldRenderers.INTEGER.edit(field,value);  }
I show this field in a table, and use the snippet as a custom renderer, and it seems to work as expected (yea!): Now I could probably easily add a reference to an image instead of coloring the text to make it even prettier. However, these approaches only work when the field isn't editable (and I'm not sure if I'm up to building a new editor component). What I'd love is to be able to highlight the entire background of the cell based on the field's value, and especially to be able to do this even when the field is in edit mode. That would improve the look and ensure that it is consistently displayed in either mode. Is this possible?

Comments

  • edited June 26, 2018
    Hi Peter, This should get you a little closer to what you're looking to do.
        var field = arguments[0],      value = arguments[1];    skuid.ui.fieldRenderers.INTEGER[field.mode](field,value);  field.element.css({'background-color':'red','min-height':'30px'});    
    At first I was thinking you could access the actual td element from the snippet through the jQuery.parent() function, but since at this point in the code it hasn't been appended to the dom, I don't think that's possible.
  • edited June 18, 2019
    Yes! Much better, thanks. So, if I wanted to try this with, say, a picklist field, how would I know what the skuid.ui.fieldRenderers.X value is supposed to be? I tried "PICKLIST" and "SELECT", and it clearly isn't those, and I can't find a reference for this kind of information. Is this just not the level of developer documentation you currently have, or am I missing something? I'll admit, I probably know just enough javascript to be dangerous, but am not an expert.
  • edited March 1, 2017
    Hi Peter, We haven't gotten to documenting that portion of our API yet. But it is definitely on our list of things to do. We absolutely love it that people are going in and just figuring things out. PICKLIST was actually the correct name for the renderer, so i'm not sure what happened when you tried it. To make things more generic, you can use field.metadata.displaytype to get the display type of the field you're working with. Here's another version that might work better for you.
      var field = arguments[0],      value = arguments[1];    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);  field.element.css({'background-color':'red','min-height':'30px'});    
  • edited June 18, 2019
    That still doesn't seem to work for picklists fields. When I try it the field value doesn't render at all in read-only or edit mode.
  • edited March 1, 2017
    This is strange because it's working fine for me when try it on picklist fields. The first time I tried it I forgot to put the snippet name in after I changed the renderer to custom. Could you doublecheck that? If that isn't the issue, I'll have to look at your page definition xml. Can you email that to me? [email protected]
  • edited June 18, 2019
    Thanks to Ben spotting a spelling error on my page, now this is working for me - yea!
  • edited June 18, 2019
    BTW, this is what I ended up using to highlight a picklist field based on its value: var field = arguments[0], value = arguments[1]; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); if (value == 'Needs Improvement') { field.element.css({'background-color':'red','min-height':'30px','color':'white'}); }
  • edited June 18, 2019
    ...And for checkboxes, use the logic: value == 'true'
  • edited March 1, 2017
    Hi Peter, For checkboxes you should use value === true Values of type BOOLEAN in skuid models are not stored as strings. Do you actually have a version that is working with checkboxes? Your logic should always return false, since the value will never be the string 'true'
  • edited June 18, 2019
    That's what I tried first, but it didn't work; it never highlights. It does work when I do value == 'true', though, strangely.
  • edited March 1, 2017
    You're right. This is actually a bug. I would expect this to change in future versions of Skuid. I'll let you know if we push out a release that changes this, because it will break your current code.
  • edited June 18, 2019
    Ok, this should be fixed now. value === true is the right way to do this.
  • edited November 19, 2015
    Confirmed on my page. Thanks for the quick fixing - it does make more sense this way.
  • edited December 18, 2014
    Ben, is there a way to have this functionality inside of a template field? I'm trying to display a child error message on the parent table, and I would like to highlight the Error Message template in red, but only if a child error message actually exists, is this doable?
  • edited June 18, 2019
    I'm also trying to work out the code to compare the values between two fields in a record in a table instead of the value of a picklist option. I have 2 currency fields: 1 - Original Payment Due   2 - Payment Amount. I want to compare the value of the Payment Amount to the value of Original Amount Due and if they are not equal, highlight both cells. I'm not sure how to reference the other field in the javascript code I want to do the comparison with.
  • edited November 19, 2015
    The tutorial topics can help with this. Start with the code examples you'll find here: http://help.skuidify.com/s/tutorials/m/11720/l/129014-skuid-model

    But the basics are pretty simple:
    var myModel = skuid.model.getModel('MyModelName'); var myRow = Model.getFirstRow(); if( myRow.Field_Name__c != myRow.Other_Field_Name__c ) {...}
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited June 26, 2018
    That min-height is a great little workaround, glad to find that. 

    Since 5 years ago, has anyone discovered a way to access the cell's particular td element? Would be nice not just for blank cells, but also for just expanding the background to the whole cell. Guess I could run a negative margin until it fills..
    image
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!