Javascript that runs when selected rows changes

  • 1
  • Question
  • Updated 2 years ago
Is it possible to run a javascript snippet everytime a selection is made on a table? I'd like to throw a warning message up for my users when they select an Opportunity that one of our mass actions won't work on.
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
  • curious

Posted 2 years ago

  • 1
Photo of Henry Goddard

Henry Goddard

  • 776 Points 500 badge 2x thumb
Hey Jerry,

My first instinct would be to subscribe to a skuid.event. However I don't believe one exists for merely selecting a row in a table.

A few questions that may unveil an alternative for you.

1) Why do some of the rows not work in your mass actions?
2) Which field on the row will tell you that it doesn't work?
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
You'd be correct, One of my colleagues also suggested subscription as an option, but there is no ability to get the checkbox checked actions. I am currently proceeding with simply aborting the mass action and giving the users a message displaying the error encountered. 
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Jerry, it is possible to fire an action off of a checked or unchecked event with some very hacky javascript.

You can use mutation observers on the table to attach the functions each time the table is rendered. You can probably make this work as an inline resource, but for my use, I used an inline snippet since I knew each and every place that would cause the table to rerender.

So there are three things going into this.
  1. An invisible id column hidden with CSS for your use once you've established whether or not the column has been checked/unchecked
  2. Mutation Observer to check if html table has been added/modified to ensure your custom functions are always present even if the table gets rerendered.
  3. Custom functions on click and unclick of the checkboxes



Mutation observer snippet

var $ = skuid.$;
var attachCustomFunctionToCheckBoxes = skuid.snippet.getSnippet('attachCustomFunctionToCheckBoxes');

var observer = new MutationObserver(function(mutations, observer) {

    // fired when a mutation occurs
    attachCustomFunctionToCheckBoxes();

});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
//#sk-1if7S8-779 is your tableOd
observer.observe($("#sk-1if7S8-779")[0], {
  
  subtree : true,
  childList : true
  
});






Custom Functions on checkbox snippet

var $ = skuid.$;


//this function attaches check all and uncheck all functionionality to the checkbox that checks and unchecks all row checkboxes.
//This is needed since if checked/unchecked without attaching this function,function for individual checkbox rows won't be triggered (probably because skuid subscubries to internal events that we can't see)

$("#sk-1if7S8-779").find('.checkcolumn').find('input:checkBox').off().change(
    
	function(){
        
        if ($(this).is(':checked')) {
			
			//check all with jquery in order to trigger custom events 
            $("#sk-1if7S8-779").find("td").find("input:checkbox").prop('checked',true).change();
            
        }
        
        else{
            
			//uncheck all with jquery in order to trigger custom events 
            $("#sk-1if7S8-779").find("td").find("input:checkbox").prop('checked',false).change();
            
        }
        
        
    });
    
//attach add/remove id function to checkbox rows
$("#sk-1if7S8-779").find("td").find("input:checkbox").off().change(
    function(){
        
        row = this;
		//get id from hidden column (my id starts with 'a1c')
		rowId = $(".nx-item").has(row).children().filter(function(){return this.innerText.includes('a1c')})[0].innerText;
		
        
        if ($(this).is(':checked')) {
			
            
			//customCheckedRowFunction(rowId);
            
        }
        
        else{
            
            //customUncheckedRowFunction(rowId);
        }

        
        
    });
 
(Edited)
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Something of note that changed in brooklyn release is that return characters are added in the table data. If you need to remove those do:

tableData = tableData.replace(/(\r\n|\n|\r)/gm,"");