Is there an example of a custom field renderer?

Questions
1

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?

2

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.

3

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 :slight_smile:

.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 = $('').css({ 'padding' : '0px', 'opacity' : '0.5' }); var img = $('').addClass('custom-checkbox'); img.appendTo(fieldContainer); setImageSource(img,isChecked); (field.editable) && fieldContainer.append( '' ); field.element.append(fieldContainer); } // EDIT MODE else { var img = $('').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:

4

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