Loading ...

Why a ModernUI Field May Not Show in Acumatica—and How to Fix It

22 June 2025

When working with Acumatica’s ModernUI framework, placing a custom field on the screen often feels straightforward: define the field in TypeScript, place it in the template, and expect it to appear. But sometimes, despite correct syntax and logic, the field simply doesn’t show up. If you’ve run into this issue, you're not alone—and there's usually a subtle reason behind it.

Let’s take a real-world example where a developer created a custom field called UsrSalesRepID for the Purchase Order screen (PO301000). The goal was to display this field just below the OwnerID field in the header section. Here's what the TypeScript and template code looked like:

The Field That Didn’t Show

Despite correct syntax and build success, the field never appeared on the UI.

The Similar Field That Worked

A similar setup for another field, UsrRelatedRequisitionCD, worked perfectly. It was defined like this:

So, what’s the difference?

The Real Cause: View Binding Mismatch

The issue lies in where the field is being placed and which view it's extending.

In Acumatica’s ModernUI, the screen layout is segmented, and different sections (like the document header vs. tabs) are bound to different views. In this case:

  • The header section of the Purchase Order screen is bound to the POOrderHeader view.
  • The developer, however, extended the POOrder view—not POOrderHeader.

So while the field was correctly defined in TypeScript, it was not attached to the data context used in the target section of the screen. The result? The field is ignored by the renderer, and it silently fails to appear.

On the other hand, the second example placed the field on one of the tabs—where POOrder is indeed the correct view—so it rendered without issue.

How to Fix It

If you want to add a custom field to the header section of a ModernUI screen:

  1. Check which view the section is bound to.
    If it’s the header, it’s likely POOrderHeader, SOOrderHeader, etc.
  2. Extend the correct view.
    Update your TypeScript class to extend the proper data view:

3.    Place the field in the correct section of the template.
Make sure the HTML field element is inserted into a section that is actually bound to the view you're extending.

 

Final Thoughts

In Acumatica’s ModernUI, data binding is closely tied to the layout and component hierarchy. If your field doesn’t show up, don’t just check for syntax issues—check which data view powers that portion of the screen. Aligning your field definition with the correct view ensures the UI engine recognizes and renders it properly.

Once you understand how views relate to layout sections, placing custom fields becomes much more predictable—and your development process gets faster and more reliable.