How to Add a Custom Logo or Image to the Role Center in Business Central

One of the most common UI customizations people ask for in Dynamics 365 Business Central is:

“How do I add my company logo (or any image) to the Role Center?”

Out of the box, Business Central doesn’t give a direct way to do this. But with a Control Add-in, it’s actually quite straightforward.

In this blog, I’ll walk you through a simple and clean approach to display an image or logo at the top of a Role Center.

No complex JavaScript, no fancy frameworks — just the basics done right.

What We’ll Achieve

By the end of this blog, you’ll have:

• A custom logo/image displayed neatly in the Role Center

• Fully responsive and scalable

• Easy to reuse across other pages if needed

High-Level Approach

We’ll do this in four steps:

1. Create a Control Add-in
   
   
2. Load the image using JavaScript
   
   
3. Wrap the control add-in inside a CardPart page
   
   
4. Add the part to the Role Center using a page extension

Step 1: Create the Control Add-in

First, define a control add-in and include the image as a resource.

controladdin DynamicsDuo
{
    Images = 'DynamicsDuo.png';
    VerticalStretch = true;
    HorizontalStretch = true;
    RequestedHeight = 600;
    StartupScript = 'Startup.js';
}

Key points:

• Images → This is where you register your image file

• StartupScript → JavaScript file that will render the image

• The image must be included in your extension’s resources folder

• MOST IMPORTANT - Image Name should not contain spaces.
  

Step 2: Add JavaScript to Render the Image

Inside Startup.js, fetch the image using Business Central’s API and inject it into the control.

divinsideframe = document.getElementById("controlAddIn");

divinsideframe.innerHTML =
    '<img style="display: block; margin-left: 0px; margin-right: auto; width: 100%;" ' +
    'src="' + Microsoft.Dynamics.NAV.GetImageResource('DynamicsDuo.png') + '">';

Why this works:

• GetImageResource() securely retrieves the image from the extension

• width: 100% makes the image responsive

• No external hosting required

Step 3: Create a CardPart Page

Role Centers can only display parts, so we wrap the control add-in inside a CardPart page.

page 50101 DynamicsDuoPart
{
    PageType = CardPart;
    ApplicationArea = All;

    layout
    {
        area(Content)
        {
            group(GroupName)
            {
                ShowCaption = false;

                usercontrol(logo; DynamicsDuo)
                {
                    ApplicationArea = All;
                }
            }
        }
    }
}

Tip:

• ShowCaption = false keeps the UI clean

• CardPart pages are perfect for headers, logos, KPIs, and widgets

Step 4: Add the Part to the Role Center

Finally, extend the Role Center and place the logo at the top.

pageextension 50100 BusinessManagerExt extends "Business Manager Role Center"
{
    layout
    {
        addfirst(rolecenter)
        {
            part(DynamicsDuoPart; DynamicsDuoPart)
            {
                ApplicationArea = All;
                Caption = ' ';
            }
        }
    }
}

Why addfirst?

• Ensures the logo appears at the top

• Works nicely as a header-style banner

This approach works equally well for:

• Company branding

• Environment indicators (PROD / UAT / TEST)

• Announcements or static banners

Common Gotchas to Watch Out For

• ✔ Image file name is case-sensitive

• ✔ Image must be included in the extension package

• ✔ Don’t forget to deploy Startup.js

• ✔ Avoid very large images (optimize for web)

• ✔ Avoid spaces in the Image name
  

Closing Thoughts

This is a simple but powerful customization that greatly improves user experience and branding in Business Central.

Once you have this pattern in place, you can easily extend it to:

• Multiple images

• Dynamic content

• Environment-based visuals

If this helped you, feel free to share it with the community — happy customizing 🚀