🔍 Field Magnifier for BC: Enhanced Accessibility 👓

I believe accessibility is very important, especially in business tools. While it’s true we have the operating system’s built-in magnifier or we can zoom in on the browser, I think the magnifier is inconvenient to activate constantly, and the browser zoom affects the entire interface, making navigation difficult when we only need to magnify specific areas.

Therefore, the idea of ​​this publication is to offer a simple and practical solution, a contextual field magnifier that works with hover (when the cursor passes over any field), showing only the magnified content in a floating window without affecting the rest of the interface.

This solution benefits both users with visual needs requiring instant magnification, and anyone who wants to enjoy better readability, all without adjusting the browser or making permanent changes to the interface.

How does it work?

It’s an extension that intercepts hover events in BC fields. When you hover over any field, the extension automatically detects the field, extracts its caption and value, and creates a floating popup with the magnified text. The popup automatically repositions and hides when you move the cursor to another area.

One feature is that the magnifier offers three adjustable zoom levels (3x, 4x and 5x), where the caption and value grow proportionally.

The Toggle Field Magnifier button allows you to activate or deactivate the functionality at any time.

Architecture and Universal Pattern

The solution consists of a Control AddIn (JavaScript) + CSS that performs detection and magnification, Page Extensions with a reusable pattern, and Actions to control toggle and zoom.

To activate the functionality on any page:

• Add the MagnifierAddin user control to the layout.
• Include the actions (Toggle + Zoom 3x/4x/5x).
• Extend the page as desired.

The code is here, if you want to check it out: Blog/GDRGDev_FieldMagnifier/src at main · gdrgdev/Blog

The objects are:

• GDRGFieldMagnifier.ControlAddIn.al: Control Add-In that connects AL with JavaScript.
• GDRGCustomerCardMagnifier.PageExt.al: Example implementation in Customer Card.
• GDRGCustomerListMagnifier.PageExt.al: Example implementation in Customer List.
• src/ControlAddIn/js/Magnifier.js: JavaScript engine (detection, extraction, rendering).
• src/ControlAddIn/css/Magnifier.css: Popup styles with gradients and animations.

I hope this information helps you.

Más información / More information:

Originally published at http://gerardorenteria.blog on April 23, 2026.