addToolbarButton

Add Toolbar Buttons with different functionalities.

As we have already discussed in documentation of SetToolbarButtonMode. These are several buttons that are provided by Brixxbox for each app like adding new record, saving new record etc. These buttons provides general functionality needed by most of the apps but in case your app needs extra functionality, Brixxbox also allows this. It is provided by brixxApi function addToolbarButton. It takes a JSON object as a parameter. This JSON contains all the properties that defines this custom button as well as the functionality provided by it. The properties include name, id, and function to execute on clicking this button etc. Adds a custom button to the app toolbar.

Example

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

Parameters

1. toolbarButtonOptions - It is a JSON Object. In JSON object we passes parameters in the form of key value arguments.It include properties like name, id, function, etc.

Example Usages

As we have already seen a minimal custom print button in above example. Lets now add extra properties like group, css class, and shortcut for our print button. Now we also want this button to be added in our app toolbar on initialization. For this purpose goto current app properties and add onAppInitialized event. Now we need to add following code as a custom code to this event.

   brixxApi.addToolbarButton({
            title: "Print Invoice",
            icon: "print",
            text: "Rechnung drucken",
            group: "invoice",
            id: "printInvoiceToolbarButton",
            cssClass: "btn-success",
            onclick: async function () {
                brixxApi.triggerEvent("click", "printInvoiceBtn");
            },
            shortcut: "Ctrl-Alt-P"
        });

Now when our app is initialized, we can see our custom button on the app toolbar and it should look like this.

Example of the Button

We can also add different custom buttons to our app depending upon our own requirements.