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.
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?
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.
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.
- An invisible id column hidden with CSS for your use once you’ve established whether or not the column has been checked/unchecked
- 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.
- 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); } });<br />
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(/(
|
|
)/gm,"");
