Business Central and Microsoft Teams – Hacking Session #1

In this video, I’m poking around in the new integration between Microsoft Teams and Business Central.

https://youtu.be/fMDjgI5YKVk

There will be a #2 video, let me know what kind of integration between Teams and Business Central you’re looking for.

In this video, Erik explores the integration between Business Central and Microsoft Teams that was introduced with version 17. He walks through installing the Business Central app in Teams, pasting Business Central links to generate cards, and then dives into customizing those cards as a developer by modifying field groups. This is the first in a series of “hacking sessions” on the topic.

Getting Started with Business Central in Teams

At the time of this recording, the Business Central and Teams integration only works for Business Central in the cloud. Setting it up is straightforward:

  1. Open Microsoft Teams and go to Apps
  2. Search for Business Central — you’ll find a “Business Central Preview” app
  3. Click install — the installation process is just a single authentication step

One thing that’s initially confusing is that after installing the app, it doesn’t appear in the typical places you’d expect. It’s not listed in your installed apps in the traditional sense, and you won’t find it when searching within a team channel. That’s because this isn’t a “tab” style app — it works differently.

How the Integration Works: Pasting Links as Cards

The core mechanic is simple: you copy a URL from Business Central and paste it into a Teams conversation. When you do, Teams automatically renders a card with key information from that record.

For example, pasting a link to a customer record generates a card showing:

  • The customer name (displayed prominently)
  • The customer image
  • The customer number
  • The balance
  • Other key fields

The card has a few interactive elements:

  • Three dots menu — includes a “Copy” option that lets you paste the card into another conversation
  • Details — opens an iframe experience within Teams showing the full Business Central page (similar to the Outlook integration)
  • Pop-up — opens the link directly in Business Central in the browser

One quirk Erik discovered: if you paste only the URL with nothing else in the message, the card won’t generate. You need to type something (even just a space) before or after the URL for Teams to recognize and render it.

Within the Details iframe, you can even use keyboard shortcuts like Alt+Q to navigate, even though the search bar isn’t visible. This works for sandbox and production environments alike since the environment is part of the URL.

Understanding Field Groups: What Powers the Cards

An important realization is that the card shown in Teams is not derived from the page layout (e.g., the Customer Card page). The image, for instance, sits in a FactBox on the page — but it still appears on the Teams card. That’s because the card is actually driven by field groups defined on the table, not the page.

Field groups are a construct on tables that define which fields appear in specific UI contexts. There are two key field groups:

  • DropDown — the fields shown when selecting a record from a dropdown (e.g., Number, Name, City, Post Code, Phone No., Contact)
  • Brick — the fields shown in tile/brick views, originally designed for the phone client. This is what Teams uses for its cards.

Looking at the Customer table’s Brick field group, we can see it contains: Number, Name, Balance, Contact, Balance Due, and Image — which maps directly to what appears on the Teams card, though not necessarily in the same order (some logic is applied to the display ordering).

Similarly, the Job table has a Brick field group with: Number, Description, Bill-to Customer, Starting Date, Status, and Image.

Customizing the Teams Card with AL Code

Since the Teams card is driven by field groups on the table, we can customize it using a table extension. The key operation is addlast on the Brick field group.

Here’s the table extension that adds Address, Address 2, Phone No., and E-Mail to the Customer’s Brick field group:

tableextension 50127 "Teams" extends Customer
{
    fieldgroups
    {
        addlast(Brick; Address, "Address 2", "Phone No.", "E-Mail")
        {

        }
    }
}

Note that the curly brackets after the addlast are required syntactically, but there are no properties available to set on field groups — so they remain empty.

After publishing this extension, pasting a customer link into Teams now shows the additional fields: email, phone number, address, and address 2 — added in the order specified in the addlast call.

The App Configuration

The app.json for this project is configured as follows:

{
  "id": "9ce85214-5fc7-418c-80ad-66179698a7f5",
  "name": "Hacking Teams",
  "publisher": "Default publisher",
  "version": "1.0.0.0",
  "dependencies": [
    {
      "id": "63ca2fa4-4f03-4f2b-a480-172fef340d3f",
      "publisher": "Microsoft",
      "name": "System Application",
      "version": "16.0.0.0"
    },
    {
      "id": "437dbf0e-84ff-417a-965d-ed2bb9650972",
      "publisher": "Microsoft",
      "name": "Base Application",
      "version": "16.0.0.0"
    }
  ],
  "platform": "16.0.0.0",
  "idRanges": [
    {
      "from": 50100,
      "to": 50149
    }
  ],
  "showMyCode": true,
  "runtime": "5.0"
}

Side Effect: Impact on the Phone Client

An important thing to be aware of: since the Brick field group is shared between the Teams card and the phone client, any customizations you make will affect both. After deploying the extension, the phone client view of the customer list also shows the additional fields.

Erik tested this by adding a phone number (“555” — the classic movie phone number) to a customer and confirmed it appeared in the phone client’s brick view. The ordering in the phone client also follows its own logic, not necessarily the order defined in addlast.

This is something developers need to keep in mind: customizing the Teams experience and customizing the phone client experience are effectively the same thing.

Bonus: Injecting a “Share to Teams” Button

The source code also includes an experimental approach to add a “Share to Teams” button directly into Business Central using a control add-in. This uses a JavaScript approach to inject a button into the Business Central UI that opens the Teams sharing dialog:

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

The JavaScript behind it manipulates the DOM to insert a share button:

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 embedded into the Role Center via a page extension:

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

The Teams Part page hosts the control add-in and triggers the JavaScript on load:

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

Summary

The Business Central and Microsoft Teams integration provides a convenient way to share and view Business Central records directly within Teams conversations. Key takeaways from this hacking session:

  • The integration works by pasting Business Central URLs into Teams chats, which renders interactive cards
  • Cards are powered by the Brick field group on the table, not the page layout
  • You can customize the Teams card by using addlast on the Brick field group in a table extension
  • Be aware that Brick field group changes also affect the phone client
  • A quirk exists where the URL must not be the only content in the message — add some text alongside it
  • This only works for Business Central in the cloud

In the next episode, Erik plans to explore whether JavaScript can be used to interact with Teams from within the Business Central browser experience embedded inside Teams — building on the “escape the sandbox” techniques covered in previous videos.

Picture of hougaard

hougaard