Custom Elements Placement¶

Plugins can add custom elements into three possible areas of the cTrader UI, namely the 'Active Symbol Panel' (ASP), a new tab in the 'Trade Watch' display, and a custom chart frame. In this guide, we demonstrate how you can use all of these options and suggest relevant use cases.

Plugin Placement in One Minute!

By extending the cTrader UI you can easily integrate third-party services with the trading terminal.
The same plugin can execute different functionalities in different areas of the UI. Unleash your creativity to customise the look and feel of cTrader!
You can make it so the custom elements created by the plugin can be detached/attached to and from their original places in the cTrader UI.
Different ideas may be more suited to certain areas of the UI than others. Experiment with placement to find out what works best!

Using the ASP¶

The ASP is located to the right of the chart display. A plugin can add one more custom elements using the following options.

As an AspTab. When this option is used, the plugin displays custom elements in separate tab(s) alongside 'Symbol', 'DoM' and others.
As an AspBlock. When this option is used, the plugin displays custom elements in the 'Symbol' tab in new collapsible/expandable section(s) with with customisable titles and positions.

Here is how the same plugin looks as a block and as a tab.

AspBlockAspTab

Use Cases

Here are some ideas for pluggins displaying custom elements in an ASP block.

A small calculator of protection levels for a given symbol.
A grid displaying additional information about the currently active symbol.

The following ideas would function best when embedded as an ASP tab.

A list containing custom analytics about all currently open positions.
A WebView of a financial news outlet.

To add custom elements as an ASP block, use the Asp.SymbolTab.AddBlock(string title) method.

var child = ... // Insert the contents you want the block to have here
AspBlock aspBlock = Asp.SymbolTab.AddBlock("Cool Plugin");
aspBlock.Child = child; 

To add custom elements as an ASP tab, use the Asp.AddTab(string title) method.

var child = ... // Insert the contents you want the tab to have here
AspTab pluginTab = Asp.AddTab("Another Cool Plugin");
pluginTab.Child = child;

To determine the order in which a block/tab appears in the ASP, use the Index property of AspBlock and AspTab, respectively.

Block/Tab Order

Note that no custom tabs can be placed before the 'Symbol' tab. You also cannot embed your block higher than the 'New Order' section in the 'Symbol' tab. As a result, the smallest possible index for block embedded into the ASP is 1.

Using the 'Trade Watch' Display¶

The 'Trade Watch' display is located just below the chart area. You can add custom elements there as a separate tab.

Here is how a plugin could look like when added to the display.

Use Cases

The following ideas are suited for being shown in the 'Trade Watch' display.

A custom analytics suite showing various statistics about the user's current account.
A WebView of a trading-oriented web forum.

To add custom elements as a new tab in the 'Trade Watch' display, use the Trade Watch.AddTab(string title) method.

var child = ... // Insert the contents you want the plugin to have here
Trade WatchTab Trade WatchTab = Trade Watch.AddTab("Yet Another Cool Plugin");
Trade WatchTab.Child = child;

Similarly to ASP blocks and tabs, you can use the Index property of a Trade WatchTab to define its position relative to other tabs in the 'Trade Watch' display.

Note

All custom tabs placed into the 'Trade Watch' display appear only to the far-right of the default tabs included in the cTrader UI upon the first launch of the terminal. Subsequently, the the Index of these tabs must be 1 or greater; the index only determines the relative position of plugin tabs compared to other plugin tabs.

Using Chart Frames and Custom Frames¶

You can also choose to display custom elements in a separate chart frame, essentially adding it as a new chart to your current chart view. Additionally, plugin may open any number of charts for any available symbols and chart frames.

Here is how a custom chart frame with a WebView looks like next to a regular chart.

Use Cases

The following ideas would look and work at their best when embedded in a custom frame.

A WebView of another charting service.
A large-scale custom trading panel.
A WebView of a generative AI service that that a trader may consult with when deciding how to react to market movements.

To add a new custom frame, use the ChartManager.AddCustomFrame(string title) method.

var child = ... // Insert the contents you want the plugin to have here
var newCustomFrame = ChartManager.AddCustomFrame("Best Plugin");
newCustomFrame.Child = child;

For your plugin to open a new chart, use the ChartManager.AddChartFrame(string symbolName, TimeFrame timeFrame) method.

var newChart = ChartManager.AddChartFrame("EURUSD", TimeFrame.Day2);

Chart Modes

As soon as a plugin adds a new custom frame or a new chart, cTrader will switch to the multi-chart mode even if the single chart mode or the free-chart mode was enabled previously.

Creating an Example Plugin¶

The following plugin uses all three placement methods covered above.

The plugin displays the sum of commissions for all currently open positions in an ASP block.
In the 'Trade Watch' display, the plugin shows the cumulative volume of all open positions.
The plugin also shows a WebView of ctrader.com in a custom chart frame.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class PluginPlacementTest : Plugin
    {

        private TextBlock _commissionsText;
        private TextBlock _volumeText;
        private WebView _cTraderWebView;

        protected override void OnStart()
        {
            _cTraderWebView = new WebView();
            _cTraderWebView.Loaded += ShowWebsite;

            _commissionsText = new TextBlock
            {
                Text = ShowCommissions(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            _volumeText = new TextBlock
            {
                Text = ShowVolume(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            ChartManager.AddCustomFrame("cTrader.com").Child = _cTraderWebView;
            Asp.SymbolTab.AddBlock("Commissions").Child = _commissionsText;
            Trade Watch.AddTab("Volume").Child = _volumeText;
            Timer.Start(TimeSpan.FromSeconds(0.5));

        }

        protected void ShowWebsite(WebViewLoadedEventArgs args)
        {
            _cTraderWebView.NavigateAsync("https://ctrader.com");
        }

        protected string ShowCommissions()
        {
            double commissionsCounter = 0;
            foreach (var position in Positions)
            {
                commissionsCounter += position.Commissions;
            }
            return commissionsCounter.ToString();
        }

        protected string ShowVolume() 
        {
            double volumeCounter = 0;
            foreach (var position in Positions) 
            {
                volumeCounter += position.VolumeInUnits;
            }
            return volumeCounter.ToString();
        }

        protected override void OnTimer()
        {
            _commissionsText.Text = ShowCommissions();
            _volumeText.Text = ShowVolume();
        }
    }
}

In summary, cTrader provides several options for placing custom elements via plugins. You can use them to customise the cTrader UI and truly make the platform yours.