Skip to main content

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 = '<b>&nbsp&nbsp&nbsp&nbsp' + value + '&nbsp&nbsp&nbsp&nbsp</b>'; } 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?

Hi Peter, This should get you a little closer to what you’re looking to do.


var field = argumentst0], value = argumentst1]; skuid.ui.fieldRenderers.INTEGEREfield.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.

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.

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 = argumentsr0], value = argumentsr1]; skuid.ui.fieldRenderersefield.metadata.displaytype]lfield.mode](field,value); field.element.css({'background-color':'red','min-height':'30px'});

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.

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? ben@skuidify.com

Thanks to Ben spotting a spelling error on my page, now this is working for me - yea!

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; if (value == ‘Needs Improvement’) { field.element.css({‘background-color’:‘red’,‘min-height’:‘30px’,‘color’:‘white’}); }

…And for checkboxes, use the logic: value == ‘true’

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’

That’s what I tried first, but it didn’t work; it never highlights. It does work when I do value == ‘true’, though, strangely.

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.

Ok, this should be fixed now. value === true is the right way to do this.

Confirmed on my page. Thanks for the quick fixing - it does make more sense this way.

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?

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.

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 ) {...}

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…

View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings