# Order Ticket ## Overview The **Order Ticket** (also known as Order Panel) is a dialog that allows users to place orders. Users can open this dialog in several ways: - By clicking the *Trade* button in the [Account Manager]. - By clicking the *Plus* button on the [Price Scale]. - By clicking the *Buy Market* and *Sell Market* buttons in the [Legend]. - By right-clicking the chart and selecting *Trade → Create new order…* in the context menu. ## Disable Order Ticket The Order Ticket is enabled by default, but you can disable it using the [`order_panel`] featureset. Note that disabling this featureset also hides the *Trade* button in the [Account Manager]. ## Configure order types The library supports four [order types]: limit, market, stop, and stop-limit. By default, users can select market, limit, and stop orders in the Order Ticket. But you can disable support for these order types via the [`supportMarketOrders`], [`supportLimitOrders`], and [`supportStopOrders`] flags, respectively. You can also enable a stop-limit order type by setting [`supportStopLimitOrders`] to `true`. Refer to the [Trading features configuration][config-flags] section for more information on setting configuration flags. ## Change text for quantity units To customize the text displaying quantity units in the Order Ticket, use the [`units`] field within the `InstrumentInfo` object. You should return this object when the library calls the [`symbolInfo`] method. ## Add custom fields If you want to add custom fields to the Order Ticket dialog, implement the [`getOrderDialogOptions`] method within your [Broker API] implementation. The method should return the [`OrderDialogOptions`] object. This object should contain the `customFields` property of the [`TradingDialogCustomField`] type. Note that the available custom field types are limited to combobox, checkbox, text field, and text field with checkbox. Similarly, you can add custom fields to the *Positions* dialog by implementing the [`getPositionDialogOptions`] method. :::info The library does not support adding custom fields to the *Order info* section of the Order Ticket. The information displayed there, such as pip value, is derived from the [`InstrumentInfo`] interface when certain broker [configuration flags][config-flags] are enabled. Consider providing additional details in the [order preview dialog](#enable-order-preview). ::: ## Enable order preview You can show users additional order details before modifying or placing orders. For example, you can display the estimated order cost, commission, expiry date, and any warning or error messages as a part of the order preview dialog. In these messages, you can provide links to external URLs, such as specific T&Cs. Note that users can still clear the *Show order confirmations* checkbox in the [ellipsis menu](#order-confirmations), meaning that the order preview dialog will not appear. To enable order preview, follow the steps below: 1. Set the following flags to `true`: - [`supportPlaceOrderPreview`] enables an order preview dialog before users place orders. - [`supportModifyOrderPreview`] enables an order preview dialog before users modify orders. Refer to the [Trading features configuration][config-flags] section for more information on setting configuration flags. 2. Implement the [`previewOrder`] method within your Broker API implementation. When users click *Buy order* or *Modify order* in the Order Ticket, the library calls `previewOrder`. This method returns the [`OrderPreviewResult`] object with the necessary information that is displayed in the order preview dialog. Within the object, you can: - Set a unique confirmation ID via `confirmId`. Note that it should be passed as a parameter to `modifyOrder` or `placeOrder`. - Customize extra fields using `sections`. - Set up text for warnings and errors using the `warnings` and `errors` properties. The warnings and errors are displayed below the order details in colored boxes. :::caution You will get the *Order preview is not supported* issue in the console if `supportPlaceOrderPreview` and `supportModifyOrderPreview` are enabled, but `previewOrder` is not implemented. ::: 3. Implement the [`modifyOrder`] and [`placeOrder`] methods. The library calls them right after users click *Send Order* in the order preview dialog: - `modifyOrder` is called when users want to modify existing orders. - `placeOrder` is called when users want to place new orders. You can check the implementation of the order preview dialog in the CodePen below. See the Pen Untitled by TradingView (@tradingview) on CodePen. ## Enable bracket controls You can display controls for adding bracket orders in the Order Ticket dialog. [Bracket orders] allow users to protect their positions. To add controls, enable the [`supportOrderBrackets`] flag. If you also enable [`supportMultipleExitLevels`], the *Add level* button will appear within the bracket sections. This allows users to protect orders and positions with multiple brackets at different price levels and quantities. You can also disable bracket controls only for market orders by setting the [`supportMarketBrackets`] flag to `false`. ## Manage ellipsis menu Users can access additional Order Ticket settings in the ellipsis menu. You can also programmatically [get and set values](#get-and-set-settings) for these settings. ### Default settings By default, and without specifying any [configuration flags][config-flags], the Order Ticket has the following settings shown in the ellipsis menu: - *Show Order Price in Ticks* - *Show Quantity in Money Risk* - *Show Quantity in % Risk* ### Brackets settings If you set the [`supportOrderBrackets`], [`supportMarketBrackets`], or [`supportPositionBrackets`] flags to `true`, the *Show TP/SL inputs in Money* and *Show TP/SL inputs in %* settings will appear in the ellipsis menu. :::info Note that these settings will not have any impact when used in [crypto brackets](#enable-crypto-brackets-settings). Selecting and clearing these checkboxes will not be visually reflected. ::: ### Order confirmations :::tip The [`supportPlaceOrderPreview`] and [`supportModifyOrderPreview`] flags enable order preview. It allows showing users additional order details before modifying or placing orders. Refer to [Enable order preview](#enable-order-preview) for more information. ::: If you set the [`supportPlaceOrderPreview`] or [`supportModifyOrderPreview`] flags to `true`, the *Show order confirmations* will appear in the ellipsis menu. ### Get and set settings You can programmatically access and change settings, available in the ellipsis menu. To do this, use the [`getOrderTicketSetting`] and [`setOrderTicketSetting`] methods of the [Trading Host]. You can find the full list of properties in the [OrderTicketSettings] interface. ## Enable crypto brackets settings The [`supportCryptoBrackets`] flag enables crypto brackets and displays additional settings within the *Take Profit* and *Stop Loss* brackets: *Money* and *%*. ## Enable Time in force menu You can enable the *Time in force* drop-down menu that allows users to specify order duration. Duration determines how long the order remains active. To enable the menu, provide [`durations`] within the `SingleBrokerMetaInfo` object assigned to [`broker_config`]. The `durations` property is an array of [`OrderDurationMetaInfo`] objects that specify the order duration settings. For example, you can adjust a duration value or title that is displayed in the UI. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", broker_factory: function(host) { return new Brokers.BrokerDemo(host, datafeed); }, broker_config: { configFlags: { // Configuration flags }, // highlight-start durations: [ { name: 'DAY', value: 'DAY' }, // Day orders { name: 'GTC', value: 'GTC' }, // Good-Til-Canceled orders ], // highlight-end }, }) ``` Note that the duration options are displayed for limit, stop, and stop-limit order types by default. However, if you want to specify a different set of duration options for a particular type, you need to provide this information in the [`supportedOrderTypes`] array of the `durations` property. ## Enable margin meter The margin meter is a visual indicator in the *Order info* section of the Order Ticket that shows users how much of their available margin the order will use. It helps traders assess risk before placing an order. To enable the margin meter, follow the steps below: 1. Set the [`supportMargin`] flag to `true` in the [widget constructor]. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", broker_factory: function(host) { return new Brokers.BrokerDemo(host, datafeed); }, //highlight-start broker_config: { configFlags: { supportMargin: true, }, }, //highlight-end }) ``` 2. Provide the [`marginRate`] property in the [`InstrumentInfo`] object returned by the [`symbolInfo`] method. The `marginRate` value represents the margin requirement for the instrument. For example, a 3% margin rate should be represented as `0.03`. 3. Implement the [`subscribeMarginAvailable`] method within your [Broker API] implementation. The library calls this method to subscribe to margin available updates for a given symbol. Once called, your implementation should provide margin available updates via the [`marginAvailableUpdate`] method of the [Trading Host]. 4. Implement the [`unsubscribeMarginAvailable`] method. The library calls this method when it no longer needs margin available updates for the symbol. Once called, your implementation should stop providing updates. ```js class MyBroker { // Return marginRate in InstrumentInfo async symbolInfo(symbol) { return { // ...other fields marginRate: 0.03, // 3% margin requirement }; } // Subscribe to margin available updates subscribeMarginAvailable(symbol) { // Start providing margin updates via the Trading Host this._host.marginAvailableUpdate(/* current available margin */); } // Stop providing margin available updates unsubscribeMarginAvailable(symbol) { // Clean up margin subscriptions } } ``` :::tip For a complete Broker API implementation including the margin meter, refer to the [broker sample][broker-sample] 🔐 (access is [restricted][get-access]) on GitHub. ::: ## Implement custom Order Ticket You can display your own Order Ticket instead of the built-in one. To do this, you should provide [`customUI`] within the `SingleBrokerMetaInfo` object assigned to [`broker_config`]. The values of [`customUI`] are functions that Trading Platform calls to show several dialogs, including the Order Ticket. Each function returns a Promise object that should be resolved when the operation is finished or canceled. Note that the returned Promise object should be resolved with either a `true` or `false` value. ```js const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"); new TradingView.widget({ container: "chartContainer", locale: "en", library_path: "charting_library/", datafeed: datafeed, symbol: "AAPL", interval: "1D", broker_factory: function(host) { return new Brokers.BrokerDemo(host, datafeed); }, broker_config: { configFlags: { // Configuration flags }, // highlight-start customUI: { showOrderDialog: (order, focus) => Promise; }, // highlight-end }, }) ``` [Account Manager]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/account-manager.md [Bracket orders]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts/brackets.md [Broker API]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md#broker-api [Legend]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Legend.md [order types]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts/orders.md#order-types [Price Scale]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Price-Scale.md [config-flags]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts/trading-features-configuration.md [`broker_config`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.TradingTerminalWidgetOptions#broker_config [`customUI`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.SingleBrokerMetaInfo#customui [`durations`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.SingleBrokerMetaInfo#durations [`getOrderDialogOptions`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#getorderdialogoptions [`getOrderTicketSetting`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerConnectionAdapterHost#getorderticketsetting [`getPositionDialogOptions`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#getpositiondialogoptions [`InstrumentInfo`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.InstrumentInfo [`modifyOrder`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#modifyorder [`OrderDialogOptions`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.OrderDialogOptions [`OrderDurationMetaInfo`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.OrderDurationMetaInfo [`order_panel`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#order_panel [`OrderPreviewResult`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.OrderPreviewResult [OrderTicketSettings]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.OrderTicketSettings [`placeOrder`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#placeorder [`previewOrder`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#previeworder [`setOrderTicketSetting`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerConnectionAdapterHost#setorderticketsetting [`supportLimitOrders`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportlimitorders [`supportMarketBrackets`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportmarketbrackets [`supportMarketOrders`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportmarketorders [`supportModifyOrderPreview`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportmodifyorderpreview [`supportMultipleExitLevels`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportmultipleexitlevels [`supportedOrderTypes`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.OrderDurationMetaInfo#supportedordertypes [`supportOrderBrackets`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportorderbrackets [`supportPlaceOrderPreview`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportplaceorderpreview [`supportPositionBrackets`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportpositionbrackets [`supportStopLimitOrders`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportstoplimitorders [`supportStopOrders`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportstoporders [`supportCryptoBrackets`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportcryptobrackets [`supportMargin`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportmargin [`marginAvailableUpdate`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerConnectionAdapterHost#marginavailableupdate [`marginRate`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.InstrumentInfo#marginrate [`subscribeMarginAvailable`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#subscribemarginavailable [`unsubscribeMarginAvailable`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#unsubscribemarginavailable [`symbolInfo`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#symbolinfo [`TradingDialogCustomField`]: https://charting-library-docs.xstaging.tv/latest/api/modules/Charting_Library#tradingdialogcustomfield [Trading Host]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md#trading-host [`units`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.InstrumentInfo#units [widget constructor]: https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md [broker-sample]: https://github.com/tradingview/trading_platform/tree/master/broker-sample "The repository is private." [get-access]: https://charting-library-docs.xstaging.tv/latest/quick-start.md#1-get-access "Click to open the 'Getting Access' section." --- ## Sitemap - [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt) - [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)