Is there any way to disable Editor form buttons?

Is there any way to disable Editor form buttons?

loukinglouking Posts: 143Questions: 28Answers: 0

I have the following code, but want different 'edit' buttons to be desensitized based on values within the form fields. Is this possible? I don't see any way to desensitize a button on a form in the button options, buttons api, etc.

Note: I'd like the buttons to be sensitized / desensitized in real time depending on current contents of the fields which are being changed by the user.

    editor.on('open', function( e, mode, action ) {
        // set buttons for create
        if ( action == 'create' ) {
            this.buttons( 'Create' );

        // set buttons for edit
        } else if ( action == 'edit' ) {
            this.buttons([
                    {
                        text: 'Resend Contract',
                        action: function () {
                            this.submit(null, null function(data) {
                                data.addlaction = 'resendcontract';
                            });
                        }
                    },
                    {
                        text: 'Mark Invoice Sent',
                        action: function () {
                            this.field( 'invoiceSentDate' ).set( currentdate() );
                            this.submit();
                        }
                    },
                    {
                        text: 'Mark as Paid',
                        action: function () {
                            this.field( 'paymentRecdDate' ).set( currentdate() );
                            this.submit();
                        }
                    },
                    {
                        text: 'Update',
                        action: function () {
                            this.submit();
                        }
                    },
                    {
                        text: 'Update and Send Contract',
                        action: function () {
                            this.submit(null, null, function(data) {
                                data.addlaction = 'sendcontract';
                            });
                        }
                    },

                ]);

        // set buttons for remove (only other choice)
        } else {
            this.buttons( 'Delete' );
        }

        return true;
    });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 48,282Questions: 1Answers: 6,967 Site admin
    edited November 9

    Hi,

    It is possible, but its a little bit of a workaround. Basically you would need to use the buttons() API method to create new buttons based on whatever conditional logic you have. There isn't currently a way to update the existing buttons as they don't each have their own API methods.

    If a button is to be disabled, then it should have a noop action function and a class such as "disabled" on the button (className property) to be able to visually style it as disabled (or really noop in this case).

    Allan

  • loukinglouking Posts: 143Questions: 28Answers: 0

    I think you mean the buttons() api, right?

    I think that would work based on the values of the fields when the form is brought up, but not if the field values change while the form is active.

    What's the best way to add a change function for the fields which affect the buttons? I think probably using https://editor.datatables.net/reference/api/field().node() -- that finds the field container, right?

    I also need to find the button to add/delete "disabled" class within the field change handler.

  • allanallan Posts: 48,282Questions: 1Answers: 6,967 Site admin
    Answer ✓

    I did indeed - sorry. Typo fixed :). Note that it is Editor's buttons() method I'm referring to here. The Buttons extension puts a method by the same name on the DataTables API chain.

    What's the best way to add a change function for the fields which affect the buttons?

    dependent() probably.

    I also need to find the button to add/delete "disabled" class within the field change handler.

    Yes - its not so much as finding them in the DOM, since as I mentioned its a case of rebuilding them completely. I'd suggest having a function that you can call which parameters to match the various options for the states the buttons can be in.

    Allan

  • loukinglouking Posts: 143Questions: 28Answers: 0
    edited November 10

    For anyone else who finds this, here's some example code, including the call to dependent() and handling the form open. (but note https://datatables.net/forums/discussion/53040/dependent-doesnt-fire-for-field-where-type-date)

    afterdatatables() is called after datatables and editor are initialized, and this and that variables are simply the editor instance.

    // configure form buttons
    function configurebuttons( that, action ) {
        // set buttons for create
        if ( action == 'create' ) {
            that.buttons( 'Create' );
    
        // set buttons for edit
        } else if ( action == 'edit' ) {
            // is current state selection in ['committed', 'contract-sent']?
            var contractsent = ['committed', 'contract-sent'].includes( that.field( 'state.id' ).inst('data')[0].text );
            that.buttons([
                    {
                        text: 'Resend Contract',
                        className: ( that.field( 'contractDocId' ).get() ) ? 'enabled' : 'disabled',
                        action: function () {
                            if ( that.field( 'contractDocId' ).get() ) {
                                that.submit(null, null, function(data) {
                                    data.addlaction = 'resendcontract';
                                });
                            }
                        }
                    },
                    {
                        text: 'Mark Invoice Sent',
                        className: ( that.field( 'invoiceSentDate' ).get() ) ? 'disabled' : 'enabled',
                        action: function () {
                            if ( ! that.field( 'invoiceSentDate' ).get() ) {                 
                                that.field( 'invoiceSentDate' ).set( currentdate() );
                                that.submit();
                            }                    
                        }
                    },
                    {
                        text: 'Mark as Paid',
                        className: ( that.field( 'paymentRecdDate' ).get() ) ? 'disabled' : 'enabled',
                        action: function () {
                            if ( ! that.field( 'paymentRecdDate' ).get() ) {                 
                                that.field( 'paymentRecdDate' ).set( currentdate() );
                                that.submit();
                            }
                        }
                    },
                    {
                        text: 'Update',
                        action: function () {
                            that.submit();
                        }
                    },
                    {
                        text: 'Update and Send Contract',
                        className: ( contractsent ) ? 'disabled' : 'enabled',
                        action: function () {
                            if ( ! contractsent ) {
                                that.submit(null, null, function(data) {
                                    data.addlaction = 'sendcontract';
                                });
                            }
                        }
                    },
    
                ]);
    
        // set buttons for remove (only other choice)
        } else {
            that.buttons( 'Delete' );
        }
    }
    
    // set up buttons for edit form after datatables has been initialized
    function afterdatatables() {
        editor.on('open', function( e, mode, action ) {
            // set up the buttons
            configurebuttons( this, action );
    
            return true;
        });
    
        // regenerate the edit buttons if certain fields change
        editor.dependent([ 'state.id', 'contractDocId', 'invoiceSentDate', 'paymentRecdDate' ], function( val, data, callback ) {
            configurebuttons( editor, editor.mode() );
            return {};
        });
    }
    
    
  • allanallan Posts: 48,282Questions: 1Answers: 6,967 Site admin

    Very nice - thanks for sharing that with us.

    Allan

Sign In or Register to comment.