In the world of agents and longer-running processes, the need for UI interaction during processes is paramount. Recently, I found myself grabbing an old trip from a 5-year-old video to improve the usability of a new agent. Check out the video:
In this video, Erik demonstrates how to build interactive, real-time updating UI experiences in AL for Business Central — without relying on Microsoft’s locked-down AI/agent UI components. By revisiting a clever technique from a tic-tac-toe game built five years ago, Erik shows how JavaScript timers combined with control add-ins can keep the Business Central UI responsive during long-running operations. He then applies this same pattern to a real-world AI agent feature in his Advanced Portal Designer app.
The Problem: Microsoft’s Locked-Down UI Components
Microsoft is building impressive new UI components for agents and AI experiences in Business Central, but many of these are currently restricted to Microsoft’s own use. Erik acknowledges the rationale — things are evolving quickly and Microsoft wants the flexibility to change APIs without breaking third-party extensions — but it’s still frustrating for ISVs who need modern, interactive UI for their own AI-powered features.
The good news? There are techniques already available in AL that let us build genuinely interactive experiences, and they’ve been possible for years.
The Origin: Tic-Tac-Toe in AL
Five years ago, Erik built a tic-tac-toe game entirely in AL on this channel. Remarkably, the app file was built for version 17 (runtime 6.0) — ten versions behind the current release — and it still compiles and deploys perfectly. Kudos to Microsoft for backward compatibility.
The game looks and feels like a standard BC page, but with an important twist: when you click a square, there’s a visible delay before the computer makes its move. The UI updates in between. This shouldn’t be possible in the normal AL request/response cycle, where the UI only updates after all server-side code finishes executing.
How the Page Is Structured
The board is surprisingly simple. There’s a content area with three groups, each containing a grid with three fields. The fields are blob columns from a temporary table, named strategically: B1, B2, B3, B4, B5, B6, and so on — representing the nine squares of the board.
Then there’s a user control — a tiny one-pixel control add-in sitting invisibly on the page. This control add-in is the key to the entire technique.
The JavaScript Magic: Click Detection and Timers
The control add-in exposes two events: ControlClick and TimerTicked.
The click detection works by listening for clicks on the page and inspecting the DOM’s composed path. If the click target has a controlname attribute (which BC fields do), the JavaScript extracts the field name (e.g., “B1”) and fires the ControlClick event back to AL with that information.
When a player clicks a square, AL places the X, then starts a JavaScript timer using setInterval. When the timer fires, it calls the TimerTicked event back into AL. At that point, AL calculates the computer’s move, places the O, and stops the timer.
The critical insight is this: by returning control to the browser between the player’s click and the computer’s response, the UI gets a chance to update. The round-trip through JavaScript — even with zero delay — is enough to trigger a BC UI refresh.
Applying the Pattern: AI Agent in Advanced Portal Designer
Erik’s Advanced Portal Designer is an app that lets you build portals for Business Central. The upcoming version includes an AI agent feature — and this is where the tic-tac-toe pattern proves its real-world value.
The Agent UI Layout
The agent interface has a split view: the agent’s chat and tool calls on the right, and the content it’s working on (templates, pages, etc.) on the left. As the agent processes a request, both sides update in real time — you can see it listing templates, fetching fields, saving changes, and compiling actions step by step.
A Real Example
Erik demonstrates by asking the agent: “Add the due date column to the statement page.” The agent immediately starts working — listing templates, finding the right one, looking up fields in the customer ledger entry table, saving the updated template, and compiling the action. Each step is visible in the UI as it happens.
After the agent finishes, Erik refreshes the portal’s statement page, and the due date column appears. He then asks the agent to “move the due date after the description” — and it does, updating the UI throughout the process.
Finally, he tells the agent “Please remove the due date column again” — and it’s gone after a refresh.
Why Real-Time Updates Matter
All of this could happen in a single shot — send the request, wait, get the result. But for operations that might take minutes (adding multiple pages, editing multiple templates), a non-interactive experience would be terrible. Users need to see progress. They need to know the system is working. And with this pattern, they get exactly that.
The Implementation
The agent code is remarkably concise — around 200 lines. The core pattern is the same as tic-tac-toe:
- The
AskAgentAIfunction kicks off the agent’s work, then starts the JavaScript timer. - The timer immediately fires back into AL (no artificial delay needed, unlike the tic-tac-toe game where a half-second or one-second delay simulated “thinking”).
- AL processes the next step of the agent’s work and updates the page.
- The cycle repeats — each round-trip through JavaScript gives the BC client a chance to refresh the UI.
As Erik puts it: “The first time the agent control calls into the function, it sets the timer, loops right back out, and JavaScript calls back again straight away. But that’s enough to trigger the Business Central UI to be updated.”
Bonus: Two-Way Interaction
An additional benefit of this approach is that the user can interact with the content on the left side while the agent works. Any manual changes you make are still known to the agent, creating a truly collaborative editing experience. Erik notes that he found himself using the agent mode exclusively instead of the traditional portal designer workflow — it was simply more productive.
A Note on VS Code: Relative Line Numbers
Erik briefly mentions a helpful VS Code setting: relative line numbers. This displays line numbers relative to your cursor position, which is especially useful when debugging Business Central call stacks that report errors as relative line numbers within a function. You can enable this in VS Code settings.
Should Microsoft Do More?
Erik acknowledges the irony: by demonstrating that existing AL capabilities are sufficient to build rich, interactive agent UIs, he may have undermined his own argument that Microsoft should open up more UI components to ISVs. As he jokes, “I just shot myself in the foot.”
That said, the technique works. The user experience is genuinely interactive and usable, even if it requires some creative use of JavaScript control add-ins and timers.
Conclusion
The key takeaway is both simple and powerful: by using a JavaScript timer in a control add-in to create round-trips between the browser and AL, you can keep the Business Central UI responsive during long-running operations. This pattern — first demonstrated in a tic-tac-toe game five years ago — is directly applicable to modern scenarios like AI agents. Each trip through JavaScript, even with zero delay, gives the BC client an opportunity to refresh the page, creating the illusion (and reality) of real-time interactivity. If you’re building AI-powered features or any long-running interactive process in Business Central, this technique is well worth adding to your toolkit.
