How to add custom button to top toolbar

This guide shows how to add buttons to the top toolbar using the following methods:

createDropdown — creates a dropdown menu.
createButton — creates a customizable button.

Before you start

Consider taking the following steps before proceeding with the guide:

Set up the Widget Constructor and run the library. Refer to the Quick start for more information.
Connect data to the library. Refer to the Connecting data tutorial for more information.

Call the widget's headerReady method that ensures the toolbar is fully loaded before adding custom elements. The method returns a promise that will be resolved once the chart’s top toolbar is available for customization.
```
widget.headerReady().then(function () {});
```

Use the widget's createDropdown method to add a dropdown button to the top toolbar. This button will set a symbol on the chart.

widget.headerReady().then(function () {
    var dropdown = widget.createDropdown({
    title: "Select symbol",
    tooltip: "Select one of the symbols to load the chart with",
    items: [
        {
            title: "MSFT",
            onSelect: () => {
                widget.activeChart().setSymbol("MSFT");
            }
        },
        {
            title: "IBM",
            onSelect: () => {
                widget.activeChart().setSymbol("IBM");
            }
        }
    ]
    });
});

Add a custom button

Call the widget's headerReady method that ensures the toolbar is fully loaded before adding custom elements. The method returns a promise that will be resolved once the chart’s top toolbar is available for customization.
```
widget.headerReady().then(function () {});
```

Use the widget's createButton method to add a button that triggers a confirmation dialog when clicked. The widget's showConfirmDialog method displays a dialog box with a title, body text, and two buttons: Yes and No.

widget.headerReady().then(function () {
    var button = widget.createButton();
    button.textContent = "Show dialog";
    button.addEventListener("click", function () {
        widget.showConfirmDialog({
            title: "Accept Terms and Conditions",
            body: "By selecting Yes, you agree to the terms of use. Otherwise, select No to cancel.",
        }).then(function(result) {
            result ? console.log("The terms are accepted.") : console.log("The terms are not accepted.");
        });
    });
});

(Optional) If you're a Trading Platform user, you can alternatively use the showConfirmDialog method within the IBrokerConnectionAdapterHost interface.

Use the widget's createButton method to add a button that triggers a confirmation dialog when clicked.

widget.headerReady().then(function () {
    var buttonTwo = widget.createButton(); // Create a button
    buttonTwo.textContent = "Show dialog 2"; // Add the button title
    buttonTwo.addEventListener("click", function () {
        window.broker.showDialog(); // Trigger a custom dialog on click
    });
});

Define the showDialog method in the constructor of your Broker API class.

async showDialog() {
    const actionConfirmed = await this.host.showConfirmDialog(
        "Confirm action", // Dialog title
        [
        "This action cannot be undone. Please confirm to continue.",
        "Otherwise, you may close this dialog to retain the current settings."
        ], // Dialog content
        "Confirm", // Text for the button that returns true
        "Dismiss"  // Text for the button that returns false
    );
    if (actionConfirmed) {
        console.log("Action was confirmed.");
    } else {
        console.log("Action was not confirmed.");
    }
}

What's next?

If you want to dive deeper into how to customize the chart, we recommend checking the following documentation articles:

Before you start​

Add a dropdown button​

Add a custom button​

What's next?​

Before you start

Add a dropdown button

Add a custom button

What's next?