Developer Preview of Acumatica’s New Modern UI

Summary 

In this blog post, I will show you how to enable the developer preview of the new Acumatica UI, released in the 23R1 release. After enabling the UI, I will show you how one rebuilds the site so that after you make changes to files, you can take a look at the changes you have made during development. 

I have been exceedingly excited about the new Acumatica Modern UI and have been waiting with bated breath for it to be released. In Acumatica 23R1, released on 4/4/2023, it is finally available to preview. I am going to show you how to enable it so you can see it too. 

Enabling the Modern UI

Step 1: Edit the web.config file  

Under the <Appsettings> tag of the web.config file, add the following: 

GIST: https://gist.github.com/lekker-solutions/a99f55e8da2613c1670a0ebe48e6b0ad

Step 2: Enable the modern UI for certain pages 
 
The modern UI is only available for certain pages. You can see which pages under the site path \FrontendSources\screen\src\screens. Navigate to the “Site Map” screen and make sure the “UI” column is visible. 

Step 3: View the Page

Voila, the screen is rendered using the new UI!

Structure of the Modern UI

Location

Under the path {siteRoot}\FrontendSources\screen\src\screens, you will see a collection of folders. Each folder represents a single screen, and inside the folder has the files that drive the screen. So inside path {siteRoot}\FrontendSources\screen\src\screens\SO\SO301000 exists the files that drive the ‘Sales Order’ screen.

In this folder you have the following files:

1. html – An HTML File that defines the screen layout of SO301000
2. ts – A TypeScript Screen viewmodel file for SO301000
3. ts – An additional TypeScript file that defines some additional view models (optional, it just makes the main SO301000.ts file less dense to read.

These files together make up what used to be a single SO301000.aspx and SO301000.aspx.cs pair in the current Acumatica UI paradigm. In further blog posts I will detail how these files can be edited.

Creating your own page

If you want to create a brand-new page, follow the following steps:

1. Copy an entire directory of an existing page
2. Rename the directory to your site map ID, e.g. LS301000
3. Rename the .html and .ts file to the site map ID you have chosen in step 2
4. Build your changes as described in the next section of this post.

Building your changes

If you create a new screen, or update the source files of an existing screen, you have to rebuild the screens. You can perform this as follows:

1. Make sure that you have node and npm installed. Here is a guide: Set up NodeJS on native Windows | Microsoft Learn
2. In windows terminal, navigate to the {siteRoot}\frontendsources path
3. Run the following commands:
   1. npm run getmodules
   2. npm run build
4. Now, you can either view your changes to the page, or add a site map entry mapping to a new folder.

If you have issues after building, where you still don’t see your changes reflected in the application, you can clear the application caches, which can be performed by pressing a “Clear Caches” button on the “Apply Updates” screen (SM203510), and afterwards your changes should be visible.

Summary

After listening to talks from the platform team about the new UI now for several years, I am happy to finally be able to play with it myself now! This is a major step keeping Acumatica the most modern ERP (Enterprise Resource Planning) available.

Happy Coding!