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

  • 3
  • Question
  • Updated 4 years ago
  • Answered
I need some custom action (setting default values) to happen before saving a new record from my Skuid page, so I created a custom save button. However, I'd love it if it could enable/disable like the standard Skuid save button. How would I make that happen?
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 5 years ago

  • 3
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
I too would dig that if it were so.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
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.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Good idea, Glenn.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
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.
Photo of Dan A

Dan A

  • 314 Points 250 badge 2x thumb
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.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
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?)
Photo of Cari Drake

Cari Drake

  • 126 Points 100 badge 2x thumb
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?