Event listener for changes in all models

Kathryn,

Here’s the full text of the static resource that we use. Hopefully the comments are helpful enough for you to piece it together. Your ‘ChangeTracker’ model can be on any sObject you want.

// Global Save Buttons Javascript<br>(function (skuid){<br>// NOTE: Requires Model named ChangeTracker&nbsp;<br>// on the sObject Process_Log__c with&nbsp;<br>// Do not load on pageload, 0 rows, create row if none.<br>// &nbsp; &nbsp; &nbsp; with ui-only checkbox field called ModelChanges<br>// Set global buttons to run snippets<br>// "saveAllSnippet' and 'cancelAllSnippet' (from _General.js)<br>// &nbsp; and conditionally enable when ModelChanges is true.<br>//////////////////////////////////////////////<br>// Shortcuts &amp; Global Variables //<br>//////////////////////////////////////////////<br>var $ = skuid.$,<br>$e = skuid.events.subscribe,<br>ChangeTracker;<br>//////////////////////////////////////////////<br>// Helper Functions //<br>//////////////////////////////////////////////<br>var checkForChanges = function(){<br>if (ChangeTracker) {<br>var changes = false;<br>$.each(skuid.model.map(),function(){<br>if (this.hasChanged &amp;&amp; this.id !== 'ChangeTracker') {<br>changes = true;<br>}<br>});<br>ChangeTracker.updateRow(ChangeTracker.getFirstRow(), {'ModelChanges': changes});<br>}<br>};<br>//////////////////////////////////////////////<br>// Subscriptions //<br>//////////////////////////////////////////////<br>$e('models.cancelled', checkForChanges);<br>$e('models.saved', checkForChanges);<br>$e('row.created', checkForChanges);<br>$e('row.updated', checkForChanges);<br>$e('row.deleted', checkForChanges);<br>$e('row.undeleted', checkForChanges);<br>//////////////////////////////////////////////<br>// &nbsp; Calendar Pageload //<br>//////////////////////////////////////////////<br>$(document.body).one('pageload',function(){<br>ChangeTracker = skuid.$M('ChangeTracker');<br>});<br>})(skuid);

And here are the save/cancel snippets that we use:

'saveAllSnippet': function () {<br>var modelsToSave = [],<br>dfd = new $.Deferred();<br>$.each(skuid.model.map(), function(){<br>//only save changed models that have 'unsaved changes' warning turned on.<br>if (this.hasChanged &amp;&amp; this.preventUnloadIfUnsavedChanges) {<br>modelsToSave.push(this);<br>}<br>});<br>$.when(skuid.model.save(modelsToSave))<br>.done(function(){<br>console.log('All Models Saved.');<br>dfd.resolve();<br>})<br>.fail(function(){<br>console.log('All Model Save Failed.');<br>dfd.reject();<br>});<br>return dfd.promise();<br>},<br>'cancelAllSnippet': function(){<br>skuid.model.cancel(skuid.model.list());<br>},

Hey Matt, this is really helpful! I do have one question though: since we use page includes, additional models may be loaded onto the page at any time. Do these snippets take that into consideration?

Good question. Yes, this accounts for all models, even models added later. I built it for exactly the same reason as you.

I’m thinking about putting out a custom component with this specific functionality. Seems like a global save/cancel would be helpful in a lot of circumstances.

Much appreciated! I think a lot of people would get great use of out a global save/cancel custom component.