More BC & Microsoft Teams Hacking – This time, sharing!

In this video, I continue to look at Teams integration, trying to answer the most asked question from the last video, how to share to Teams from Business Central. This video takes a slight detour around how to add a global button to the top bar.

https://youtu.be/GaL_YSULug4

In this second hacking session on Business Central and Microsoft Teams integration, Erik tackles the most frequently asked question from the first session: How do you share to Teams from Business Central? While the Teams integration allows viewing BC data within Teams, there’s no built-in mechanism to share a BC page directly to a Teams channel. Erik experiments with injecting a “Share to Teams” button into the Business Central top bar using JavaScript and AL control add-ins.

The Challenge

Erik starts by identifying the core problem: the integration between Business Central and Teams is essentially one-sided. You can paste BC links into Teams and get a rich card preview, but there’s no “Share to Teams” button within Business Central itself. Microsoft provides documentation on creating a Share to Teams embedded button, but Erik identifies two key challenges:

  1. Global placement: He doesn’t want to modify every single page to add a share button — it needs to be injected globally.
  2. Dynamic URLs: The URL changes as you navigate between pages, so a static link won’t work.

Discovering the Share URL

By running a debugger on Microsoft’s Share to Teams JavaScript widget, Erik discovered that underneath all the fancy button styling, the widget simply opens a URL:

https://teams.microsoft.com/share?href={URL_TO_SHARE}

Testing this manually in the browser confirmed it works — a Teams sharing dialog appears where you can select a channel and add a message. This meant the entire share mechanism could be reduced to a simple window.open() call.

Injecting into the Role Center

To make the button globally available, Erik’s approach is to inject it from the Role Center page, which persists as you navigate around Business Central. The first attempt was to add a user control directly to the Role Center page extension, but this hit two roadblocks:

  • Role Center pages don’t support regular content areas — only parts and groups
  • Role Center pages cannot have triggers

The solution was to create a separate CardPart page containing the user control, then embed that as a part in the Role Center extension.

The Control Add-in Definition

controladdin HTML
{
    StartupScript = 'startup.js';
    Scripts = 'scripts.js';
    HorizontalStretch = true;
    VerticalStre = true;
    RequestedHeight = 1;
    event ControlReady();
    procedure Render(HTML: Text);
    procedure AddTeams();
}

The Teams Part Page

A simple CardPart page hosts the user control and calls AddTeams() when ready:

page 50123 "Teams Part"
{
    PageType = CardPart;
    layout
    {
        area(Content)
        {
            usercontrol(HTMLctl; HTML)
            {
                ApplicationArea = All;
                trigger ControlReady()
                begin
                    CurrPage.HTMLctl.AddTeams();
                end;
            }
        }
    }
}

The Role Center Extension

The page extension adds the Teams part to the Business Manager Role Center:

pageextension 50123 "Teams Role Center" extends "Business Manager Role Center"
{
    layout
    {
        addlast(rolecenter)
        {
            part(teams; "Teams Part")
            {
                ApplicationArea = All;
            }
        }
    }
}

The JavaScript: Escaping the iframe

Business Central control add-ins run inside an iframe, so to inject a button into the main page’s top bar, the JavaScript needs to break out using window.top. Erik uses the browser inspector to identify a suitable DOM element — a div with the ID centerRegion — and injects a button into it.

The Startup Script

HTMLContainer = document.getElementById("controlAddIn");

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlReady",[]);

The Main Script

function Render(html)
{
    HTMLContainer.insertAdjacentHTML('beforeend',html);
}
function AddTeams()
{
    var topbar = window.top.document.getElementById('centerRegion');
    console.log(topbar);

    topbar.insertAdjacentHTML('afterbegin',
    '<div><button onclick="window.open(\'https://teams.microsoft.com/share?href=\'+ '+
    'encodeURIComponent(window.top.location.href)' +
    ',\'teamsshare\',\'width=700,height=600\')">Team</button></div>');
}

This is a tricky piece of “meta programming” — JavaScript generating an HTML string that itself contains JavaScript. A few key details:

  • window.top.document.getElementById('centerRegion') — breaks out of the control add-in iframe to access the main page DOM
  • insertAdjacentHTML('afterbegin', ...) — injects the button HTML at the beginning of the top bar region
  • encodeURIComponent(window.top.location.href) — encodes the current BC URL so it can be safely passed as a query parameter
  • window.open() — opens the Teams share dialog in a popup window (700×600 pixels)

The Meta-Programming Pitfall

Erik hit an important bug during the live session. The initial version evaluated window.top.location.href at the time the button HTML was created (when the Role Center loaded), not when the button was clicked. This meant the shared URL was always the Role Center URL, regardless of what page you were actually viewing.

The fix was to ensure that encodeURIComponent(window.top.location.href) appears as literal JavaScript text inside the onclick attribute, so it gets evaluated at click time. The string concatenation with escaped quotes makes this particularly fiddly to get right.

Results and Limitations

The final result works: a “Team” button appears in the Business Central top bar and persists as you navigate between pages. Clicking it opens the Teams sharing dialog with the current page URL pre-filled. You can select a channel, add a message, and share the link.

However, there are notable limitations:

  • The button disappears when switching companies — because the Role Center reloads
  • The Teams app card doesn’t trigger — sharing a BC link this way doesn’t produce the rich card preview that you get when pasting a link directly into a Teams message. The BC Teams app apparently doesn’t intercept links shared through the Share to Teams dialog.
  • Styling is minimal — the button is an unstyled HTML button (though it could be enhanced with icons and CSS)
  • DOM manipulation is fragile — relying on internal element IDs like centerRegion could break with future BC updates

Conclusion

While this experiment successfully demonstrates that you can inject a global “Share to Teams” button into Business Central using a control add-in and some creative JavaScript, the inability to trigger the Teams app’s rich card preview is a significant limitation. The link gets shared, but it appears as a plain URL rather than the interactive Business Central card that users see when pasting links directly into Teams conversations. Still, this session demonstrates valuable techniques — breaking out of control add-in iframes, injecting UI elements into the BC chrome, and dynamically capturing the current page URL — that could be useful for other integration scenarios. Erik invites viewers to share any knowledge about triggering Teams apps from external share mechanisms in the comments.

Picture of hougaard

hougaard