Skip to content

UI Toolbar Button handling

Victor Tomaili edited this page May 3, 2021 · 1 revision

Splitted the cheat sheet of Wesley Huang into more specific parts for easier finding the topics.


Add or Remove a Toolbar Button

Need to add or remove a Toolbar Button? Easy.

For Grid.ts:

protected getButtons(): Serenity.ToolButton[] {

    var buttons = super.getButtons();

    //Remove a Button
    buttons.splice(Q.indexOf(buttons, x => x.cssClass == "<Class of Button to remove> Example: 'add-button'"), 1);

    //Add a Button
    buttons.push({
        title: "<title of Button>",
        hint: "<Hover hint of button>",
        cssClass: "<Css defined class of button> Example: 'add-note-button' ",
        icon: "<Icon to use with button> Example:  'fa-hand-lizard-o'",
        onClick: () => { /*Add Function Here */ }                                                 
    })

    return buttons;
}

For Dialog.ts:

protected getToolbarButtons(): Serenity.ToolButton[] {
    let buttons = super.getToolbarButtons();

    //Remove Button
    buttons.splice(Q.indexOf(buttons, x => x.cssClass == "<Class of Button to remove> Example: 'save-and-close-button'"), 1);

     //Add a Button
     buttons.push({
        title: "<title of Button>",
        hint: "<Hover hint of button>",
        cssClass: "<Css defined class of button> Example: 'add-note-button' ",
        icon: "<Icon to use with button> Example:  'fa-hand-lizard-o'",
        onClick: () => { /*Add Function Here */ }
    })
    return buttons;
}           

Clone this wiki locally