Event listener for changes in all models

Hi all,

I’ve built custom save and cancel buttons on a Skuid page I’ve built which includes multiple page includes. Right now they both enabled at all times. Ideally I would like to enable the buttons only when at least one of the models detected on the page has unsaved changes as it seems more user-friendly.

Has anyone done something similar? I checked the events documentation, but nothing quite seemed to fit. I’m sure I could hack something together, like using a setInterval function to poll for changes, but I’m wondering if anybody has any better solutions?

Thanks in advance!


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.