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,276 Points 5k badge 2x thumb

Posted 6 years ago

  • 2
Photo of Anna Wiersema

Anna Wiersema

  • 10,900 Points 10k badge 2x thumb
Right now, in our tutorials we only have an example of a custom slider field renderer. But I bet some of the developers will have some good guidance for you creating a custom checkbox renderer.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,648 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:

Is there any way to specify the height/width in the CSS as percentages rather than pixels?