How To Show Bitcoin Price in Business Central?

This post is based entirely on the blog from Roberto Stefanetti so if you wish to learn further about widgets and the possibilities of ControlAddins make sure to check it out:

Recently it seems like everyone holds some sort of cryptocurrency and you never know if someone might want to track Bitcoin, Ethereum or even Dogecoin within their system. Business Central can let us know via widgets any crypto’s price and graph that we setup. The widget will be shown on the role center to consult at any time.

This can be done thanks to ControlAddins and JQuery.

For this purpose we will need two ‘.js’ files and one ‘.al’ file.

In this ‘.js’ file you can setup any crypto you might want to track. You can also change the size and color of the widget:

new TradingView.MediumWidget(
    {
    "symbols": [
      [
        "Bitcoin",
        "BTCUSD"
      ],
      [
        "Ethereum",
        "ETHUSD"
      ],
      [
        "Dogecoin",
        "DOGEUSD"
      ],
      [
        "Cardano",
        "ADAUSD"
      ]
    ],
    "chartOnly": false,
    "width": '100%',
    "height": 300,
    "locale": "en",
    "colorTheme": "light",
    "gridLineColor": "#F0F3FA",
    "trendLineColor": "#2196F3",
    "fontColor": "#787B86",
    "underLineColor": "#E3F2FD",
    "isTransparent": false,
    "autosize": true,
    "container_id": "tradingview_460f8",
  }
);

Then you will need the container of JavaScript:

const controlAddIn = $('#controlAddIn');

$("#controlAddIn").html( `
  <div class="tradingview-widget-container row">
    <div id="tradingview_460f8"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSD/" rel="noopener" target="_blank"><span class="blue-text">Bitcoin</span></a> by TradingView</div>
  </div> 
`); 

Finally, the ControlAddin, the’.al’ file that will tell Business Central how to build and shape our widget. TradingView will be the site that provides the information about the cryptocurrencies.

You can learn further about Control Addins in https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/devenv-control-addin-object

controladdin "CryptosAddin"
{
    RequestedHeight = 300;
    MinimumHeight = 300;
    MaximumHeight = 300;
    RequestedWidth = 700;
    MinimumWidth = 400;
    MaximumWidth = 700;
    VerticalStretch = true;
    VerticalShrink = true;
    HorizontalStretch = true;
    HorizontalShrink = true;
    StartupScript = 'src\controladdin\CryptosAddin\js\main.js';

    // SCRIPT Plugin
    Scripts =
            'https://code.jquery.com/jquery-3.6.0.min.js',// jquery  
            'https://s3.tradingview.com/tv.js',
            'src\controladdin\CryptosAddin\js\cryptos.js';

    StyleSheets = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',// bootstrap                      
                    'https://pro.fontawesome.com/releases/v5.10.0/css/all.css';// fontawesome

    event controlAddinReady()
}

The structure of files should look like this:

Finally we will embed the ControlAddin in the Role Center by extending the Business Manager Role Center:

pageextension 50101 "BusinessManagerExt" extends "Business Manager Role Center"
{    layout
    {
        addafter(Control9)
        {
            part(Cryptos; Cryptos)
            {
                ApplicationArea = All;
            }
        }
    }
}

In the Role Center will appear the widget we have built and we can also interact with it, change periodicity and, of course, see the other cryptos data:

Hope you find it useful.