Is there an example of a custom field renderer?

  • 2
  • Question
  • Updated 3 years ago
  • Answered
I'd love to see a checkbox/boolean renderer where I can click on an image instead of a little box. For instance, I'd like to provide (links to) separate images representing "unchecked" and "checked", and when you click on the image it changes to the other one and changes the boolean field's value. I can think of some parts of how to do this, but I don't think I know enough about the Skuid object model to do it all. Is there an example of such a solution?
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 6 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Official Response
Peter, here is an example that should do basically what you're looking for.

This is a custom field renderer suitable for use with any Checkbox / "BOOLEAN" -type field.

For this renderer, I've used some Inline CSS (to provide the unchecked / checked images) as well as an Inline Snippet.



Here's the Inline CSS (which loads in some basic checked/unchecked images which I'm sure you'll replace :)



.custom-checkbox {
width: 20px;
height: 20px;
background-repeat:no-repeat;
background-size: 20px 20px;
position:relative;
float: left;
}

.custom-checkbox.unchecked {
background-image: url('http://bit.ly/YqrnUb')
}

.custom-checkbox.checked {
background-image: url('http://bit.ly/Iv1tYS')
}


And here's the Inline Snippet:



var field = arguments[0],
value = arguments[1],
isChecked = ((value == "true") || (value === true)),
$ = skuid.$;

var setImageSource = function(img,checked) {
if (checked) {
img.removeClass('unchecked');
img.addClass('checked');
}
else {
img.removeClass('checked');
img.addClass('unchecked');
}
};
var swapImage = function(img) {
var newVal = !img.hasClass('checked');
setImageSource(img,newVal);
return newVal;
};

// READ MODE
if (field.mode == 'read') {

var fieldContainer = $('<div width="20px" height="20px">').css({
'padding' : '0px',
'opacity' : '0.5'
});
var img = $('<div>').addClass('custom-checkbox');
img.appendTo(fieldContainer);
setImageSource(img,isChecked);

(field.editable) && fieldContainer.append(
'<div class="focusbox" tabindex="0"/>'
);
field.element.append(fieldContainer);
}
// EDIT MODE
else {
var img = $('<div>').addClass('custom-checkbox');
setImageSource(img,isChecked);
field.element.append(img);
img.on('click',function(){
var newValue = swapImage(img);
field.model.updateRow(field.row,field.id,newValue,{ initiatorId : field._GUID});
});
}



Here's the final product: