Buttons: grey out and disable click functions

  • 1
  • Question
  • Updated 3 years ago
  • Answered
When clicking on a row action or editing a record, I would like to disable certain buttons. 

Example 1: When clicking on row action to view an existing contact, I would like the cancel button greyed out and disabled. You dont cancel an existing contact, but when you are editing the contact on the same page, you need a cancel button to cancel any changes the user has made. 

Example 2: When clicking a custom edit button, I would like the button to be greyed out and disabled. Then after a custom save button is clicked, make the button active and enabled. 
Photo of Brooke Trainer

Brooke Trainer

  • 90 Points 75 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Moshe. 
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Similar use case where I had to provide a global Save button with multiple actions.  Here's the code:


  1. Create a snippet responsible for enabling/disabling the button
  2. Register the snippet and call it during page load
  3. Create a model action to execute the snippet (in my case I do it for initiating events and all fields
  4. So far is working nicely


On-load JS

(function(skuid){	        
var $ = skuid.$;
    
    // Register a snippet to run 
    skuid.snippet.registerSnippet('EnableDisableGlobalSaveButton', function(){
        var model = skuid.model.getModel('QuoteLineItems');
        if (model.hasChanged) {
            $('#globalSaveButton').button('enable');
        } else {
            $('#globalSaveButton').button('disable');
        }
    });
    
    // Run the snippet initially on page load
    $('.nx-page').one('pageload',function(){
        skuid.snippet.getSnippet('EnableDisableGlobalSaveButton')();
    });
})(skuid);



Inline Code for model event

var params = arguments[0],
$ = skuid.$;
skuid.snippet.getSnippet('EnableDisableGlobalSaveButton')();


Enjoy!
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
Thanks Irvin, this worked for me after a small correction,
In here; on-load JS should be should be an In-line event in order to execute on-Load of the page and code for model event should be a snippet
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
In Banzai, page title buttons now have "Enable Rendering" as well as "Conditional Rendering" -- javascript no longer needed! :)