addToolbarButton

The addToolbarButton function allows you to add custom buttons to the application toolbar. While brixxbox provides standard buttons for common operations like creating, saving, or deleting records, this function enables you to extend the toolbar with your own specialized functionality.

Syntax

app.addToolbarButton(buttonOptions);

The function takes a configuration object (buttonOptions) as its parameter that defines the button's appearance and behavior.

Parameters

The buttonOptions object can contain the following properties:

Property	Type	Description
title	String	The tooltip text that appears when hovering over the button
icon	String	Font Awesome icon name (without the "fa-" prefix)
text	String	Optional text to display on the button
id	String	Unique identifier for the toolbar button
cssClass	String	CSS class(es) to apply to the button, e.g., "btn-success"
group	String	Groups related buttons together
position	String	Button position in the toolbar (defaults to "left")
onclick	Function	Callback function that executes when the button is clicked
disabled	Boolean	Set to true to initially disable the button
visible	Boolean	Set to false to initially hide the button
shortcut	String	Keyboard shortcut for the button, e.g., "Ctrl-Alt-P"

Return Value

The function doesn't return any value.

Behavior

When calling addToolbarButton, the function:

• Automatically sets position to "left" if not specified
• Sets brixxApi property to the current app instance
• Renders the button in the application toolbar

Examples

Basic Usage

app.addToolbarButton({
    title: "Print Invoice",
    icon: "print",
    id: "printInvoiceBtn",
    onclick: function() {
        app.triggerEvent("click", "printInvoiceControl");
    }
});

Advanced Example with Additional Options

This example shows how to create a more customized button with text, styling, and grouping:

app.addToolbarButton({
    title: "Export to Excel",
    icon: "file-excel",
    text: "Export",
    group: "export",
    id: "exportToExcelBtn",
    cssClass: "btn-outline-success",
    onclick: function() {
        // Export logic here
        app.triggerEvent("exportToExcel", "dataGrid");
    },
    disabled: false,
    visible: true
});

Using in App Events

You can add buttons when the app initializes by placing this code in the onAppInitialized event:

app.addToolbarButton({
    title: "Generate Report",
    icon: "chart-bar",
    text: "Report",
    group: "reports",
    id: "generateReportBtn",
    cssClass: "btn-primary",
    onclick: async function() {
        // Show report generation dialog
        await app.setFieldValue("showReportDialog", 1);
    }
});

Tips

• Use clear and meaningful icons that represent the button's action
• Group related buttons together for better organization
• For frequently used actions, consider adding keyboard shortcuts
• Keep button text short and descriptive
• Use standard Bootstrap button classes for consistent styling:
  • btn-primary: Blue - for primary actions
  • btn-success: Green - for positive actions like saving
  • btn-danger: Red - for destructive actions
  • btn-warning: Yellow - for actions that need caution
  • btn-info: Light blue - for informational actions
  • btn-outline-*: Outlined versions of the above styles

Visual Example

Example of custom toolbar buttons in a brixxbox application

Remember that toolbar buttons should provide quick access to important functions. For less frequently used actions, consider placing them in other UI elements instead of adding too many toolbar buttons.