If you attend the annual Acumatica Summit or have followed some of the posted videos of Mike Shchelkonogov from Summit and DevCon, you know that we have been teased with migration to Aurelia and TypeScript for years. With the release of Acumatica 2023r1, the time has come that we as developers in the community finally get the opportunity to try it out ourselves!
Getting Started
To give credit where due and save some length in this post, please open and bookmark the following blog post by my friend Kyle Vanderstoep.
Developer Preview of Acumatica’s New Modern UI | Acumatica Cloud ERP
Kyle is leading the way in the developer community with migration to the new UI, and his post was my primary source to get started.
In Kyle’s post, there is a reference to a site explaining how to setup Node.js. When you get there, watch for a step that says to run the following command AND DON’T!!!
nvm install latest
I did this BEFORE digesting that this will install the absolute latest, bleeding edge of technology, sure to throw more errors than the worst baseball team in MLB history, etc. If you already did it, don’t panic. There are instructions how to install a stable build and select that build. I went back and installed LTS version 18.16.0.
nvm install 18.16.0
My First Working Screen
Spoiler Alert: This is going to be super lack-luster, but if you can accomplish this, then you have the basic building blocks for success!
The best place to start when you don’t know what you are doing is always the simplest example of what you want to achieve. To be honest, I thought that would be a setup screen, but I was wrong! (If only you could see the grin on my face as I shake my head thinking about what a fiasco that attempt was!) In Kyle’s post, he explains where to find the screens in the new UI, and Acumatica has provided a FEW as examples. I stumbled upon GL202500 which simply gives a list of accounts. No fluff, no frills. That example, it seems, is the simplest format to mirror.
Before we look at any code, let’s see the screen I picked before and after. (Don’t worry, creating the screen for the new UI doesn’t take away the old ASPX screen, and you can switch back and forth between Modern and Classic with ease.)
The screen I selected is a simple list of Measurements used in the CMMS-Lite community project.
Once the screen for the new UI is created, the UI is switched to Modern in the Site Map.
The resulting screen in the modern UI is shown below.
Classic Screen – ASPX
Below is the simple ASPX code for the Measurements screen.
Modern UI
As noted in Kyle’s blog post, we need to create the folder structure for the screen. In the case of WO202000, we must create the folder structure FrontendSources\screen\src\screens\WO\WO202000 to hold the new UI files.
To build this screen, we look to the example of GL202500 included in 2023r1. The folder can be copied to the new folder matching the screen ID (WO202000) and then edited to the details of our screen.
The modern UI is split into an Html and a TypeScript file. For such a simple screen, the HTML page simply defines a grid bound to the same view as the ASPX screen and defining the 2 columns that are displayed.
The TypeScript file is a bit more complicated. The graph and primary view are specified in graphInfo much the same as the ASPX PXDataSource. Next, the screen exported with the view Measurements being populated by createCollection of the primary DAC WOMeasurement. By specifying mergeToolbarWith: “ScreenToolbar”, the menu is consolidated between the screen’s main toolbar and the collection’s toolbar. Finally, the WOMeasurement (DAC) is exported specifying each field as PXFieldState and any options that apply, such as commitChanges.
Once these files are created, we must execute the following 2 commands (and only the second command for updates):
- npm run getmodules
- npm run build
After refreshing the browser session, the SiteMap can be updated to the Modern UI and the screen will be displayed accordingly.
I have a lot more to learn about this new UI, but even in such a simple screen my success in creating my first new screen in the modern UI has taught me a foundation upon which to build… and now hopefully you as well.
Happy Coding!