How to add onclick event for a checkbox within a table?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have a use case where I want to run a snippet whenever a checkbox field is clicked. Any guidance would be appreciated.
Photo of Rodrigo

Rodrigo

  • 116 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi Rodrigo,

Very timely post.  I am facing the same use case.

Irvin
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
So I added a custom field renderer to register my own handleChange event.  How to I get access to the row that was changed?  My use case is to update other fields in the same row depending on the change value.

var $ = skuid.$,    
    field = arguments[0],
    value = arguments[1];
    
var editor = field.editor;
// Extend the default handleChange() functionality
editor.handleChange = function(changeInfo) {
    skuid.ui.Editor.prototype.handleChange.call(editor);
    
    // Handle the change
    console.log('finalPrice:handleChange');
    
    // HOW DO I GET ACCESS TO THE MODEL ROW?
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Hey guys,

I haven't tried this specific approach in your use case, but its kind of similar to what Ben Hubbard suggested to me in a previous post here

The idea being, rather than create a custom field renderer, create an action on that model, which runs whenever the checkbox is updated, ie...

1. Create an action on the model containing the checkbox field, which is "when row(s) in model are updated" and have it execute only when a specific field is updated (the checkbox field)

2. Have that action run a snippet like....

var params = arguments[0],
$ = skuid.$,
updates = params.updates,
boolean;

if ('checkboxField__c' in updates) {
//then do stuff depending on the value of the checkbox
boolean = params.row.checkboxField__c; 
   if (boolean) {
//do stuff for a TRUE boolean value
}
else if (!boolean) {
// do stuff for a FALSE boolean value
} updates = params.updates, }

Disclaimer: I'm typing this in an airport right now and haven't checked whether or not this has errors, which it probably does, but hopefully you see the logic and can play around with it.

****Not sure what happened with the previous formatting of this post, but hopefully this will correct it
(Edited)
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Greg,

This worked out nicely.  Thanks!

Regards,
Irvin
Photo of Rodrigo

Rodrigo

  • 116 Points 100 badge 2x thumb
Greg, thank you very much, it worked perfectly :)
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Confession: Rodrigo and I are pair programming building out an application.  With Greg's guidance, we were able to construct a very cool feature with minimal code and CSS.  I will post a sanitized version soon for posterity.

Greg, thanks again for the hint!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Looking forward to seeing what you genius guys come up with!