Implement Broker API

Overview

This step-by-step tutorial walks you through implementing the required methods to enable basic trading functionality using the Broker API. By the end of this guide, you'll know how to:

• Set up the widget and connect it to your broker implementation.
• Make symbols tradable and provide detailed instrument data.
• Enable trading buttons, Account Manager, and Order Ticket.
• Load and manage orders.

This tutorial is split into two parts:

1. Enable trading UI — focuses on setting up the UI and activating key trading components like the Order Ticket and Account Manager.
2. Manage orders — covers how to store, return, and update orders to make the trading flow functional.

info

This guide focuses on the bare minimum needed to get trading components working. Once complete, you’ll have a functional mocked Broker API implementation — ideal for testing UI and workflows before connecting to a real backend.

Before you start

Consider taking the following steps before proceeding with the tutorial:

1. Set up the Widget Constructor and run the library. Refer to the First run tutorial for more information.
2. Connect data to the library. Refer to the Connecting data tutorial for more information.
3. (Optional) Enable debug logs for troubleshooting.

Class scaffold

The class used in broker.ts provides a skeleton implementation of the Broker API. Initially, all methods simply throw error messages — this helps highlight which methods are missing when the library tries to use them.

As you follow the tutorial, we’ll gradually replace these errors with basic mock implementations. This allows you to:

• Get a functional mock setup.
• See which UI components depend on which methods.
• Understand how the Broker API interacts with the library step by step.

Click to reveal broker.ts

import {
    AccountId,
    AccountManagerInfo,
    AccountMetainfo,
    ActionMetaInfo,
    ConnectionStatus,
    DefaultContextMenuActionsParams,
    Execution,
    IBrokerConnectionAdapterHost,
    IBrokerTerminal,
    InstrumentInfo,
    IsTradableResult,
    Order,
    OrderStatus,
    OrderType,
    PlacedOrder,
    PlaceOrderResult,
    Position,
    PreOrder,
    TradeContext,
} from '../node_modules/trading_platform/charting_library/charting_library';;

import { IDatafeedQuotesApi } from 'trading_platform';

export const enum CommonAccountManagerColumnId {
    // You should use this column ID if you want to fix the column in the positions and orders tables.
    Symbol = 'symbol',
}

export abstract class AbstractBrokerMinimal implements IBrokerTerminal {
    protected readonly _host: IBrokerConnectionAdapterHost;
    protected readonly _quotesProvider: IDatafeedQuotesApi;

    constructor(host: IBrokerConnectionAdapterHost, quotesProvider: IDatafeedQuotesApi) {
        this._host = host;
        this._quotesProvider = quotesProvider;
    }

    abstract orders(): Promise<Order[]>;

    abstract positions(): Promise<Position[]>;

    abstract modifyOrder(order: Order, confirmId?: string): Promise<void>;

    abstract cancelOrder(orderId: string): Promise<void>;

    abstract chartContextMenuActions(
        context: TradeContext,
        options?: DefaultContextMenuActionsParams
    ): Promise<ActionMetaInfo[]>;

    abstract isTradable(symbol: string): Promise<boolean | IsTradableResult>;

    abstract connectionStatus(): ConnectionStatus;

    abstract executions(symbol: string): Promise<Execution[]>;

    abstract symbolInfo(symbol: string): Promise<InstrumentInfo>;

    abstract accountManagerInfo(): AccountManagerInfo;

    abstract accountsMetainfo(): Promise<AccountMetainfo[]>;

    abstract currentAccount(): AccountId;

    abstract placeOrder(order: PreOrder): Promise<PlaceOrderResult>;
}

export class BrokerMinimal extends AbstractBrokerMinimal {
    orders(): Promise<Order[]> {
        throw new Error('Method `orders` not implemented.');
    }

    positions(): Promise<Position[]> {
        throw new Error('Method `positions` not implemented.');
    }

    modifyOrder(order: Order, confirmId?: string | undefined): Promise<void> {
        throw new Error('Method `modifyOrder` not implemented.');
    }

    cancelOrder(orderId: string): Promise<void> {
        throw new Error('Method `cancelOrder` not implemented.');
    }

    chartContextMenuActions(
        context: TradeContext,
        options?: DefaultContextMenuActionsParams | undefined
    ): Promise<ActionMetaInfo[]> {
        throw new Error('Method `chartContextMenuActions` not implemented.');
    }

    // If not implemented this method will render the Buy/Sell buttons with
    // a white background + tooltip indicating that the symbol cannot be traded.
    async isTradable(symbol: string): Promise<boolean | IsTradableResult> {
        throw new Error('Method `isTradable` not implemented.');
    }

    // If this method is not returning a Connected state, Account Manager will present a continuous loading spinner.
    connectionStatus(): ConnectionStatus {
        return ConnectionStatus.Connected;
    }

    executions(symbol: string): Promise<Execution[]> {
        throw new Error('Method `executions` not implemented.');
    }

    // If this method is not implemented the Buy/Sell buttons in the Legend
    // will display "..." (3 dots) instead of values returned by quotes.
    async symbolInfo(symbol: string): Promise<InstrumentInfo> {
        throw new Error('Method `symbolInfo` not implemented.');
    }

    // If this method is not implemented the Account Manager will be empty with just the "Trade" button displayed.
    accountManagerInfo(): AccountManagerInfo {
        throw new Error('Method `accountManagerInfo` not implemented.');
    }

    async accountsMetainfo(): Promise<AccountMetainfo[]> {
        throw new Error('Method `accountsMetainfo` not implemented.');
    }

    currentAccount(): AccountId {
        throw new Error('Method `currentAccount` not implemented.');
    }

    async placeOrder(order: PreOrder): Promise<PlaceOrderResult> {
        throw new Error('Method `placeOrder` not implemented.');
    }
}