var field = arguments[0],
value = arguments[1],
display;
if (field.mode == 'read') {
if (value > 0) {
display = '<font style="background-color: red; color: white"><b>    ' + value + '    </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?
Peter Bender, Champion
-
6,276 Points
Posted 6 years ago
Ben Hubbard, Employee
-
12,530 Points
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.
Peter Bender, Champion
-
6,276 Points
Ben Hubbard, Employee
-
12,530 Points
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'});
Peter Bender, Champion
-
6,276 Points
Ben Hubbard, Employee
-
12,530 Points
Peter Bender, Champion
-
6,276 Points
Peter Bender, Champion
-
6,276 Points
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'});
}
Peter Bender, Champion
-
6,276 Points
Ben Hubbard, Employee
-
12,530 Points
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'
Peter Bender, Champion
-
6,276 Points
Ben Hubbard, Employee
-
12,530 Points
Ben Hubbard, Employee
-
12,530 Points
Peter Bender, Champion
-
6,276 Points
Moshe Karmel, Champion
-
8,646 Points
-
248 Points
Peter Bender, Champion
-
6,276 Points
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 )
{...}
Related Categories
-
Themes / CSS Customization
- 17 Conversations
- 12 Followers
Jack Sanford, Champion
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..