Having trouble with table field Renderer boolean depending on name

  • 1
  • Question
  • Updated 4 weeks ago
  • Answered

I tried following this guide and applying it to my situation but I get stuck when trying to update the value. https://docs.skuid.com/v10.0.4/en/skuid/javascript/snippets/table-custom-field.html

I've running a custom field Renderer on the Quantity field and it shows the field correctly, but I can't get it to update the field with a number instead of a true or false.

Where do I put the js function that updates the model? I know I need to use this code, but how do I format the function around the event of clicking the checkbox?

field.model.updateRow( field.row, field.id, <insert value here> );

This is the code I currently have

var field = arguments[0],
    value = arguments[1],
	$ = skuid.$;
	function updateField() {
	    field.model.updateRow(field.row, field.id, 1);
	    console.log('function working');
	switch (field.row.Name) {
	    case 'GoPro rental (per day)':
	    skuid.ui.fieldRenderers.BOOLEAN.edit( field, value );
	    case 'Private guide (per day)':
	    skuid.ui.fieldRenderers.BOOLEAN.edit( field, value );
	    case 'Compass rental (per day)':
	    skuid.ui.fieldRenderers.BOOLEAN.edit( field, value );
	    skuid.ui.fieldRenderers.PICKLIST.edit( field, value );

Thank you for any help you can provide!

Photo of Sam Becker

Sam Becker

  • 1,298 Points 1k badge 2x thumb

Posted 7 months ago

  • 1
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,300 Points 5k badge 2x thumb

I think you'll have to modify the code a bit more than expected. Basically, to be able to edit the value of your row based on the checkbox, I think you have to create and add the checkbox to the DOM, so that you can take custom actions when it's checked or unchecked. This is what I've been able to come up with:

var $ = skuid.$,
field = arguments[0],
value = arguments[1],
cellElem = field.element;

// if the field is in read mode
if ( field.mode == 'read' ) {
// just use the standard Integer read-mode renderer
// you can customize this as well, if needed
} else if (field.mode == 'edit') {
// this function runs whenever the checkbox is clicked
function optionClickHandler ( event ) {
// get the new value from the click event, either true or false
var newValue = event.target.checked;
//if true (checkbox is checked), update the Quantity field to 1 (or modify this to whatever the value should be)
if (newValue) {
field.model.updateRow( field.row, field.id, 1 );
} else {
field.model.updateRow( field.row, field.id, 0 );
// modify this to fit what you need
// I changed from switch case to if else so you didn't have to duplicate
var name = field.row.Name;
if (name === "GoPro rental (per day)" || name === "Private guide (per day)") {
var v = false;
if (value == 1) {
v = true;
// create a checkbox DOM element, making it checked or not based on the value, and attaching the click handler function to it
var checkbox = $( '' ).attr('checked', v).click(optionClickHandler);
// add the checkbox element to the original DOM element so that it shows up on the page
checkbox.appendTo( cellElem );
} else {
skuid.ui.fieldRenderers.PICKLIST.edit( field, value );

You might need to do some tweaks based on what you specifically want to do, but I think this is headed in the right direction