Acumatica Modern UI: Quick-Start Guide and Tips

Hello everyone!

I’ve recently been upgrading several custom pages—and extensions of standard pages—to the Acumatica Modern UI. Below is a collection of notes, lessons learned, and practical tips that I hope will help others going through the same process. If you have additional insights or best practices, please feel free to add them in the comments!

1. Quick-Start Process for Converting Classic Forms to Modern UI

The process flow for converting Classic forms is not always intuitive. Here is a simplified guide to get your custom forms converted quickly. (Note: For extensions of standard forms, I’ve had the most success creating the Modern UI files manually and then moving them into the development folder.)

Steps:

1. In your web.config, set the screenConverter attribute shouldFilesbeDownloaded="False".
2. Navigate to your custom form.
3. Open the Customization menu and click Convert to Modern UI.
4. Acumatica will place the generated files in:
   site\FrontendSources\screen\src\development
   These files will now be available to your customization project.
5. Open your Customization Project, go to the Modern UI Files tab, and use the + button to add the new files.
6. Publish your customization, navigate to the upgraded page, open the Tools menu, and select Switch to Modern UI.

2. Where Modern UI Files Are Published

When Modern UI files are published, Acumatica moves them into a site-specific folder:

site\FrontendSources\screen\src\customizationScreens\YourCompanyName

If you’re searching for published output or debugging path-related issues, this is the location to check.

3. Avoid Duplication Errors

If you place Modern UI code in:

site\FrontendSources\screen\src\screens

and then attempt to publish with the same files in the Modern UI files tab, Acumatica will throw duplicate-file errors during publishing.  You can either develop in situ running commandline build statements or develop using the customization project browser and publishing.  There’s no mixing the two process flows.

4. Do Not Use Self-Closing Tags in Modern UI HTML

Avoid self-closing tags (e.g., <field />) in Modern UI HTML files.

Instead, explicitly close all <field> tags:

<field></field>

Using self-closing tags can cause incorrect element sizing and layout oddities.

5. Using Extension Tables with TypeScript

If you use extension tables to add fields to standard DACs, you may be wondering how those fields surface in TypeScript.

Good news—your extension fields are available if you extend the existing view for the standard table.

Example:

export interface MyExtensionFields extends SOShipmentHeader {}

export class MyExtensionFields {

    UDFField1: PXFieldState;

}

This allows your extended fields to be recognized and strongly typed within the Modern UI TypeScript layer.

6. Custom CSS

You can create custom CSS files and link to them in your html with the following

<template>

<require from="../ISPS2000.scss"></require>

</template>

In this case, I created the ISPS2000.scss flat file in the root IS folder for my custom pages.

If you’ve encountered other challenges or discovered helpful shortcuts in the Modern UI conversion process, I’d love to hear them. Happy developing!