UI Hacks with Javascript

In this video, I demonstrate the Javascript Workbench (can be found on my GitHub) and uses it to manipulate the UI of Business Central.

https://youtu.be/wEIEFwHUEkM

In this video, Erik demonstrates how to manipulate the Business Central UI using JavaScript in an interactive way. Rather than going through the traditional code-compile-deploy cycle, he builds a clever “workbench” tool that lets you write and execute JavaScript directly inside Business Central. He then shows how to change field sizes, modify background colors, and even animate UI elements — all in real-time.

The JavaScript Workbench Concept

The core idea is simple but powerful: create a page part that contains a multi-line text field where you can type JavaScript code, and then execute it using JavaScript’s built-in eval() function. The eval() function takes a string containing code and executes it — essentially a JavaScript compiler built right into the language itself.

Erik sets up a workbench page with three fields:

  • A Code field (multi-line) — where you type your JavaScript
  • An Error field (multi-line) — where error messages are displayed
  • A User Control — the JavaScript add-in that runs the eval()

The user control is based on the signature Hougaard control add-in pattern (covered in earlier videos on the channel). The add-in itself is minimal — essentially just a dot — but it contains the critical eval() call that makes everything work.

Embedding the Workbench in a Page

Since the workbench is a page part, it can be quickly plugged into any page. Erik creates a simple page extension on the Customer Card:

pageextension 56100 "Customer Card JS" extends "Customer Card"
{
    layout
    {
        addfirst(content)
        {
            part(WB; Workbench)
            {
                ApplicationArea = all;
            }
        }
    }
}

Erik initially tries placing the workbench in the FactBox area, but quickly discovers that FactBoxes are always read-only — meaning you can’t type code into the field. He moves it to the content area instead, where it becomes editable. When you type code into the field and tab out (triggering the OnValidate), the JavaScript is evaluated.

Breaking Out of the iframe

One of the most important things Erik demonstrates is that Business Central add-ins run inside an iframe. This means that document and window refer to the add-in’s own context, not the main page. If you try document.getElementById() directly, you won’t find anything on the main Business Central page.

The solution is to break out of the iframe by accessing the parent window:

window.parent.document.getElementById('controlId')

This gives you access to the full Business Central page DOM, where you can find and manipulate any element.

Finding Elements with querySelector

While you can find elements by ID using the browser’s inspector tool (Ctrl+Shift+I in Chrome or the new Edge), the IDs assigned by Business Central (like “B4KE”) are meaningless and can change. Erik shows a more robust approach using querySelector with aria-label attributes.

When inspecting a field like “Name” on the Customer Card, you’ll notice it has an aria-label attribute that starts with the field name. You can use this to find elements more meaningfully:

var name = window.parent.document.querySelector('[aria-label^="Name,"]');

The ^= syntax means “starts with,” so this query finds the element whose aria-label starts with “Name,” — which is the pattern Business Central uses (the label followed by a comma and the current value).

Changing Field Properties

Resizing Text Areas

Once you have a reference to an element, you can manipulate it directly. For example, to change the number of rows in a text area:

var editor = window.parent.document.getElementById('B4KE');
editor.rows = 5;

This immediately resizes the field. Set it to 300 and the text area becomes enormous; set it to 1 and it becomes a single-line input.

Changing Background Colors

A common request is changing a field’s background color. Erik demonstrates this on the Name field, but runs into CSS specificity issues — Business Central’s stylesheets override inline styles. The fix is using the !important declaration:

var name = window.parent.document.querySelector('[aria-label^="Name,"]');
name.setAttribute('style', 'background-color: red !important;');

Without !important, the style is overridden by Business Central’s CSS (visible as a crossed-out style in the browser’s inspector). With it, the background color turns red immediately. This technique could be extended to build a custom alert system — for example, highlighting fields based on credit limits or balance amounts.

Removing Spell Check

Erik also discovers that setting spellcheck = false on an element removes the browser’s spell check underlines — a small but useful trick for fields where spell checking is unwanted.

Animating UI Elements

For the grand finale, Erik finds the delete (trash can) icon using its data-icon-name attribute:

var name = window.parent.document.querySelector('[data-icon-name^="Delete"]');

He then creates a rotating animation using setInterval:

var degree = 0;
function rotate() {
    name.setAttribute('style', 'transform: rotate(' + degree.toString() + 'deg) !important;');
    degree++;
}
window.setInterval(rotate, 10);

The result is a continuously spinning trash can icon right inside Business Central — a fun demonstration of just how much control JavaScript gives you over the UI.

Important Warning

Erik gives a strong caution: this is hacking, not supported customization. Microsoft has made no promises that any of these internal element names, labels, aria attributes, or DOM structures will remain stable. Key points to keep in mind:

  • Microsoft can change the internal DOM structure at any time
  • Element IDs and class names are generated and can change between updates
  • If you put this into production, you must test against every cumulative update (CU) that comes out
  • If Microsoft’s changes break your JavaScript hacks, that’s entirely your responsibility

Summary

The JavaScript Workbench is a clever tool for interactively exploring and manipulating the Business Central UI. By leveraging eval(), iframe parent access, and querySelector, you can prototype UI changes in real-time without the code-compile-deploy cycle. While the techniques demonstrated — resizing fields, changing colors, animating elements — are powerful, they operate outside Microsoft’s supported customization model. Use them for experimentation and learning, and exercise extreme caution if you choose to deploy them in production environments.

Picture of hougaard

hougaard