How do I en/dis-able a custom save button?

I too would dig that if it were so.

In fact, what I need here might be slightly different to Peter. I have a custom Save button not because I want to do something before the save, but something after, i.e. in the callback. Would be great to have an attribute on the Save button (also on Cancel while we’re at it) called After Save Snippet Name. Then we could leverage the standard Save button behaviour and simply run the custom callback logic in the snippet. So it’s just like After Save Redirect URL, but a snippet instead of a URL.

Good idea, Glenn.

Actually, given the possibilities of conditional rendering now, it would be even cooler if I could render a button based on an “is changed” condition of any model. That way custom save/cancel buttons could appear only when necessary.

Hi Peter, To add a little extra to the the approach Glen outlined, we did a few circus tricks so as to match the visual feel of the standard Skuid buttons with our extra buttons, i.e. so the buttons become active when the affected models are changed, and become inactive when changes are cleared. Rather than attempting to monitor the affected models directly, I addressed the requirement by by extending the jQuery-ui button widget so that it raises “enable” and “disable” events. By binding a handler for each event on one of the Skuid buttons when it is created (we used the save button), I could apply the correct styling and state to the extra buttons (which we gave an extra class so we could identify them for this purpose). They appear to behave in lock step with the Save & Cancel buttons. The beauty of this method is that we only have to run the code once and it works everywhere without additional code to bind specific models. This is our implementation of the extended button widget:

skuid.$.widget( "ui.button", skuid.$.ui.button, { enable: function(){ this.buttonElement.triggerHandler('enable'); return this._super(); }, disable: function(){ this.buttonElement.triggerHandler('disable'); return this._super(); } }); 

Also, to emulate the Save and do something" feature Glen mentioned, we provided a ‘saveAndRedirect’ function that is called in a snippet referenced by an extra button. In our case we want to save and redirect somewhere, so this function is passed the context of the calling snippet, and a template for the URL we want to hit after the save:

cp.saveAndRedirect = function(params, urlTemplate){ if(!params.button.hasClass('ui-state-disabled')) { skuid.model.save([params.model], {callback: function(result){ var redirectTo = skuid.Mustache.render(urlTemplate, params.row); window.location = redirectTo; }}); } } 

A sample of a snippet called by the extra button:

cp.saveAndRedirect(arguments[0], '/apex/{{{lorum_ipsum}}}View?id={{{Id}}}'); 

You could easily adapt this approach to do something before the model is saved.

Dan, this sounds great. Can you be a bit more specific about the steps necessary to use your first example? The code you provided is a Snippet for the page, right? What else do I need to add to the buttons or page to make them en/disable? (Sounds like I need a specific class name for the buttons?)

I would also like to see more specifics about the steps necessary to implement the first example… anybody successfully extending and handling the disable/enable events?